diff --git a/CHANGELOG.md b/CHANGELOG.md
index 010eea83d02b..63b69c240dc4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -59,11 +59,18 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Dynamic Configurations] Pass request headers when making application config calls ([#6164](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6164))
 - [Discover] Options button to configure legacy mode and remove the top navigation option ([#6170](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6170))
 - [Multiple Datasource] Add default functionality for customer to choose default datasource ([#6058](https://github.com/opensearch-project/OpenSearch-Dashboards/issues/6058))
+- [Multiple Datasource] Remove arrow down icon from data source selectable component ([#6257](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6257))
 - [Multiple Datasource] Add import support for Vega when specifying a datasource ([#6123](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6123))
 - [Workspace] Validate if workspace exists when setup inside a workspace ([#6154](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6154))
 - [Workspace] Register a workspace dropdown menu at the top of left nav bar ([#6150](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6150))
 - [Multiple Datasource] Add icon in datasource table page to show the default datasource ([#6231](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6231))
 - [Multiple Datasource] Add TLS configuration for multiple data sources ([#6171](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6171))
+- [Multiple Datasource] Add multi selectable data source component ([#6211](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6211))
+- [Multiple Datasource] Refactor data source menu and interface to allow cleaner selection of component and related configurations ([#6256](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6256))
+- [Multiple Datasource] Allow top nav menu to mount data source menu for use case when both menus are mounted ([#6268](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6268))
+- [Workspace] Add create workspace page ([#6179](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6179))
+- [Multiple Datasource] Make sure customer always have a default datasource ([#6237](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6237))
+- [Workspace] Add workspace list page ([#6182](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6182))
 - [Multiple Datasource] Append `data_source_name` to the Vega spec and add datasource reference when installing sample data ([#6218](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6218))
 
 ### 🐛 Bug Fixes
diff --git a/src/core/public/index.ts b/src/core/public/index.ts
index c82457ef2184..cc51c7215964 100644
--- a/src/core/public/index.ts
+++ b/src/core/public/index.ts
@@ -94,7 +94,7 @@ export type { Logos } from '../common';
 export { PackageInfo, EnvironmentMode } from '../server/types';
 /** @interal */
 export { CoreContext, CoreSystem } from './core_system';
-export { DEFAULT_APP_CATEGORIES, WORKSPACE_TYPE } from '../utils';
+export { DEFAULT_APP_CATEGORIES, WORKSPACE_TYPE, cleanWorkspaceId } from '../utils';
 export {
   AppCategory,
   UiSettingsParams,
@@ -358,3 +358,5 @@ export {
 export { __osdBootstrap__ } from './osd_bootstrap';
 
 export { WorkspacesStart, WorkspacesSetup, WorkspacesService, WorkspaceObject } from './workspace';
+
+export { debounce } from './utils';
diff --git a/src/core/public/utils/debounce.test.ts b/src/core/public/utils/debounce.test.ts
new file mode 100644
index 000000000000..7722a26bd0e5
--- /dev/null
+++ b/src/core/public/utils/debounce.test.ts
@@ -0,0 +1,55 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { debounce } from './debounce';
+
+describe('debounce', () => {
+  let fn: Function;
+  beforeEach(() => {
+    fn = jest.fn();
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
+  test('it should call the debounced fn once at the end of the quiet time', () => {
+    const debounced = debounce(fn, 1000);
+
+    for (let i = 0; i < 100; i++) {
+      debounced(i);
+    }
+
+    jest.advanceTimersByTime(1001);
+    expect(fn).toBeCalledTimes(1);
+    expect(fn).toBeCalledWith(99);
+  });
+
+  test("with a leading invocation, it should call the debounced fn once, if the time doens't pass", () => {
+    const debounced = debounce(fn, 1000, true);
+
+    for (let i = 0; i < 100; i++) {
+      debounced(i);
+    }
+
+    jest.advanceTimersByTime(999);
+
+    expect(fn).toBeCalledTimes(1);
+    expect(fn).toBeCalledWith(0);
+  });
+
+  test('with a leading invocation, it should call the debounced fn twice (at the beginning and at the end)', () => {
+    const debounced = debounce(fn, 1000, true);
+
+    for (let i = 0; i < 100; i++) {
+      debounced(i);
+    }
+
+    jest.advanceTimersByTime(1500);
+
+    expect(fn).toBeCalledTimes(2);
+    expect(fn).toBeCalledWith(0);
+    expect(fn).toBeCalledWith(99);
+  });
+});
diff --git a/src/core/public/utils/debounce.ts b/src/core/public/utils/debounce.ts
new file mode 100644
index 000000000000..95e1a81dcab8
--- /dev/null
+++ b/src/core/public/utils/debounce.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @param func The function to be debounced.
+ * @param delay The time in milliseconds to wait before invoking the function again after the last invocation.
+ * @param leading An optional parameter that, when true, allows the function to be invoked immediately upon the first call. 
+
+ */
+export const debounce = (func: Function, delay: number, leading?: boolean) => {
+  let timerId: NodeJS.Timeout;
+
+  return (...args: any) => {
+    if (!timerId && leading) {
+      func(...args);
+    }
+    clearTimeout(timerId);
+
+    timerId = setTimeout(() => func(...args), delay);
+  };
+};
diff --git a/src/core/public/utils/index.ts b/src/core/public/utils/index.ts
index 30055b0ff81c..4c64728feb16 100644
--- a/src/core/public/utils/index.ts
+++ b/src/core/public/utils/index.ts
@@ -38,3 +38,4 @@ export {
   getWorkspaceIdFromUrl,
   cleanWorkspaceId,
 } from '../../utils';
+export { debounce } from './debounce';
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 262deaaaeaf0..e7e215dfb6bb 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
@@ -952,6 +952,7 @@ exports[`Dashboard top nav render in embed mode 1`] = `
             onQuerySubmit={[Function]}
             onSavedQueryIdChange={[Function]}
             screenTitle="Dashboard Test Title"
+            showDataSourceMenu={false}
             showDatePicker={false}
             showFilterBar={false}
             showQueryBar={false}
@@ -1919,6 +1920,7 @@ exports[`Dashboard top nav render in embed mode, and force hide filter bar 1`] =
             onQuerySubmit={[Function]}
             onSavedQueryIdChange={[Function]}
             screenTitle="Dashboard Test Title"
+            showDataSourceMenu={false}
             showDatePicker={false}
             showFilterBar={false}
             showQueryBar={false}
@@ -2886,6 +2888,7 @@ exports[`Dashboard top nav render in embed mode, components can be forced show b
             onQuerySubmit={[Function]}
             onSavedQueryIdChange={[Function]}
             screenTitle="Dashboard Test Title"
+            showDataSourceMenu={false}
             showDatePicker={false}
             showFilterBar={false}
             showQueryBar={false}
@@ -3853,6 +3856,7 @@ exports[`Dashboard top nav render in full screen mode with appended URL param bu
             onQuerySubmit={[Function]}
             onSavedQueryIdChange={[Function]}
             screenTitle="Dashboard Test Title"
+            showDataSourceMenu={false}
             showDatePicker={false}
             showFilterBar={false}
             showQueryBar={false}
@@ -4820,6 +4824,7 @@ exports[`Dashboard top nav render in full screen mode, no componenets should be
             onQuerySubmit={[Function]}
             onSavedQueryIdChange={[Function]}
             screenTitle="Dashboard Test Title"
+            showDataSourceMenu={false}
             showDatePicker={false}
             showFilterBar={false}
             showQueryBar={false}
@@ -5786,6 +5791,7 @@ exports[`Dashboard top nav render with all components 1`] = `
             onQuerySubmit={[Function]}
             onSavedQueryIdChange={[Function]}
             screenTitle="Dashboard Test Title"
+            showDataSourceMenu={false}
             showDatePicker={false}
             showFilterBar={true}
             showQueryBar={false}
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.test.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.test.tsx
index 1fe6e4f5d499..aa4e128094c7 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.test.tsx
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.test.tsx
@@ -53,7 +53,7 @@ describe('Datasource Management: Create Datasource Wizard', () => {
 
     test('should create datasource successfully', async () => {
       spyOn(utils, 'createSingleDataSource').and.returnValue({});
-
+      spyOn(utils, 'handleSetDefaultDatasource').and.returnValue({});
       await act(async () => {
         // @ts-ignore
         await component.find(formIdentifier).first().prop('handleSubmit')(
@@ -62,6 +62,7 @@ describe('Datasource Management: Create Datasource Wizard', () => {
       });
       expect(utils.createSingleDataSource).toHaveBeenCalled();
       expect(history.push).toBeCalledWith('');
+      expect(utils.handleSetDefaultDatasource).toHaveBeenCalled();
     });
 
     test('should fail to create datasource', async () => {
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx
index 06b77efd9b94..58f9ae108083 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx
@@ -21,6 +21,7 @@ import {
   getDataSources,
   testConnection,
   fetchDataSourceVersion,
+  handleSetDefaultDatasource,
 } from '../utils';
 import { LoadingMask } from '../loading_mask';
 
@@ -35,6 +36,7 @@ export const CreateDataSourceWizard: React.FunctionComponent<CreateDataSourceWiz
     setBreadcrumbs,
     http,
     notifications: { toasts },
+    uiSettings,
   } = useOpenSearchDashboards<DataSourceManagementContext>().services;
 
   /* State Variables */
@@ -76,6 +78,8 @@ export const CreateDataSourceWizard: React.FunctionComponent<CreateDataSourceWiz
       const version = await fetchDataSourceVersion(http, attributes);
       attributes.dataSourceVersion = version.dataSourceVersion;
       await createSingleDataSource(savedObjects.client, attributes);
+      // Set the first create data source as default data source.
+      await handleSetDefaultDatasource(savedObjects.client, uiSettings);
       props.history.push('');
     } catch (e) {
       setIsLoading(false);
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
index 207e38d657da..cb7e4410472c 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
@@ -1,13 +1,132 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`create data source menu should render normally 1`] = `
+exports[`create data source menu should render data source selectable normally 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiPopover euiPopover--anchorDownLeft"
+        id="dataSourceSelectableContextMenuPopover"
+      >
+        <div
+          class="euiPopover__anchor"
+        >
+          <button
+            aria-label="dataSourceMenuButton"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+            data-test-subj="dataSourceSelectableContextMenuHeaderLink"
+            type="button"
+          >
+            <span
+              class="euiButtonContent euiButtonEmpty__content"
+            >
+              <span
+                class="euiButtonContent__icon"
+                color="inherit"
+                data-euiicon-type="database"
+              />
+              <span
+                class="euiButtonEmpty__text"
+              />
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiPopover euiPopover--anchorDownLeft"
+      id="dataSourceSelectableContextMenuPopover"
+    >
+      <div
+        class="euiPopover__anchor"
+      >
+        <button
+          aria-label="dataSourceMenuButton"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+          data-test-subj="dataSourceSelectableContextMenuHeaderLink"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="database"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            />
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`when setMenuMountPoint is provided should mount data source component 1`] = `
 Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <nav
         aria-label="App menu"
-        class="euiHeaderLinks osdTopNavMenu myclass"
+        class="euiHeaderLinks"
         data-test-subj="top-nav"
       >
         <div
@@ -20,9 +139,6 @@ Object {
             <div
               class="euiPopover__anchor"
             >
-              <span
-                data-euiicon-type="database"
-              />
               <button
                 aria-label="dataSourceMenuButton"
                 class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
@@ -30,12 +146,12 @@ Object {
                 type="button"
               >
                 <span
-                  class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                  class="euiButtonContent euiButtonEmpty__content"
                 >
                   <span
                     class="euiButtonContent__icon"
                     color="inherit"
-                    data-euiicon-type="arrowDown"
+                    data-euiicon-type="database"
                   />
                   <span
                     class="euiButtonEmpty__text"
@@ -47,50 +163,9 @@ Object {
         </div>
       </nav>
     </div>
+    <div />
   </body>,
-  "container": <div>
-    <nav
-      aria-label="App menu"
-      class="euiHeaderLinks osdTopNavMenu myclass"
-      data-test-subj="top-nav"
-    >
-      <div
-        class="euiHeaderLinks__list euiHeaderLinks__list--gutterXS"
-      >
-        <div
-          class="euiPopover euiPopover--anchorDownLeft"
-          id="dataSourceSelectableContextMenuPopover"
-        >
-          <div
-            class="euiPopover__anchor"
-          >
-            <span
-              data-euiicon-type="database"
-            />
-            <button
-              aria-label="dataSourceMenuButton"
-              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
-              data-test-subj="dataSourceSelectableContextMenuHeaderLink"
-              type="button"
-            >
-              <span
-                class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-              >
-                <span
-                  class="euiButtonContent__icon"
-                  color="inherit"
-                  data-euiicon-type="arrowDown"
-                />
-                <span
-                  class="euiButtonEmpty__text"
-                />
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </nav>
-  </div>,
+  "container": <div />,
   "debug": [Function],
   "findAllByAltText": [Function],
   "findAllByDisplayValue": [Function],
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap
index ea00d96c5798..9db092a1b61c 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap
@@ -1,6 +1,167 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataSourceMenu should render data source aggregated view 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        aria-label="dataSourceAggregatedViewMenuButton"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty-isDisabled euiHeaderLink"
+        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
+        disabled=""
+        type="button"
+      >
+        <span
+          class="euiButtonContent euiButtonEmpty__content"
+        >
+          <span
+            class="euiButtonContent__icon"
+            color="inherit"
+            data-euiicon-type="database"
+          />
+          <span
+            class="euiButtonEmpty__text"
+          >
+            Data sources
+          </span>
+        </span>
+      </button>
+      <span
+        class="euiNotificationBadge euiNotificationBadge--subdued"
+      >
+        All
+      </span>
+      <div
+        class="euiPopover euiPopover--anchorDownLeft"
+        id="dataSourceSViewContextMenuPopover"
+      >
+        <div
+          class="euiPopover__anchor"
+        >
+          <button
+            aria-label="show data sources"
+            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+            data-test-subj="dataSourceAggregatedViewInfoButton"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="iInCircle"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      aria-label="dataSourceAggregatedViewMenuButton"
+      class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty-isDisabled euiHeaderLink"
+      data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
+      disabled=""
+      type="button"
+    >
+      <span
+        class="euiButtonContent euiButtonEmpty__content"
+      >
+        <span
+          class="euiButtonContent__icon"
+          color="inherit"
+          data-euiicon-type="database"
+        />
+        <span
+          class="euiButtonEmpty__text"
+        >
+          Data sources
+        </span>
+      </span>
+    </button>
+    <span
+      class="euiNotificationBadge euiNotificationBadge--subdued"
+    >
+      All
+    </span>
+    <div
+      class="euiPopover euiPopover--anchorDownLeft"
+      id="dataSourceSViewContextMenuPopover"
+    >
+      <div
+        class="euiPopover__anchor"
+      >
+        <button
+          aria-label="show data sources"
+          class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+          data-test-subj="dataSourceAggregatedViewInfoButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="iInCircle"
+          />
+        </button>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`DataSourceMenu should render data source multi select component 1`] = `
 Object {
   "asFragment": [Function],
   "baseElement": <body>
@@ -62,83 +223,120 @@ Object {
 `;
 
 exports[`DataSourceMenu should render data source selectable only with local cluster is hidden 1`] = `
-<Fragment>
-  <EuiHeaderLinks
-    className="osdTopNavMenu myclass"
-    data-test-subj="top-nav"
-    gutterSize="xs"
-  >
-    <DataSourceSelectable
-      disabled={false}
-      fullWidth={true}
-      hideLocalCluster={true}
-      notifications={
-        Object {
-          "add": [MockFunction],
-          "addDanger": [MockFunction],
-          "addError": [MockFunction],
-          "addInfo": [MockFunction],
-          "addSuccess": [MockFunction],
-          "addWarning": [MockFunction],
-          "get$": [MockFunction],
-          "remove": [MockFunction],
-        }
-      }
-      onSelectedDataSource={[MockFunction]}
-      savedObjectsClient={
-        Object {
-          "find": [MockFunction],
-        }
-      }
-    />
-  </EuiHeaderLinks>
-</Fragment>
+<DataSourceSelectable
+  disabled={false}
+  fullWidth={true}
+  hideLocalCluster={true}
+  notifications={
+    Object {
+      "add": [MockFunction],
+      "addDanger": [MockFunction],
+      "addError": [MockFunction],
+      "addInfo": [MockFunction],
+      "addSuccess": [MockFunction],
+      "addWarning": [MockFunction],
+      "get$": [MockFunction],
+      "remove": [MockFunction],
+    }
+  }
+  onSelectedDataSources={[MockFunction]}
+  savedObjectsClient={
+    Object {
+      "find": [MockFunction],
+    }
+  }
+/>
 `;
 
 exports[`DataSourceMenu should render data source selectable only with local cluster not hidden 1`] = `
-<Fragment>
-  <EuiHeaderLinks
-    className="osdTopNavMenu myclass"
-    data-test-subj="top-nav"
-    gutterSize="xs"
-  >
-    <DataSourceSelectable
-      disabled={false}
-      fullWidth={true}
-      hideLocalCluster={false}
-      notifications={
-        Object {
-          "add": [MockFunction],
-          "addDanger": [MockFunction],
-          "addError": [MockFunction],
-          "addInfo": [MockFunction],
-          "addSuccess": [MockFunction],
-          "addWarning": [MockFunction],
-          "get$": [MockFunction],
-          "remove": [MockFunction],
-        }
-      }
-      onSelectedDataSource={[MockFunction]}
-      savedObjectsClient={
-        Object {
-          "find": [MockFunction],
-        }
-      }
-    />
-  </EuiHeaderLinks>
-</Fragment>
+<DataSourceSelectable
+  disabled={false}
+  fullWidth={true}
+  hideLocalCluster={false}
+  notifications={
+    Object {
+      "add": [MockFunction],
+      "addDanger": [MockFunction],
+      "addError": [MockFunction],
+      "addInfo": [MockFunction],
+      "addSuccess": [MockFunction],
+      "addWarning": [MockFunction],
+      "get$": [MockFunction],
+      "remove": [MockFunction],
+    }
+  }
+  onSelectedDataSources={[MockFunction]}
+  savedObjectsClient={
+    Object {
+      "find": [MockFunction],
+    }
+  }
+/>
 `;
 
 exports[`DataSourceMenu should render data source view only 1`] = `
-<Fragment>
-  <EuiHeaderLinks
-    className="osdTopNavMenu myclass"
-    data-test-subj="top-nav"
-    gutterSize="xs"
-  >
-    <DataSourceView
-      fullWidth={true}
-    />
-  </EuiHeaderLinks>
-</Fragment>
+<DataSourceView
+  fullWidth={true}
+/>
+`;
+
+exports[`DataSourceMenu should render nothing 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/data_source_management/public/components/data_source_menu/__snapshots__/data_source_selectable.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_selectable.test.tsx.snap
index 944750bde432..56c0e85d0219 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_selectable.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_selectable.test.tsx.snap
@@ -5,16 +5,13 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
   anchorPosition="downLeft"
   button={
     <React.Fragment>
-      <EuiIcon
-        type="database"
-      />
       <EuiButtonEmpty
         aria-label="dataSourceMenuButton"
         className="euiHeaderLink"
         data-test-subj="dataSourceSelectableContextMenuHeaderLink"
         disabled={false}
-        iconSide="right"
-        iconType="arrowDown"
+        iconSide="left"
+        iconType="database"
         onClick={[Function]}
         size="s"
       >
@@ -43,6 +40,7 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
       />
       <EuiSelectable
         aria-label="Search"
+        data-test-subj="dataSourceSelectable"
         isPreFiltered={false}
         onChange={[Function]}
         options={
@@ -81,16 +79,13 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
   anchorPosition="downLeft"
   button={
     <React.Fragment>
-      <EuiIcon
-        type="database"
-      />
       <EuiButtonEmpty
         aria-label="dataSourceMenuButton"
         className="euiHeaderLink"
         data-test-subj="dataSourceSelectableContextMenuHeaderLink"
         disabled={false}
-        iconSide="right"
-        iconType="arrowDown"
+        iconSide="left"
+        iconType="database"
         onClick={[Function]}
         size="s"
       >
@@ -119,6 +114,7 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
       />
       <EuiSelectable
         aria-label="Search"
+        data-test-subj="dataSourceSelectable"
         isPreFiltered={false}
         onChange={[Function]}
         options={Array []}
@@ -142,16 +138,13 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
   anchorPosition="downLeft"
   button={
     <React.Fragment>
-      <EuiIcon
-        type="database"
-      />
       <EuiButtonEmpty
         aria-label="dataSourceMenuButton"
         className="euiHeaderLink"
         data-test-subj="dataSourceSelectableContextMenuHeaderLink"
         disabled={false}
-        iconSide="right"
-        iconType="arrowDown"
+        iconSide="left"
+        iconType="database"
         onClick={[Function]}
         size="s"
       >
@@ -180,6 +173,7 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
       />
       <EuiSelectable
         aria-label="Search"
+        data-test-subj="dataSourceSelectable"
         isPreFiltered={false}
         onChange={[Function]}
         options={Array []}
@@ -197,3 +191,232 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
   </EuiContextMenuPanel>
 </EuiPopover>
 `;
+
+exports[`DataSourceSelectable should show popover when click on button 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiPopover euiPopover--anchorDownLeft"
+        id="dataSourceSelectableContextMenuPopover"
+      >
+        <div
+          class="euiPopover__anchor"
+        >
+          <button
+            aria-label="dataSourceMenuButton"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+            data-test-subj="dataSourceSelectableContextMenuHeaderLink"
+            type="button"
+          >
+            <span
+              class="euiButtonContent euiButtonEmpty__content"
+            >
+              <span
+                class="euiButtonContent__icon"
+                color="inherit"
+                data-euiicon-type="database"
+              />
+              <span
+                class="euiButtonEmpty__text"
+              >
+                Local cluster
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        data-eui="EuiFocusTrap"
+      >
+        <div
+          aria-describedby="generated-id"
+          aria-live="off"
+          aria-modal="true"
+          class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom"
+          role="dialog"
+          style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+          tabindex="0"
+        >
+          <div
+            class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
+            style="left: 10px; top: 0px;"
+          />
+          <p
+            class="euiScreenReaderOnly"
+            id="generated-id"
+          >
+            You are in a dialog. To close this dialog, hit escape.
+          </p>
+          <div>
+            <div
+              class="euiContextMenuPanel"
+              tabindex="-1"
+            >
+              <div>
+                <div>
+                  <div
+                    class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow"
+                  >
+                    <div
+                      class="euiSpacer euiSpacer--s"
+                    />
+                    <div
+                      class="euiSelectable"
+                      data-test-subj="dataSourceSelectable"
+                    >
+                      <div
+                        class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      >
+                        <div
+                          class="euiFormControlLayout__childrenWrapper"
+                        >
+                          <input
+                            aria-activedescendant=""
+                            aria-autocomplete="list"
+                            aria-controls="generated-id_listbox"
+                            aria-expanded="true"
+                            aria-haspopup="listbox"
+                            aria-label="Search"
+                            aria-owns="generated-id_listbox"
+                            autocomplete="off"
+                            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch"
+                            placeholder="Search"
+                            role="combobox"
+                            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
+                        class="euiSelectableList"
+                      >
+                        <div
+                          style="overflow: visible; width: 0px;"
+                        />
+                        <div
+                          class="resize-triggers"
+                        >
+                          <div
+                            class="expand-trigger"
+                          >
+                            <div
+                              style="width: 1px; height: 1px;"
+                            />
+                          </div>
+                          <div
+                            class="contract-trigger"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiPopover euiPopover--anchorDownLeft"
+      id="dataSourceSelectableContextMenuPopover"
+    >
+      <div
+        class="euiPopover__anchor"
+      >
+        <button
+          aria-label="dataSourceMenuButton"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+          data-test-subj="dataSourceSelectableContextMenuHeaderLink"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="database"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              Local cluster
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx
index 1e4c43389847..52aaefe5ea75 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx
@@ -4,10 +4,12 @@
  */
 
 import { createDataSourceMenu } from './create_data_source_menu';
-import { SavedObjectsClientContract } from '../../../../../core/public';
+import { MountPoint, SavedObjectsClientContract } from '../../../../../core/public';
 import { notificationServiceMock } from '../../../../../core/public/mocks';
 import React from 'react';
-import { render } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
+import { DataSourceComponentType, DataSourceSelectableConfig } from './types';
+import { ReactWrapper } from 'enzyme';
 
 describe('create data source menu', () => {
   let client: SavedObjectsClientContract;
@@ -19,18 +21,18 @@ describe('create data source menu', () => {
     } as any;
   });
 
-  it('should render normally', () => {
+  it('should render data source selectable normally', () => {
     const props = {
-      showDataSourceSelectable: true,
-      appName: 'myapp',
-      savedObjects: client,
-      notifications,
-      fullWidth: true,
-      hideLocalCluster: true,
-      disableDataSourceSelectable: false,
-      className: 'myclass',
+      componentType: DataSourceComponentType.DataSourceSelectable,
+      componentConfig: {
+        fullWidth: true,
+        hideLocalCluster: true,
+        onSelectedDataSources: jest.fn(),
+        savedObjects: client,
+        notifications,
+      },
     };
-    const TestComponent = createDataSourceMenu();
+    const TestComponent = createDataSourceMenu<DataSourceSelectableConfig>();
     const component = render(<TestComponent {...props} />);
     expect(component).toMatchSnapshot();
     expect(client.find).toBeCalledWith({
@@ -41,3 +43,68 @@ describe('create data source menu', () => {
     expect(notifications.toasts.addWarning).toBeCalledTimes(0);
   });
 });
+
+describe('when setMenuMountPoint is provided', () => {
+  let portalTarget: HTMLElement;
+  let mountPoint: MountPoint;
+  let setMountPoint: jest.Mock<(mountPoint: MountPoint<HTMLElement>) => void>;
+  let dom: ReactWrapper;
+
+  let client: SavedObjectsClientContract;
+  const notifications = notificationServiceMock.createStartContract();
+
+  const refresh = () => {
+    new Promise(async (resolve) => {
+      if (dom) {
+        act(() => {
+          dom.update();
+        });
+      }
+      setImmediate(() => resolve(dom)); // flushes any pending promises
+    });
+  };
+
+  beforeEach(() => {
+    portalTarget = document.createElement('div');
+    document.body.append(portalTarget);
+    setMountPoint = jest.fn().mockImplementation((mp) => (mountPoint = mp));
+    client = {
+      find: jest.fn().mockResolvedValue([]),
+    } as any;
+  });
+
+  afterEach(() => {
+    if (portalTarget) {
+      portalTarget.remove();
+    }
+  });
+
+  it('should mount data source component', async () => {
+    const props = {
+      setMenuMountPoint: setMountPoint,
+      componentType: DataSourceComponentType.DataSourceSelectable,
+      componentConfig: {
+        fullWidth: true,
+        hideLocalCluster: true,
+        onSelectedDataSources: jest.fn(),
+        savedObjects: client,
+        notifications,
+      },
+    };
+    const TestComponent = createDataSourceMenu<DataSourceSelectableConfig>();
+    const component = render(<TestComponent {...props} />);
+    act(() => {
+      mountPoint(portalTarget);
+    });
+
+    await refresh();
+    expect(component).toMatchSnapshot();
+    expect(client.find).toBeCalledWith({
+      fields: ['id', 'title', 'auth.type'],
+      perPage: 10000,
+      type: 'data-source',
+    });
+    expect(notifications.toasts.addWarning).toBeCalledTimes(0);
+    expect(setMountPoint).toBeCalledTimes(1);
+  });
+});
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx
index 7d5972f8e068..2e76c2cf23c6 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx
@@ -4,10 +4,22 @@
  */
 
 import React from 'react';
-import { DataSourceMenu, DataSourceMenuProps } from './data_source_menu';
+import { EuiHeaderLinks } from '@elastic/eui';
+import { DataSourceMenu } from './data_source_menu';
+import { DataSourceMenuProps } from './types';
+import { MountPointPortal } from '../../../../opensearch_dashboards_react/public';
 
-export function createDataSourceMenu() {
-  return (props: DataSourceMenuProps) => {
+export function createDataSourceMenu<T>() {
+  return (props: DataSourceMenuProps<T>) => {
+    if (props.setMenuMountPoint) {
+      return (
+        <MountPointPortal setMountPoint={props.setMenuMountPoint}>
+          <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs">
+            <DataSourceMenu {...props} />
+          </EuiHeaderLinks>
+        </MountPointPortal>
+      );
+    }
     return <DataSourceMenu {...props} />;
   };
 }
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx
index a5ec61107b3e..4f7914148ca8 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx
@@ -9,6 +9,7 @@ import { notificationServiceMock } from '../../../../../core/public/mocks';
 import React from 'react';
 import { DataSourceMenu } from './data_source_menu';
 import { render } from '@testing-library/react';
+import { DataSourceComponentType } from './types';
 
 describe('DataSourceMenu', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
@@ -25,15 +26,14 @@ describe('DataSourceMenu', () => {
   it('should render data source selectable only with local cluster not hidden', () => {
     component = shallow(
       <DataSourceMenu
-        showDataSourceSelectable={true}
-        appName={'myapp'}
-        savedObjects={client}
-        notifications={notifications}
-        fullWidth={true}
-        hideLocalCluster={false}
-        disableDataSourceSelectable={false}
-        className={'myclass'}
-        dataSourceCallBackFunc={jest.fn()}
+        componentType={DataSourceComponentType.DataSourceSelectable}
+        componentConfig={{
+          fullWidth: true,
+          hideLocalCluster: false,
+          onSelectedDataSources: jest.fn(),
+          savedObjects: client,
+          notifications,
+        }}
       />
     );
     expect(component).toMatchSnapshot();
@@ -42,15 +42,14 @@ describe('DataSourceMenu', () => {
   it('should render data source selectable only with local cluster is hidden', () => {
     component = shallow(
       <DataSourceMenu
-        showDataSourceSelectable={true}
-        appName={'myapp'}
-        savedObjects={client}
-        notifications={notifications}
-        fullWidth={true}
-        hideLocalCluster={true}
-        disableDataSourceSelectable={false}
-        className={'myclass'}
-        dataSourceCallBackFunc={jest.fn()}
+        componentType={DataSourceComponentType.DataSourceSelectable}
+        componentConfig={{
+          fullWidth: true,
+          hideLocalCluster: true,
+          onSelectedDataSources: jest.fn(),
+          savedObjects: client,
+          notifications,
+        }}
       />
     );
     expect(component).toMatchSnapshot();
@@ -59,10 +58,8 @@ describe('DataSourceMenu', () => {
   it('should render data source view only', () => {
     component = shallow(
       <DataSourceMenu
-        showDataSourceView={true}
-        appName={'myapp'}
-        fullWidth={true}
-        className={'myclass'}
+        componentType={DataSourceComponentType.DataSourceView}
+        componentConfig={{ fullWidth: true, hideLocalCluster: true }}
       />
     );
     expect(component).toMatchSnapshot();
@@ -71,7 +68,37 @@ describe('DataSourceMenu', () => {
   it('should render data source aggregated view', () => {
     const container = render(
       <DataSourceMenu
-        showDataSourceAggregatedView={true}
+        componentType={DataSourceComponentType.DataSourceAggregatedView}
+        componentConfig={{
+          fullWidth: true,
+          hideLocalCluster: true,
+          savedObjects: client,
+          notifications,
+        }}
+      />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render nothing', () => {
+    const container = render(
+      <DataSourceMenu
+        componentType={''}
+        componentConfig={{
+          fullWidth: true,
+          hideLocalCluster: true,
+          savedObjects: client,
+          notifications,
+        }}
+      />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render data source multi select component', () => {
+    const container = render(
+      <DataSourceMenu
+        showDataSourceMultiSelectable={true}
         appName={'myapp'}
         fullWidth={true}
         className={'myclass'}
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
index 9be65882a9b8..4015e246853f 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
@@ -4,94 +4,91 @@
  */
 
 import React, { ReactElement } from 'react';
-import { EuiHeaderLinks } from '@elastic/eui';
-import classNames from 'classnames';
 
-import {
-  MountPoint,
-  NotificationsStart,
-  SavedObjectsClientContract,
-  SavedObject,
-} from '../../../../../core/public';
-import { MountPointPortal } from '../../../../opensearch_dashboards_react/public';
 import { DataSourceSelectable } from './data_source_selectable';
-import { DataSourceOption } from '../data_source_selector/data_source_selector';
 import { DataSourceAggregatedView } from '../data_source_aggregated_view';
 import { DataSourceView } from '../data_source_view';
-import { DataSourceAttributes } from '../../types';
-
-export interface DataSourceMenuProps {
-  showDataSourceSelectable?: boolean;
-  showDataSourceView?: boolean;
-  showDataSourceAggregatedView?: boolean;
-  activeDataSourceIds?: string[];
-  appName: string;
-  savedObjects?: SavedObjectsClientContract;
-  notifications?: NotificationsStart;
-  fullWidth: boolean;
-  hideLocalCluster?: boolean;
-  dataSourceCallBackFunc?: (dataSource: DataSourceOption) => void;
-  disableDataSourceSelectable?: boolean;
-  className?: string;
-  selectedOption?: DataSourceOption[];
-  setMenuMountPoint?: (menuMount: MountPoint | undefined) => void;
-  dataSourceFilter?: (dataSource: SavedObject<DataSourceAttributes>) => boolean;
-  displayAllCompatibleDataSources?: boolean;
-}
+import { DataSourceMultiSelectable } from '../data_source_multi_selectable/data_source_multi_selectable';
+import {
+  DataSourceAggregatedViewConfig,
+  DataSourceComponentType,
+  DataSourceMenuProps,
+  DataSourceMultiSelectableConfig,
+  DataSourceSelectableConfig,
+  DataSourceViewConfig,
+} from './types';
 
-export function DataSourceMenu(props: DataSourceMenuProps): ReactElement | null {
-  const {
-    savedObjects,
-    notifications,
-    dataSourceCallBackFunc,
-    showDataSourceSelectable,
-    disableDataSourceSelectable,
-    showDataSourceAggregatedView,
-    fullWidth,
-    hideLocalCluster,
-    selectedOption,
-    showDataSourceView,
-    dataSourceFilter,
-    activeDataSourceIds,
-    displayAllCompatibleDataSources,
-  } = props;
+export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement | null {
+  const { componentType, componentConfig } = props;
 
-  if (!showDataSourceSelectable && !showDataSourceView && !showDataSourceAggregatedView) {
-    return null;
+  function renderDataSourceView(config: DataSourceViewConfig): ReactElement | null {
+    const { activeOption, fullWidth } = config;
+    return (
+      <DataSourceView
+        selectedOption={activeOption && activeOption.length > 0 ? activeOption : undefined}
+        fullWidth={fullWidth}
+      />
+    );
   }
 
-  function renderDataSourceView(className: string): ReactElement | null {
-    if (!showDataSourceView) return null;
+  function renderDataSourceMultiSelectable(
+    config: DataSourceMultiSelectableConfig
+  ): ReactElement | null {
+    const {
+      fullWidth,
+      hideLocalCluster,
+      savedObjects,
+      notifications,
+      onSelectedDataSources,
+    } = config;
     return (
-      <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" className={className}>
-        <DataSourceView
-          fullWidth={fullWidth}
-          selectedOption={selectedOption && selectedOption.length > 0 ? selectedOption : undefined}
-        />
-      </EuiHeaderLinks>
+      <DataSourceMultiSelectable
+        fullWidth={fullWidth}
+        hideLocalCluster={hideLocalCluster || false}
+        savedObjectsClient={savedObjects!}
+        notifications={notifications!.toasts}
+        onSelectedDataSources={onSelectedDataSources!}
+      />
     );
   }
 
-  function renderDataSourceSelectable(className: string): ReactElement | null {
-    if (!showDataSourceSelectable) return null;
+  function renderDataSourceSelectable(config: DataSourceSelectableConfig): ReactElement | null {
+    const {
+      onSelectedDataSources,
+      disabled,
+      activeOption,
+      hideLocalCluster,
+      fullWidth,
+      savedObjects,
+      notifications,
+      dataSourceFilter,
+    } = config;
     return (
-      <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" className={className}>
-        <DataSourceSelectable
-          fullWidth={fullWidth}
-          hideLocalCluster={hideLocalCluster || false}
-          savedObjectsClient={savedObjects!}
-          notifications={notifications!.toasts}
-          onSelectedDataSource={dataSourceCallBackFunc!}
-          disabled={disableDataSourceSelectable || false}
-          selectedOption={selectedOption && selectedOption.length > 0 ? selectedOption : undefined}
-          dataSourceFilter={dataSourceFilter}
-        />
-      </EuiHeaderLinks>
+      <DataSourceSelectable
+        savedObjectsClient={savedObjects!}
+        notifications={notifications!.toasts}
+        onSelectedDataSources={onSelectedDataSources}
+        disabled={disabled || false}
+        selectedOption={activeOption && activeOption.length > 0 ? activeOption : undefined}
+        dataSourceFilter={dataSourceFilter}
+        hideLocalCluster={hideLocalCluster || false}
+        fullWidth={fullWidth}
+      />
     );
   }
 
-  function renderDataSourceAggregatedView(): ReactElement | null {
-    if (!showDataSourceAggregatedView) return null;
+  function renderDataSourceAggregatedView(
+    config: DataSourceAggregatedViewConfig
+  ): ReactElement | null {
+    const {
+      fullWidth,
+      hideLocalCluster,
+      activeDataSourceIds,
+      displayAllCompatibleDataSources,
+      savedObjects,
+      notifications,
+      dataSourceFilter,
+    } = config;
     return (
       <DataSourceAggregatedView
         fullWidth={fullWidth}
@@ -105,37 +102,20 @@ export function DataSourceMenu(props: DataSourceMenuProps): ReactElement | null
     );
   }
 
-  function renderLayout() {
-    const { setMenuMountPoint } = props;
-    const menuClassName = classNames('osdTopNavMenu', props.className);
-    if (setMenuMountPoint) {
-      return (
-        <>
-          <MountPointPortal setMountPoint={setMenuMountPoint}>
-            {renderDataSourceAggregatedView()}
-            {renderDataSourceSelectable(menuClassName)}
-            {renderDataSourceView(menuClassName)}
-          </MountPointPortal>
-        </>
-      );
-    } else {
-      return (
-        <>
-          {renderDataSourceSelectable(menuClassName)}
-          {renderDataSourceView(menuClassName)}
-        </>
-      );
+  function renderLayout(): ReactElement | null {
+    switch (componentType) {
+      case DataSourceComponentType.DataSourceAggregatedView:
+        return renderDataSourceAggregatedView(componentConfig as DataSourceAggregatedViewConfig);
+      case DataSourceComponentType.DataSourceSelectable:
+        return renderDataSourceSelectable(componentConfig as DataSourceSelectableConfig);
+      case DataSourceComponentType.DataSourceView:
+        return renderDataSourceView(componentConfig as DataSourceViewConfig);
+      case DataSourceComponentType.DataSourceMultiSelectable:
+        return renderDataSourceMultiSelectable(componentConfig as DataSourceMultiSelectableConfig);
+      default:
+        return null;
     }
   }
 
   return renderLayout();
 }
-
-DataSourceMenu.defaultProps = {
-  disableDataSourceSelectable: false,
-  showDataSourceAggregatedView: false,
-  showDataSourceSelectable: false,
-  displayAllCompatibleDataSources: false,
-  showDataSourceView: false,
-  hideLocalCluster: false,
-};
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.test.tsx b/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.test.tsx
index 9b0215d157e8..74c6d5d9e5a6 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.test.tsx
@@ -10,6 +10,7 @@ import React from 'react';
 import { DataSourceSelectable } from './data_source_selectable';
 import { AuthType } from '../../types';
 import { getDataSourcesWithFieldsResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
+import { render } from '@testing-library/react';
 
 describe('DataSourceSelectable', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
@@ -30,7 +31,7 @@ describe('DataSourceSelectable', () => {
       <DataSourceSelectable
         savedObjectsClient={client}
         notifications={toasts}
-        onSelectedDataSource={jest.fn()}
+        onSelectedDataSources={jest.fn()}
         disabled={false}
         hideLocalCluster={false}
         fullWidth={false}
@@ -50,7 +51,7 @@ describe('DataSourceSelectable', () => {
       <DataSourceSelectable
         savedObjectsClient={client}
         notifications={toasts}
-        onSelectedDataSource={jest.fn()}
+        onSelectedDataSources={jest.fn()}
         disabled={false}
         hideLocalCluster={true}
         fullWidth={false}
@@ -70,7 +71,7 @@ describe('DataSourceSelectable', () => {
       <DataSourceSelectable
         savedObjectsClient={client}
         notifications={toasts}
-        onSelectedDataSource={jest.fn()}
+        onSelectedDataSources={jest.fn()}
         disabled={false}
         hideLocalCluster={false}
         fullWidth={false}
@@ -82,4 +83,22 @@ describe('DataSourceSelectable', () => {
     expect(component).toMatchSnapshot();
     expect(toasts.addWarning).toBeCalledTimes(0);
   });
+
+  it('should show popover when click on button', async () => {
+    const onSelectedDataSource = jest.fn();
+    const container = render(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSource={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+        dataSourceFilter={(ds) => ds.attributes.auth.type !== AuthType.NoAuth}
+      />
+    );
+    const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
+    button.click();
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.tsx
index 9c71c1f0aaa1..b2c8cdbe9db0 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.tsx
@@ -16,14 +16,15 @@ import {
 } from '@elastic/eui';
 import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
 import { getDataSourcesWithFields } from '../utils';
-import { DataSourceOption, LocalCluster } from '../data_source_selector/data_source_selector';
+import { LocalCluster } from '../data_source_selector/data_source_selector';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
+import { DataSourceOption } from './types';
 
 interface DataSourceSelectableProps {
   savedObjectsClient: SavedObjectsClientContract;
   notifications: ToastsStart;
-  onSelectedDataSource: (dataSource: DataSourceOption) => void;
+  onSelectedDataSources: (dataSources: DataSourceOption[]) => void;
   disabled: boolean;
   hideLocalCluster: boolean;
   fullWidth: boolean;
@@ -119,13 +120,13 @@ export class DataSourceSelectable extends React.Component<
     this.setState({
       selectedOption: [selectedDataSource],
     });
-    this.props.onSelectedDataSource({ ...selectedDataSource });
+
+    this.props.onSelectedDataSources([selectedDataSource]);
   }
 
   render() {
     const button = (
       <>
-        <EuiIcon type="database" />
         <EuiButtonEmpty
           className="euiHeaderLink"
           onClick={this.onClick.bind(this)}
@@ -133,8 +134,8 @@ export class DataSourceSelectable extends React.Component<
           aria-label={i18n.translate('dataSourceSelectable.dataSourceOptionsButtonAriaLabel', {
             defaultMessage: 'dataSourceMenuButton',
           })}
-          iconType="arrowDown"
-          iconSide="right"
+          iconType="database"
+          iconSide="left"
           size="s"
           disabled={this.props.disabled || false}
         >
@@ -167,6 +168,7 @@ export class DataSourceSelectable extends React.Component<
               options={this.state.dataSourceOptions}
               onChange={(newOptions) => this.onChange(newOptions)}
               singleSelection={true}
+              data-test-subj={'dataSourceSelectable'}
             >
               {(list, search) => (
                 <>
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/index.ts b/src/plugins/data_source_management/public/components/data_source_menu/index.ts
index 21951dc8d29e..216cf33c6ee3 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/index.ts
+++ b/src/plugins/data_source_management/public/components/data_source_menu/index.ts
@@ -4,3 +4,11 @@
  */
 
 export { DataSourceMenu } from './data_source_menu';
+export {
+  DataSourceSelectableConfig,
+  DataSourceAggregatedViewConfig,
+  DataSourceComponentType,
+  DataSourceViewConfig,
+  DataSourceMenuProps,
+  DataSourceMultiSelectableConfig,
+} from './types';
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/types.ts b/src/plugins/data_source_management/public/components/data_source_menu/types.ts
new file mode 100644
index 000000000000..4121edc0c863
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_menu/types.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import {
+  MountPoint,
+  NotificationsStart,
+  SavedObjectsClientContract,
+  SavedObject,
+} from '../../../../../core/public';
+import { DataSourceAttributes } from '../../types';
+
+export interface DataSourceOption {
+  id: string;
+  label?: string;
+}
+
+export interface DataSourceBaseConfig {
+  fullWidth: boolean;
+  disabled?: boolean;
+}
+
+export interface DataSourceMenuProps<T = any> {
+  componentType: DataSourceComponentType;
+  componentConfig: T;
+  setMenuMountPoint?: (menuMount: MountPoint | undefined) => void;
+}
+
+export const DataSourceComponentType = {
+  DataSourceSelectable: 'DataSourceSelectable',
+  DataSourceView: 'DataSourceView',
+  DataSourceAggregatedView: 'DataSourceAggregatedView',
+  DataSourceMultiSelectable: 'DataSourceMultiSelectable',
+} as const;
+
+export type DataSourceComponentType = typeof DataSourceComponentType[keyof typeof DataSourceComponentType];
+
+export interface DataSourceViewConfig extends DataSourceBaseConfig {
+  activeOption: DataSourceOption[];
+  savedObjects?: SavedObjectsClientContract;
+  notifications?: NotificationsStart;
+}
+
+export interface DataSourceAggregatedViewConfig extends DataSourceBaseConfig {
+  savedObjects: SavedObjectsClientContract;
+  notifications: NotificationsStart;
+  activeDataSourceIds?: string[];
+  hideLocalCluster?: boolean;
+  displayAllCompatibleDataSources?: boolean;
+  dataSourceFilter?: (dataSource: SavedObject<DataSourceAttributes>) => boolean;
+}
+
+export interface DataSourceSelectableConfig extends DataSourceBaseConfig {
+  onSelectedDataSources: (dataSources: DataSourceOption[]) => void;
+  savedObjects: SavedObjectsClientContract;
+  notifications: NotificationsStart;
+  activeOption?: DataSourceOption[];
+  hideLocalCluster?: boolean;
+  dataSourceFilter?: (dataSource: SavedObject<DataSourceAttributes>) => boolean;
+}
+
+export interface DataSourceMultiSelectableConfig extends DataSourceBaseConfig {
+  onSelectedDataSources: (dataSources: DataSourceOption[]) => void;
+  savedObjects: SavedObjectsClientContract;
+  notifications: NotificationsStart;
+  hideLocalCluster?: boolean;
+}
diff --git a/src/plugins/data_source_management/public/components/data_source_multi_selectable/__snapshots__/data_source_filter_group.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_multi_selectable/__snapshots__/data_source_filter_group.test.tsx.snap
new file mode 100644
index 000000000000..665f9cfa27dc
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_multi_selectable/__snapshots__/data_source_filter_group.test.tsx.snap
@@ -0,0 +1,664 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataSourceFilterGroup should render normally 1`] = `
+<EuiPopover
+  anchorPosition="downCenter"
+  button={
+    <React.Fragment>
+      <EuiButtonEmpty
+        className="euiHeaderLink"
+        data-test-subj="dataSourceFilterGroupButton"
+        iconType="database"
+        onClick={[Function]}
+        size="s"
+      >
+        Data sources
+      </EuiButtonEmpty>
+      <EuiNotificationBadge
+        color="subdued"
+      >
+        1
+      </EuiNotificationBadge>
+    </React.Fragment>
+  }
+  closePopover={[Function]}
+  display="inlineBlock"
+  hasArrow={true}
+  id="popoverExampleMultiSelect"
+  isOpen={false}
+  ownFocus={true}
+  panelPaddingSize="none"
+>
+  <EuiPopoverTitle
+    paddingSize="s"
+  >
+    <EuiFieldSearch
+      compressed={true}
+      data-test-subj="dataSourceMultiSelectFieldSearch"
+      fullWidth={false}
+      incremental={false}
+      isClearable={true}
+      isLoading={false}
+      onSearch={[Function]}
+    />
+  </EuiPopoverTitle>
+  <div
+    className="ouiFilterSelect__items"
+    style={
+      Object {
+        "maxHeight": 400,
+        "overflow": "scroll",
+      }
+    }
+  >
+    <EuiFilterSelectItem
+      checked="on"
+      key="0"
+      onClick={[Function]}
+      showIcons={true}
+      style={
+        Object {
+          "display": undefined,
+        }
+      }
+    >
+      name1
+    </EuiFilterSelectItem>
+  </div>
+  <EuiPopoverFooter>
+    <EuiButtonGroup
+      idSelected="select_all"
+      legend="All options selection toggle group"
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "id": "select_all",
+            "label": "Select all",
+          },
+          Object {
+            "id": "deselect_all",
+            "label": "Deselect all",
+          },
+        ]
+      }
+    />
+  </EuiPopoverFooter>
+</EuiPopover>
+`;
+
+exports[`DataSourceFilterGroup should render popup when clicking on button 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiPopover euiPopover--anchorDownCenter"
+        id="popoverExampleMultiSelect"
+      >
+        <div
+          class="euiPopover__anchor"
+        >
+          <button
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+            data-test-subj="dataSourceFilterGroupButton"
+            type="button"
+          >
+            <span
+              class="euiButtonContent euiButtonEmpty__content"
+            >
+              <span
+                class="euiButtonContent__icon"
+                color="inherit"
+                data-euiicon-type="database"
+              />
+              <span
+                class="euiButtonEmpty__text"
+              >
+                Data sources
+              </span>
+            </span>
+          </button>
+          <span
+            class="euiNotificationBadge euiNotificationBadge--subdued"
+          >
+            1
+          </span>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        data-eui="EuiFocusTrap"
+      >
+        <div
+          aria-describedby="generated-id"
+          aria-live="off"
+          aria-modal="true"
+          class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom"
+          role="dialog"
+          style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+          tabindex="0"
+        >
+          <div
+            class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
+            style="left: 10px; top: 0px;"
+          />
+          <p
+            class="euiScreenReaderOnly"
+            id="generated-id"
+          >
+            You are in a dialog. To close this dialog, hit escape.
+          </p>
+          <div>
+            <div
+              class="euiPopoverTitle euiPopoverTitle--paddingSmall"
+            >
+              <div
+                class="euiFormControlLayout euiFormControlLayout--compressed"
+              >
+                <div
+                  class="euiFormControlLayout__childrenWrapper"
+                >
+                  <input
+                    class="euiFieldSearch euiFieldSearch--compressed"
+                    data-test-subj="dataSourceMultiSelectFieldSearch"
+                    type="search"
+                  />
+                  <div
+                    class="euiFormControlLayoutIcons"
+                  >
+                    <span
+                      class="euiFormControlLayoutCustomIcon"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiFormControlLayoutCustomIcon__icon"
+                        data-euiicon-type="search"
+                      />
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ouiFilterSelect__items"
+              style="max-height: 400px; overflow: scroll;"
+            >
+              <button
+                class="euiFilterSelectItem"
+                role="option"
+                type="button"
+              >
+                <span
+                  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                >
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <span
+                      color="text"
+                      data-euiicon-type="check"
+                    />
+                  </div>
+                  <span
+                    class="euiFlexItem euiFilterSelectItem__content"
+                  >
+                    name1
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiPopoverFooter"
+            >
+              <fieldset
+                class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+              >
+                <legend
+                  class="euiScreenReaderOnly"
+                >
+                  All options selection toggle group
+                </legend>
+                <div
+                  class="euiButtonGroup__buttons"
+                >
+                  <label
+                    class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                    for="generated-id"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text euiButtonGroupButton__textShift"
+                      >
+                        <input
+                          checked=""
+                          class="euiScreenReaderOnly"
+                          data-test-subj="select_all"
+                          id="generated-id"
+                          name="generated-id"
+                          type="radio"
+                          value=""
+                        />
+                        Select all
+                      </span>
+                    </span>
+                  </label>
+                  <label
+                    class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                    for="generated-id"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text euiButtonGroupButton__textShift"
+                      >
+                        <input
+                          class="euiScreenReaderOnly"
+                          data-test-subj="deselect_all"
+                          id="generated-id"
+                          name="generated-id"
+                          type="radio"
+                          value=""
+                        />
+                        Deselect all
+                      </span>
+                    </span>
+                  </label>
+                </div>
+              </fieldset>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiPopover euiPopover--anchorDownCenter"
+      id="popoverExampleMultiSelect"
+    >
+      <div
+        class="euiPopover__anchor"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+          data-test-subj="dataSourceFilterGroupButton"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="database"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              Data sources
+            </span>
+          </span>
+        </button>
+        <span
+          class="euiNotificationBadge euiNotificationBadge--subdued"
+        >
+          1
+        </span>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`DataSourceFilterGroup should toggle all when clicking on button and should search 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiPopover euiPopover--anchorDownCenter"
+        id="popoverExampleMultiSelect"
+      >
+        <div
+          class="euiPopover__anchor"
+        >
+          <button
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+            data-test-subj="dataSourceFilterGroupButton"
+            type="button"
+          >
+            <span
+              class="euiButtonContent euiButtonEmpty__content"
+            >
+              <span
+                class="euiButtonContent__icon"
+                color="inherit"
+                data-euiicon-type="database"
+              />
+              <span
+                class="euiButtonEmpty__text"
+              >
+                Data sources
+              </span>
+            </span>
+          </button>
+          <span
+            class="euiNotificationBadge euiNotificationBadge--subdued"
+          >
+            1
+          </span>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        data-eui="EuiFocusTrap"
+      >
+        <div
+          aria-describedby="generated-id"
+          aria-live="off"
+          aria-modal="true"
+          class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom"
+          role="dialog"
+          style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+          tabindex="0"
+        >
+          <div
+            class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
+            style="left: 10px; top: 0px;"
+          />
+          <p
+            class="euiScreenReaderOnly"
+            id="generated-id"
+          >
+            You are in a dialog. To close this dialog, hit escape.
+          </p>
+          <div>
+            <div
+              class="euiPopoverTitle euiPopoverTitle--paddingSmall"
+            >
+              <div
+                class="euiFormControlLayout euiFormControlLayout--compressed"
+              >
+                <div
+                  class="euiFormControlLayout__childrenWrapper"
+                >
+                  <input
+                    class="euiFieldSearch euiFieldSearch--compressed euiFieldSearch-isClearable"
+                    data-test-subj="dataSourceMultiSelectFieldSearch"
+                    type="search"
+                  />
+                  <div
+                    class="euiFormControlLayoutIcons"
+                  >
+                    <span
+                      class="euiFormControlLayoutCustomIcon"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiFormControlLayoutCustomIcon__icon"
+                        data-euiicon-type="search"
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                  >
+                    <button
+                      aria-label="Clear input"
+                      class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
+                      type="button"
+                    >
+                      <span
+                        class="euiFormControlLayoutClearButton__icon"
+                        data-euiicon-type="cross"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ouiFilterSelect__items"
+              style="max-height: 400px; overflow: scroll;"
+            >
+              <button
+                class="euiFilterSelectItem"
+                role="option"
+                type="button"
+              >
+                <span
+                  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                >
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <span
+                      color="text"
+                      data-euiicon-type="check"
+                    />
+                  </div>
+                  <span
+                    class="euiFlexItem euiFilterSelectItem__content"
+                  >
+                    name1
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiPopoverFooter"
+            >
+              <fieldset
+                class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+              >
+                <legend
+                  class="euiScreenReaderOnly"
+                >
+                  All options selection toggle group
+                </legend>
+                <div
+                  class="euiButtonGroup__buttons"
+                >
+                  <label
+                    class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                    for="generated-id"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text euiButtonGroupButton__textShift"
+                        data-text="Select all"
+                        title="Select all"
+                      >
+                        <input
+                          checked=""
+                          class="euiScreenReaderOnly"
+                          data-test-subj="select_all"
+                          id="generated-id"
+                          name="generated-id"
+                          type="radio"
+                          value=""
+                        />
+                        Select all
+                      </span>
+                    </span>
+                  </label>
+                  <label
+                    class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                    for="generated-id"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text euiButtonGroupButton__textShift"
+                        data-text="Deselect all"
+                        title="Deselect all"
+                      >
+                        <input
+                          class="euiScreenReaderOnly"
+                          data-test-subj="deselect_all"
+                          id="generated-id"
+                          name="generated-id"
+                          type="radio"
+                          value=""
+                        />
+                        Deselect all
+                      </span>
+                    </span>
+                  </label>
+                </div>
+              </fieldset>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiPopover euiPopover--anchorDownCenter"
+      id="popoverExampleMultiSelect"
+    >
+      <div
+        class="euiPopover__anchor"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+          data-test-subj="dataSourceFilterGroupButton"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="database"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              Data sources
+            </span>
+          </span>
+        </button>
+        <span
+          class="euiNotificationBadge euiNotificationBadge--subdued"
+        >
+          1
+        </span>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/plugins/data_source_management/public/components/data_source_multi_selectable/__snapshots__/data_source_multi_selectable.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_multi_selectable/__snapshots__/data_source_multi_selectable.test.tsx.snap
new file mode 100644
index 000000000000..627a1169c15b
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_multi_selectable/__snapshots__/data_source_multi_selectable.test.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataSourceMultiSelectable should render normally with local cluster hidden 1`] = `
+<DataSourceFilterGroup
+  selectedOptions={Array []}
+  setSelectedOptions={[Function]}
+/>
+`;
+
+exports[`DataSourceMultiSelectable should render normally with local cluster not hidden 1`] = `
+<DataSourceFilterGroup
+  selectedOptions={Array []}
+  setSelectedOptions={[Function]}
+/>
+`;
diff --git a/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_filter_group.test.tsx b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_filter_group.test.tsx
new file mode 100644
index 000000000000..62bf10ec8310
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_filter_group.test.tsx
@@ -0,0 +1,75 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ShallowWrapper, shallow } from 'enzyme';
+import React from 'react';
+import { DataSourceFilterGroup } from './data_source_filter_group';
+import { render, fireEvent, screen } from '@testing-library/react';
+
+describe('DataSourceFilterGroup', () => {
+  let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+
+  it('should render normally', () => {
+    const mockCallBack = jest.fn();
+    component = shallow(
+      <DataSourceFilterGroup
+        selectedOptions={[{ id: '1', label: 'name1', checked: 'on', visible: true }]}
+        setSelectedOptions={(items) => mockCallBack(items)}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render popup when clicking on button', async () => {
+    const mockCallBack = jest.fn();
+    const container = render(
+      <DataSourceFilterGroup
+        selectedOptions={[{ id: '1', label: 'name1', checked: 'on', visible: true }]}
+        setSelectedOptions={(items) => mockCallBack(items)}
+      />
+    );
+    const button = await container.findByTestId('dataSourceFilterGroupButton');
+    button.click();
+    expect(container).toMatchSnapshot();
+    expect(mockCallBack).toBeCalledTimes(0);
+
+    fireEvent.click(screen.getByText('name1'));
+    expect(mockCallBack).toBeCalledWith([
+      { checked: undefined, id: '1', label: 'name1', visible: true },
+    ]);
+  });
+
+  it('should toggle all when clicking on button and should search', async () => {
+    const mockCallBack = jest.fn();
+    const container = render(
+      <DataSourceFilterGroup
+        selectedOptions={[{ id: '1', label: 'name1', checked: 'on', visible: true }]}
+        setSelectedOptions={(items) => mockCallBack(items)}
+      />
+    );
+    const button = await container.findByTestId('dataSourceFilterGroupButton');
+    button.click();
+
+    fireEvent.click(screen.getByText('Deselect all'));
+    expect(mockCallBack).toBeCalledWith([
+      { checked: undefined, id: '1', label: 'name1', visible: true },
+    ]);
+
+    fireEvent.click(screen.getByText('Select all'));
+    expect(mockCallBack).toBeCalledWith([
+      { checked: 'on', id: '1', label: 'name1', visible: true },
+    ]);
+
+    const input = screen.getByTestId('dataSourceMultiSelectFieldSearch');
+    fireEvent.change(input, { target: { value: 'random input' } });
+    fireEvent.keyDown(input, { key: 'enter', keyCode: 13 });
+
+    expect(mockCallBack).toBeCalledWith([
+      { checked: 'on', id: '1', label: 'name1', visible: false },
+    ]);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_filter_group.tsx b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_filter_group.tsx
new file mode 100644
index 000000000000..8d0e22beadaf
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_filter_group.tsx
@@ -0,0 +1,166 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiNotificationBadge,
+  EuiFilterSelectItem,
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiFieldSearch,
+  FilterChecked,
+  EuiPopoverFooter,
+  EuiButtonGroup,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+import { DataSourceOption } from '../data_source_selector/data_source_selector';
+
+export interface SelectedDataSourceOption extends DataSourceOption {
+  label: string;
+  id: string;
+  visible: boolean;
+  checked?: FilterChecked;
+}
+
+export interface DataSourceFilterGroupProps {
+  selectedOptions: SelectedDataSourceOption[];
+  setSelectedOptions: (options: SelectedDataSourceOption[]) => void;
+}
+
+type SelectionToggleOptionIds = 'select_all' | 'deselect_all';
+
+const selectionToggleButtons = [
+  {
+    id: 'select_all',
+    label: 'Select all',
+  },
+  {
+    id: 'deselect_all',
+    label: 'Deselect all',
+  },
+];
+
+export const DataSourceFilterGroup: React.FC<DataSourceFilterGroupProps> = ({
+  selectedOptions,
+  setSelectedOptions,
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [selectionToggleSelectedId, setSelectionToggleSelectedId] = useState<
+    SelectionToggleOptionIds
+  >('select_all');
+
+  const onButtonClick = () => {
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+
+  const closePopover = () => {
+    setIsPopoverOpen(false);
+  };
+
+  function toggleItem(index: number) {
+    if (!selectedOptions[index]) {
+      return;
+    }
+
+    const newItems = [...selectedOptions];
+
+    if (newItems[index].checked === 'on') {
+      newItems[index] = {
+        ...newItems[index],
+        checked: undefined,
+      };
+    } else {
+      newItems[index] = {
+        ...newItems[index],
+        checked: 'on',
+      };
+    }
+
+    setSelectedOptions(newItems);
+  }
+
+  function onSelectionToggleChange(optionId: string) {
+    setSelectionToggleSelectedId(optionId as SelectionToggleOptionIds);
+    toggleAll(optionId === 'select_all' ? 'on' : undefined);
+  }
+
+  function toggleAll(state: 'on' | undefined) {
+    const optionsAfterToggle = selectedOptions.map((option) => ({
+      ...option,
+      checked: state,
+    }));
+
+    setSelectedOptions(optionsAfterToggle);
+  }
+
+  function search(term: string) {
+    const optionsAfterSearch = selectedOptions.map((option) => {
+      option.visible = option.label.toLowerCase().includes(term.toLowerCase());
+      return option;
+    });
+    setSelectedOptions(optionsAfterSearch);
+  }
+
+  const numActiveSelections = selectedOptions.filter((option) => option.checked === 'on').length;
+  const button = (
+    <>
+      <EuiButtonEmpty
+        className="euiHeaderLink"
+        onClick={onButtonClick}
+        iconType="database"
+        size="s"
+        data-test-subj="dataSourceFilterGroupButton"
+      >
+        {'Data sources'}
+      </EuiButtonEmpty>
+      <EuiNotificationBadge color="subdued">{numActiveSelections}</EuiNotificationBadge>
+    </>
+  );
+
+  return (
+    <EuiPopover
+      id="popoverExampleMultiSelect"
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      panelPaddingSize="none"
+    >
+      <EuiPopoverTitle paddingSize="s">
+        <EuiFieldSearch
+          compressed
+          onSearch={search}
+          isClearable={true}
+          data-test-subj="dataSourceMultiSelectFieldSearch"
+        />
+      </EuiPopoverTitle>
+      <div className="ouiFilterSelect__items" style={{ maxHeight: 400, overflow: 'scroll' }}>
+        {selectedOptions.map((item, index) => {
+          const itemStyle: any = {};
+          itemStyle.display = !item.visible ? 'none' : itemStyle.display;
+
+          return (
+            <EuiFilterSelectItem
+              checked={item.checked}
+              key={index}
+              onClick={() => toggleItem(index)}
+              showIcons={true}
+              style={itemStyle}
+            >
+              {item.label}
+            </EuiFilterSelectItem>
+          );
+        })}
+      </div>
+      <EuiPopoverFooter>
+        <EuiButtonGroup
+          legend="All options selection toggle group"
+          options={selectionToggleButtons}
+          idSelected={selectionToggleSelectedId}
+          onChange={onSelectionToggleChange}
+        />
+      </EuiPopoverFooter>
+    </EuiPopover>
+  );
+};
diff --git a/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.test.tsx b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.test.tsx
new file mode 100644
index 000000000000..afe65f554626
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.test.tsx
@@ -0,0 +1,105 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SavedObjectsClientContract } from 'opensearch-dashboards/public';
+import { notificationServiceMock } from '../../../../../core/public/mocks';
+import { getDataSourcesWithFieldsResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
+import { ShallowWrapper, shallow } from 'enzyme';
+import { DataSourceMultiSelectable } from './data_source_multi_selectable';
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+
+describe('DataSourceMultiSelectable', () => {
+  let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+
+  let client: SavedObjectsClientContract;
+  const { toasts } = notificationServiceMock.createStartContract();
+  const nextTick = () => new Promise((res) => process.nextTick(res));
+
+  beforeEach(() => {
+    client = {
+      find: jest.fn().mockResolvedValue([]),
+    } as any;
+    mockResponseForSavedObjectsCalls(client, 'find', getDataSourcesWithFieldsResponse);
+  });
+
+  it('should render normally with local cluster not hidden', () => {
+    component = shallow(
+      <DataSourceMultiSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={jest.fn()}
+        hideLocalCluster={false}
+        fullWidth={false}
+      />
+    );
+    expect(component).toMatchSnapshot();
+    expect(client.find).toBeCalledWith({
+      fields: ['id', 'title', 'auth.type'],
+      perPage: 10000,
+      type: 'data-source',
+    });
+    expect(toasts.addWarning).toBeCalledTimes(0);
+  });
+
+  it('should render normally with local cluster hidden', () => {
+    component = shallow(
+      <DataSourceMultiSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={jest.fn()}
+        hideLocalCluster={true}
+        fullWidth={false}
+      />
+    );
+    expect(component).toMatchSnapshot();
+    expect(client.find).toBeCalledWith({
+      fields: ['id', 'title', 'auth.type'],
+      perPage: 10000,
+      type: 'data-source',
+    });
+    expect(toasts.addWarning).toBeCalledTimes(0);
+  });
+
+  it('should show toasts when exception happens', async () => {
+    const errorClient = {
+      find: () => {
+        return new Promise((resolve, reject) => {
+          reject('error');
+        });
+      },
+    } as any;
+
+    component = shallow(
+      <DataSourceMultiSelectable
+        savedObjectsClient={errorClient}
+        notifications={toasts}
+        onSelectedDataSources={jest.fn()}
+        hideLocalCluster={true}
+        fullWidth={false}
+      />
+    );
+    await nextTick();
+    expect(toasts.addWarning).toBeCalledTimes(1);
+  });
+
+  it('should callback when onChange happens', async () => {
+    const callbackMock = jest.fn();
+    const container = render(
+      <DataSourceMultiSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={callbackMock}
+        hideLocalCluster={true}
+        fullWidth={false}
+      />
+    );
+    const button = await container.findByTestId('dataSourceFilterGroupButton');
+    button.click();
+    fireEvent.click(screen.getByText('Deselect all'));
+
+    expect(callbackMock).toBeCalledWith([]);
+  });
+});
diff --git a/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.tsx
new file mode 100644
index 000000000000..8405a37a43c2
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.tsx
@@ -0,0 +1,100 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
+import { i18n } from '@osd/i18n';
+import { DataSourceFilterGroup, SelectedDataSourceOption } from './data_source_filter_group';
+import { getDataSourcesWithFields } from '../utils';
+
+export interface DataSourceMultiSeletableProps {
+  savedObjectsClient: SavedObjectsClientContract;
+  notifications: ToastsStart;
+  onSelectedDataSources: (dataSources: SelectedDataSourceOption[]) => void;
+  hideLocalCluster: boolean;
+  fullWidth: boolean;
+}
+
+interface DataSourceMultiSeletableState {
+  dataSourceOptions: SelectedDataSourceOption[];
+  selectedOptions: SelectedDataSourceOption[];
+}
+
+export class DataSourceMultiSelectable extends React.Component<
+  DataSourceMultiSeletableProps,
+  DataSourceMultiSeletableState
+> {
+  private _isMounted: boolean = false;
+
+  constructor(props: DataSourceMultiSeletableProps) {
+    super(props);
+
+    this.state = {
+      dataSourceOptions: [],
+      selectedOptions: [],
+    };
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  async componentDidMount() {
+    this._isMounted = true;
+    getDataSourcesWithFields(this.props.savedObjectsClient, ['id', 'title', 'auth.type'])
+      .then((fetchedDataSources) => {
+        if (fetchedDataSources?.length) {
+          // all data sources are selected by default on initial page load
+          const selectedOptions: SelectedDataSourceOption[] = fetchedDataSources.map(
+            (dataSource) => ({
+              id: dataSource.id,
+              label: dataSource.attributes?.title || '',
+              checked: 'on',
+              visible: true,
+            })
+          );
+
+          if (!this.props.hideLocalCluster) {
+            selectedOptions.unshift({
+              id: '',
+              label: 'Local cluster',
+              checked: 'on',
+              visible: true,
+            });
+          }
+
+          if (!this._isMounted) return;
+          this.setState({
+            ...this.state,
+            selectedOptions,
+          });
+        }
+      })
+      .catch(() => {
+        this.props.notifications.addWarning(
+          i18n.translate('dataSource.fetchDataSourceError', {
+            defaultMessage: 'Unable to fetch existing data sources',
+          })
+        );
+      });
+  }
+
+  onChange(selectedOptions: SelectedDataSourceOption[]) {
+    if (!this._isMounted) return;
+    this.setState({
+      selectedOptions,
+    });
+    this.props.onSelectedDataSources(selectedOptions.filter((option) => option.checked === 'on'));
+  }
+
+  render() {
+    return (
+      <DataSourceFilterGroup
+        selectedOptions={this.state.selectedOptions}
+        setSelectedOptions={this.onChange.bind(this)}
+      />
+    );
+  }
+}
diff --git a/src/plugins/data_source_management/public/components/data_source_multi_selectable/index.ts b/src/plugins/data_source_management/public/components/data_source_multi_selectable/index.ts
new file mode 100644
index 000000000000..440cbfdc8202
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_multi_selectable/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { DataSourceMultiSelectable } from './data_source_multi_selectable';
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 dd33c28b6890..b0cb56bdac62 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
@@ -128,7 +128,7 @@ describe('DataSourceTable', () => {
 
     it('should delete confirm modal confirm button work normally', async () => {
       spyOn(utils, 'deleteMultipleDataSources').and.returnValue(Promise.resolve({}));
-
+      spyOn(utils, 'setFirstDataSourceAsDefault').and.returnValue({});
       act(() => {
         // @ts-ignore
         component.find(tableIdentifier).props().selection.onSelectionChange(getMappedDataSources);
@@ -143,10 +143,12 @@ describe('DataSourceTable', () => {
       });
       component.update();
       expect(component.find(confirmModalIdentifier).exists()).toBe(false);
+      expect(utils.setFirstDataSourceAsDefault).toHaveBeenCalled();
     });
 
     it('should delete datasources & fail', async () => {
       spyOn(utils, 'deleteMultipleDataSources').and.returnValue(Promise.reject({}));
+      spyOn(utils, 'setFirstDataSourceAsDefault').and.returnValue({});
       act(() => {
         // @ts-ignore
         component.find(tableIdentifier).props().selection.onSelectionChange(getMappedDataSources);
@@ -162,6 +164,7 @@ describe('DataSourceTable', () => {
       });
       component.update();
       expect(utils.deleteMultipleDataSources).toHaveBeenCalled();
+      expect(utils.setFirstDataSourceAsDefault).not.toHaveBeenCalled();
       // @ts-ignore
       expect(component.find(confirmModalIdentifier).exists()).toBe(false);
     });
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 b27f957fe142..9b9fd9488290 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
@@ -29,7 +29,7 @@ import {
 } from '../../../../opensearch_dashboards_react/public';
 import { DataSourceManagementContext, DataSourceTableItem, ToastMessageItem } from '../../types';
 import { CreateButton } from '../create_button';
-import { deleteMultipleDataSources, getDataSources } from '../utils';
+import { deleteMultipleDataSources, getDataSources, setFirstDataSourceAsDefault } from '../utils';
 import { LoadingMask } from '../loading_mask';
 
 /* Table config */
@@ -232,6 +232,9 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
         // Fetch data sources
         fetchDataSources();
         setConfirmDeleteVisible(false);
+        // Check if default data source is deleted or not.
+        // if yes, then set the first existing datasource as default datasource.
+        setDefaultDataSource();
       })
       .catch(() => {
         handleDisplayToastMessage({
@@ -245,6 +248,23 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
       });
   };
 
+  const setDefaultDataSource = async () => {
+    try {
+      for (const dataSource of selectedDataSources) {
+        if (uiSettings.get('defaultDataSource') === dataSource.id) {
+          await setFirstDataSourceAsDefault(savedObjects.client, uiSettings, true);
+        }
+      }
+    } catch (e) {
+      handleDisplayToastMessage({
+        id: 'dataSourcesManagement.editDataSource.setDefaultDataSourceFailMsg',
+        defaultMessage: 'Unable to find a default datasource. Please set a new default datasource.',
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
   /* Table selection handlers */
   const onSelectionChange = (selected: DataSourceTableItem[]) => {
     setSelectedDataSources(selected);
diff --git a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
index 068842ef26a6..23bb2e34feab 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import { i18n } from '@osd/i18n';
 import { EuiPopover, EuiButtonEmpty, EuiButtonIcon, EuiContextMenu } from '@elastic/eui';
-import { DataSourceOption } from '../data_source_selector/data_source_selector';
+import { DataSourceOption } from '../data_source_menu/types';
 
 interface DataSourceViewProps {
   fullWidth: boolean;
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.test.tsx b/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.test.tsx
index 833886fff7f3..d8d175a920d9 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.test.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.test.tsx
@@ -138,7 +138,8 @@ describe('Datasource Management: Edit Datasource Wizard', () => {
     });
     test('should delete datasource successfully', async () => {
       spyOn(utils, 'deleteDataSourceById').and.returnValue({});
-
+      spyOn(utils, 'setFirstDataSourceAsDefault').and.returnValue({});
+      spyOn(uiSettings, 'get').and.returnValue('test1');
       await act(async () => {
         // @ts-ignore
         await component.find(formIdentifier).first().prop('onDeleteDataSource')(
@@ -147,9 +148,12 @@ describe('Datasource Management: Edit Datasource Wizard', () => {
       });
       expect(utils.deleteDataSourceById).toHaveBeenCalled();
       expect(history.push).toBeCalledWith('');
+      expect(utils.setFirstDataSourceAsDefault).toHaveBeenCalled();
     });
     test('should fail to delete datasource', async () => {
       spyOn(utils, 'deleteDataSourceById').and.throwError('error');
+      spyOn(utils, 'setFirstDataSourceAsDefault').and.returnValue({});
+      spyOn(uiSettings, 'get').and.returnValue('test1');
       await act(async () => {
         // @ts-ignore
         await component.find(formIdentifier).first().prop('onDeleteDataSource')(
@@ -158,6 +162,7 @@ describe('Datasource Management: Edit Datasource Wizard', () => {
       });
       component.update();
       expect(utils.deleteDataSourceById).toHaveBeenCalled();
+      expect(utils.setFirstDataSourceAsDefault).not.toHaveBeenCalled();
     });
     test('should test connection', () => {
       spyOn(utils, 'testConnection');
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.tsx b/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.tsx
index 46e253b2b85b..ab1e8531c801 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.tsx
@@ -17,6 +17,7 @@ import {
   getDataSources,
   testConnection,
   updateDataSourceById,
+  setFirstDataSourceAsDefault,
 } from '../utils';
 import { getEditBreadcrumbs } from '../breadcrumbs';
 import { EditDataSourceForm } from './components/edit_form/edit_data_source_form';
@@ -109,6 +110,10 @@ export const EditDataSource: React.FunctionComponent<RouteComponentProps<{ id: s
     setIsLoading(true);
     try {
       await deleteDataSourceById(props.match.params.id, savedObjects.client);
+
+      // If deleted datasource is the default datasource, then set the first existing
+      // datasource as default datasource.
+      setDefaultDataSource();
       props.history.push('');
     } catch (e) {
       setIsLoading(false);
@@ -119,6 +124,20 @@ export const EditDataSource: React.FunctionComponent<RouteComponentProps<{ id: s
     }
   };
 
+  const setDefaultDataSource = async () => {
+    try {
+      if (uiSettings.get('defaultDataSource') === dataSourceID) {
+        await setFirstDataSourceAsDefault(savedObjects.client, uiSettings, true);
+      }
+    } catch (e) {
+      setIsLoading(false);
+      handleDisplayToastMessage({
+        id: 'dataSourcesManagement.editDataSource.setDefaultDataSourceFailMsg',
+        defaultMessage: 'Unable to find a default datasource. Please set a new default datasource.',
+      });
+    }
+  };
+
   /* Handle Test connection */
   const handleTestConnection = async (attributes: DataSourceAttributes) => {
     await testConnection(http, attributes, dataSourceID);
diff --git a/src/plugins/data_source_management/public/components/utils.test.ts b/src/plugins/data_source_management/public/components/utils.test.ts
index a4069f01907b..f2b1f709cb18 100644
--- a/src/plugins/data_source_management/public/components/utils.test.ts
+++ b/src/plugins/data_source_management/public/components/utils.test.ts
@@ -14,6 +14,8 @@ import {
   isValidUrl,
   testConnection,
   updateDataSourceById,
+  handleSetDefaultDatasource,
+  setFirstDataSourceAsDefault,
 } from './utils';
 import { coreMock } from '../../../../core/public/mocks';
 import {
@@ -24,6 +26,8 @@ import {
   mockDataSourceAttributesWithAuth,
   mockErrorResponseForSavedObjectsCalls,
   mockResponseForSavedObjectsCalls,
+  mockUiSettingsCalls,
+  getSingleDataSourceResponse,
 } from '../mocks';
 import {
   AuthType,
@@ -36,6 +40,7 @@ import { AuthenticationMethod, AuthenticationMethodRegistry } from '../auth_regi
 import { deepEqual } from 'assert';
 
 const { savedObjects } = coreMock.createStart();
+const { uiSettings } = coreMock.createStart();
 
 describe('DataSourceManagement: Utils.ts', () => {
   describe('Get data source', () => {
@@ -274,7 +279,50 @@ describe('DataSourceManagement: Utils.ts', () => {
       expect(getDefaultAuthMethod(authenticationMethodRegistry)?.name).toBe(AuthType.NoAuth);
     });
   });
-
+  describe('handle set default datasource', () => {
+    beforeEach(() => {
+      jest.clearAllMocks(); // Reset all mock calls before each test
+    });
+    test('should set default datasource when it does not have default datasource ', async () => {
+      mockUiSettingsCalls(uiSettings, 'get', null);
+      mockResponseForSavedObjectsCalls(savedObjects.client, 'find', getDataSourcesResponse);
+      await handleSetDefaultDatasource(savedObjects.client, uiSettings);
+      expect(uiSettings.set).toHaveBeenCalled();
+    });
+    test('should not set default datasource when it has default datasouce', async () => {
+      mockUiSettingsCalls(uiSettings, 'get', 'test');
+      mockResponseForSavedObjectsCalls(savedObjects.client, 'find', getDataSourcesResponse);
+      await handleSetDefaultDatasource(savedObjects.client, uiSettings);
+      expect(uiSettings.set).not.toHaveBeenCalled();
+    });
+  });
+  describe('set first aataSource as default', () => {
+    beforeEach(() => {
+      jest.clearAllMocks(); // Reset all mock calls before each test
+    });
+    test('should set defaultDataSource if more than one data source exists', async () => {
+      mockResponseForSavedObjectsCalls(savedObjects.client, 'find', getDataSourcesResponse);
+      await setFirstDataSourceAsDefault(savedObjects.client, uiSettings, true);
+      expect(uiSettings.set).toHaveBeenCalled();
+    });
+    test('should set defaultDataSource if only one data source exists', async () => {
+      mockResponseForSavedObjectsCalls(savedObjects.client, 'find', getSingleDataSourceResponse);
+      await setFirstDataSourceAsDefault(savedObjects.client, uiSettings, true);
+      expect(uiSettings.set).toHaveBeenCalled();
+    });
+    test('should not set defaultDataSource if no data source exists', async () => {
+      mockResponseForSavedObjectsCalls(savedObjects.client, 'find', { savedObjects: [] });
+      await setFirstDataSourceAsDefault(savedObjects.client, uiSettings, true);
+      expect(uiSettings.remove).toHaveBeenCalled();
+      expect(uiSettings.set).not.toHaveBeenCalled();
+    });
+    test('should not set defaultDataSource if no data source exists and no default datasouce', async () => {
+      mockResponseForSavedObjectsCalls(savedObjects.client, 'find', { savedObjects: [] });
+      await setFirstDataSourceAsDefault(savedObjects.client, uiSettings, false);
+      expect(uiSettings.remove).not.toHaveBeenCalled();
+      expect(uiSettings.set).not.toHaveBeenCalled();
+    });
+  });
   describe('Check extractRegisteredAuthTypeCredentials method', () => {
     test('Should extract credential field successfully', () => {
       const authTypeToBeTested = 'Some Auth Type';
diff --git a/src/plugins/data_source_management/public/components/utils.ts b/src/plugins/data_source_management/public/components/utils.ts
index d7d6e94265e2..b911203cd288 100644
--- a/src/plugins/data_source_management/public/components/utils.ts
+++ b/src/plugins/data_source_management/public/components/utils.ts
@@ -3,7 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { HttpStart, SavedObjectsClientContract, SavedObject } from 'src/core/public';
+import {
+  HttpStart,
+  SavedObjectsClientContract,
+  SavedObject,
+  IUiSettingsClient,
+} from 'src/core/public';
 import {
   DataSourceAttributes,
   DataSourceTableItem,
@@ -49,6 +54,30 @@ export async function getDataSourcesWithFields(
   return response?.savedObjects;
 }
 
+export async function handleSetDefaultDatasource(
+  savedObjectsClient: SavedObjectsClientContract,
+  uiSettings: IUiSettingsClient
+) {
+  if (uiSettings.get('defaultDataSource', null) === null) {
+    return await setFirstDataSourceAsDefault(savedObjectsClient, uiSettings, false);
+  }
+}
+
+export async function setFirstDataSourceAsDefault(
+  savedObjectsClient: SavedObjectsClientContract,
+  uiSettings: IUiSettingsClient,
+  exists: boolean
+) {
+  if (exists) {
+    uiSettings.remove('defaultDataSource');
+  }
+  const listOfDataSources: DataSourceTableItem[] = await getDataSources(savedObjectsClient);
+  if (Array.isArray(listOfDataSources) && listOfDataSources.length >= 1) {
+    const datasourceId = listOfDataSources[0].id;
+    return await uiSettings.set('defaultDataSource', datasourceId);
+  }
+}
+
 export async function getDataSourceById(
   id: string,
   savedObjectsClient: SavedObjectsClientContract
diff --git a/src/plugins/data_source_management/public/index.ts b/src/plugins/data_source_management/public/index.ts
index 5e2e9b647396..471792ddd726 100644
--- a/src/plugins/data_source_management/public/index.ts
+++ b/src/plugins/data_source_management/public/index.ts
@@ -10,7 +10,16 @@ import { DataSourceManagementPlugin } from './plugin';
 export function plugin() {
   return new DataSourceManagementPlugin();
 }
+
 export { DataSourceManagementPluginStart } from './types';
 export { DataSourceSelector } from './components/data_source_selector';
 export { DataSourceMenu } from './components/data_source_menu';
 export { DataSourceManagementPlugin, DataSourceManagementPluginSetup } from './plugin';
+export {
+  DataSourceSelectableConfig,
+  DataSourceComponentType,
+  DataSourceAggregatedViewConfig,
+  DataSourceViewConfig,
+  DataSourceMenuProps,
+  DataSourceMultiSelectableConfig,
+} from './components/data_source_menu';
diff --git a/src/plugins/data_source_management/public/mocks.ts b/src/plugins/data_source_management/public/mocks.ts
index 90368762698f..d04fc2a362d3 100644
--- a/src/plugins/data_source_management/public/mocks.ts
+++ b/src/plugins/data_source_management/public/mocks.ts
@@ -6,6 +6,7 @@
 import React from 'react';
 import { throwError } from 'rxjs';
 import { SavedObjectsClientContract } from 'opensearch-dashboards/public';
+import { IUiSettingsClient } from 'src/core/public';
 import { AuthType, DataSourceAttributes } from './types';
 import { coreMock } from '../../../core/public/mocks';
 import {
@@ -62,6 +63,21 @@ export const mockManagementPlugin = {
   docLinks,
 };
 
+export const getSingleDataSourceResponse = {
+  savedObjects: [
+    {
+      id: 'test',
+      type: 'data-source',
+      description: 'test datasource',
+      title: 'test',
+      get(field: string) {
+        const me: any = this || {};
+        return me[field];
+      },
+    },
+  ],
+};
+
 /* Mock data responses - JSON*/
 export const getDataSourcesResponse = {
   savedObjects: [
@@ -263,6 +279,14 @@ export const mockErrorResponseForSavedObjectsCalls = (
   );
 };
 
+export const mockUiSettingsCalls = (
+  uiSettings: IUiSettingsClient,
+  uiSettingsMethodName: 'get' | 'set',
+  response: any
+) => {
+  (uiSettings[uiSettingsMethodName] as jest.Mock).mockReturnValue(response);
+};
+
 export interface TestPluginReturn {
   setup: DataSourceManagementPluginSetup;
   doStart: () => DataSourceManagementPluginStart;
diff --git a/src/plugins/data_source_management/public/plugin.ts b/src/plugins/data_source_management/public/plugin.ts
index cf53bfc2e76e..9e6da39dc08b 100644
--- a/src/plugins/data_source_management/public/plugin.ts
+++ b/src/plugins/data_source_management/public/plugin.ts
@@ -20,7 +20,7 @@ import {
 import { noAuthCredentialAuthMethod, sigV4AuthMethod, usernamePasswordAuthMethod } from './types';
 import { DataSourceSelectorProps } from './components/data_source_selector/data_source_selector';
 import { createDataSourceMenu } from './components/data_source_menu/create_data_source_menu';
-import { DataSourceMenuProps } from './components/data_source_menu/data_source_menu';
+import { DataSourceMenuProps } from './components/data_source_menu';
 
 export interface DataSourceManagementSetupDependencies {
   management: ManagementSetup;
@@ -32,7 +32,7 @@ export interface DataSourceManagementPluginSetup {
   registerAuthenticationMethod: (authMethodValues: AuthenticationMethod) => void;
   ui: {
     DataSourceSelector: React.ComponentType<DataSourceSelectorProps>;
-    DataSourceMenu: React.ComponentType<DataSourceMenuProps>;
+    getDataSourceMenu: <T>() => React.ComponentType<DataSourceMenuProps<T>>;
   };
 }
 
@@ -103,7 +103,7 @@ export class DataSourceManagementPlugin
       registerAuthenticationMethod,
       ui: {
         DataSourceSelector: createDataSourceSelector(),
-        DataSourceMenu: createDataSourceMenu(),
+        getDataSourceMenu: <T>() => createDataSourceMenu<T>(),
       },
     };
   }
diff --git a/src/plugins/navigation/opensearch_dashboards.json b/src/plugins/navigation/opensearch_dashboards.json
index e2acd55e376a..304739dca986 100644
--- a/src/plugins/navigation/opensearch_dashboards.json
+++ b/src/plugins/navigation/opensearch_dashboards.json
@@ -4,5 +4,5 @@
   "server": false,
   "ui": true,
   "requiredPlugins": ["data"],
-  "requiredBundles": ["opensearchDashboardsReact"]
+  "requiredBundles": ["opensearchDashboardsReact", "dataSourceManagement"]
 }
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx
index 5fa97eb0a7d2..7b4269da9636 100644
--- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx
+++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx
@@ -117,6 +117,46 @@ describe('TopNavMenu', () => {
     expect(component.find('.myCoolClass').length).toBeTruthy();
   });
 
+  it('mounts the data source menu if showDataSourceMenu is true', async () => {
+    const component = shallowWithIntl(
+      <TopNavMenu
+        appName={'test'}
+        showDataSourceMenu={true}
+        dataSourceMenuConfig={{
+          componentType: 'DataSourceView',
+          componentConfig: {
+            hideLocalCluster: true,
+            fullWidth: true,
+            activeOption: [{ label: 'what', id: '1' }],
+          },
+        }}
+      />
+    );
+
+    expect(component.find('DataSourceMenu').length).toBe(1);
+  });
+
+  it('mounts the data source menu as well as top nav menu', async () => {
+    const component = shallowWithIntl(
+      <TopNavMenu
+        appName={'test'}
+        showDataSourceMenu={true}
+        config={menuItems}
+        dataSourceMenuConfig={{
+          componentType: 'DataSourceView',
+          componentConfig: {
+            hideLocalCluster: true,
+            fullWidth: true,
+            activeOption: [{ label: 'what', id: '1' }],
+          },
+        }}
+      />
+    );
+
+    expect(component.find('DataSourceMenu').length).toBe(1);
+    expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(menuItems.length);
+  });
+
   describe('when setMenuMountPoint is provided', () => {
     let portalTarget: HTMLElement;
     let mountPoint: MountPoint;
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
index 15b6c6bff057..6814d254510f 100644
--- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
+++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
@@ -41,15 +41,18 @@ import {
 } from '../../../data/public';
 import { TopNavMenuData } from './top_nav_menu_data';
 import { TopNavMenuItem } from './top_nav_menu_item';
+import { DataSourceMenu, DataSourceMenuProps } from '../../../data_source_management/public';
 
 export type TopNavMenuProps = StatefulSearchBarProps &
   Omit<SearchBarProps, 'opensearchDashboards' | 'intl' | 'timeHistory'> & {
     config?: TopNavMenuData[];
+    dataSourceMenuConfig?: DataSourceMenuProps;
     showSearchBar?: boolean;
     showQueryBar?: boolean;
     showQueryInput?: boolean;
     showDatePicker?: boolean;
     showFilterBar?: boolean;
+    showDataSourceMenu?: boolean;
     data?: DataPublicPluginStart;
     className?: string;
     /**
@@ -83,9 +86,19 @@ export type TopNavMenuProps = StatefulSearchBarProps &
  **/
 
 export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
-  const { config, showSearchBar, ...searchBarProps } = props;
+  const {
+    config,
+    showSearchBar,
+    showDataSourceMenu,
+    dataSourceMenuConfig,
+    ...searchBarProps
+  } = props;
 
-  if ((!config || config.length === 0) && (!showSearchBar || !props.data)) {
+  if (
+    (!config || config.length === 0) &&
+    (!showSearchBar || !props.data) &&
+    (!showDataSourceMenu || !dataSourceMenuConfig)
+  ) {
     return null;
   }
 
@@ -97,16 +110,18 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
   }
 
   function renderMenu(className: string): ReactElement | null {
-    if (!config || config.length === 0) return null;
+    if ((!config || config.length === 0) && (!showDataSourceMenu || !dataSourceMenuConfig))
+      return null;
     return (
       <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" className={className}>
         {renderItems()}
+        {showDataSourceMenu && <DataSourceMenu {...dataSourceMenuConfig!} />}
       </EuiHeaderLinks>
     );
   }
 
   function renderSearchBar(): ReactElement | null {
-    // Validate presense of all required fields
+    // Validate presence of all required fields
     if (!showSearchBar || !props.data) return null;
     const { SearchBar } = props.data.ui;
     return <SearchBar {...searchBarProps} />;
@@ -143,5 +158,6 @@ TopNavMenu.defaultProps = {
   showQueryInput: true,
   showDatePicker: true,
   showFilterBar: true,
+  showDataSourceMenu: false,
   screenTitle: '',
 };
diff --git a/src/plugins/workspace/common/constants.ts b/src/plugins/workspace/common/constants.ts
index d2da08acb52d..91db9f37fc40 100644
--- a/src/plugins/workspace/common/constants.ts
+++ b/src/plugins/workspace/common/constants.ts
@@ -6,7 +6,13 @@
 export const WORKSPACE_FATAL_ERROR_APP_ID = 'workspace_fatal_error';
 export const WORKSPACE_CREATE_APP_ID = 'workspace_create';
 export const WORKSPACE_LIST_APP_ID = 'workspace_list';
+export const WORKSPACE_UPDATE_APP_ID = 'workspace_update';
 export const WORKSPACE_OVERVIEW_APP_ID = 'workspace_overview';
+/**
+ * Since every workspace always have overview and update page, these features will be selected by default
+ * and can't be changed in the workspace form feature selector
+ */
+export const DEFAULT_SELECTED_FEATURES_IDS = [WORKSPACE_UPDATE_APP_ID, WORKSPACE_OVERVIEW_APP_ID];
 export const WORKSPACE_SAVED_OBJECTS_CLIENT_WRAPPER_ID = 'workspace';
 export const WORKSPACE_CONFLICT_CONTROL_SAVED_OBJECTS_CLIENT_WRAPPER_ID =
   'workspace_conflict_control';
diff --git a/src/plugins/workspace/opensearch_dashboards.json b/src/plugins/workspace/opensearch_dashboards.json
index 4443b7e99834..efb5cef5fdbe 100644
--- a/src/plugins/workspace/opensearch_dashboards.json
+++ b/src/plugins/workspace/opensearch_dashboards.json
@@ -4,7 +4,8 @@
   "server": true,
   "ui": true,
   "requiredPlugins": [
-    "savedObjects"
+    "savedObjects",
+    "opensearchDashboardsReact"
   ],
   "optionalPlugins": [],
   "requiredBundles": ["opensearchDashboardsReact"]
diff --git a/src/plugins/workspace/public/application.tsx b/src/plugins/workspace/public/application.tsx
index f70c627e02b0..98ddb6610864 100644
--- a/src/plugins/workspace/public/application.tsx
+++ b/src/plugins/workspace/public/application.tsx
@@ -8,8 +8,23 @@ import ReactDOM from 'react-dom';
 import { AppMountParameters, ScopedHistory } from '../../../core/public';
 import { OpenSearchDashboardsContextProvider } from '../../opensearch_dashboards_react/public';
 import { WorkspaceFatalError } from './components/workspace_fatal_error';
+import { WorkspaceCreatorApp } from './components/workspace_creator_app';
+import { WorkspaceListApp } from './components/workspace_list_app';
 import { Services } from './types';
 
+export const renderCreatorApp = ({ element }: AppMountParameters, services: Services) => {
+  ReactDOM.render(
+    <OpenSearchDashboardsContextProvider services={services}>
+      <WorkspaceCreatorApp />
+    </OpenSearchDashboardsContextProvider>,
+    element
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};
+
 export const renderFatalErrorApp = (params: AppMountParameters, services: Services) => {
   const { element } = params;
   const history = params.history as ScopedHistory<{ error?: string }>;
@@ -24,3 +39,15 @@ export const renderFatalErrorApp = (params: AppMountParameters, services: Servic
     ReactDOM.unmountComponentAtNode(element);
   };
 };
+export const renderListApp = ({ element }: AppMountParameters, services: Services) => {
+  ReactDOM.render(
+    <OpenSearchDashboardsContextProvider services={services}>
+      <WorkspaceListApp />
+    </OpenSearchDashboardsContextProvider>,
+    element
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};
diff --git a/src/plugins/workspace/public/components/delete_workspace_modal/__snapshots__/delete_workspace_modal.test.tsx.snap b/src/plugins/workspace/public/components/delete_workspace_modal/__snapshots__/delete_workspace_modal.test.tsx.snap
new file mode 100644
index 000000000000..efa63c2f1d08
--- /dev/null
+++ b/src/plugins/workspace/public/components/delete_workspace_modal/__snapshots__/delete_workspace_modal.test.tsx.snap
@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DeleteWorkspaceModal should render normally 1`] = `
+<body
+  class="euiBody-hasOverlayMask"
+>
+  <div />
+  <div
+    class="euiOverlayMask euiOverlayMask--aboveHeader"
+  >
+    <div
+      data-eui="EuiFocusTrap"
+    >
+      <div
+        aria-label="modal"
+        class="euiModal euiModal--maxWidth-default delete-workspace-modal"
+        tabindex="0"
+      >
+        <button
+          aria-label="Closes this modal window"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
+        <div
+          class="euiModal__flex"
+        >
+          <div
+            class="euiModalHeader"
+            data-test-subj="delete-workspace-modal-header"
+          >
+            <div
+              class="euiModalHeader__title"
+            >
+              Delete workspace
+            </div>
+          </div>
+          <div
+            class="euiModalBody"
+            data-test-subj="delete-workspace-modal-body"
+          >
+            <div
+              class="euiModalBody__overflow"
+            >
+              <div
+                style="line-height: 1.5;"
+              >
+                <p>
+                  The following workspace will be permanently deleted. This action cannot be undone.
+                </p>
+                <ul
+                  style="list-style-type: disc; list-style-position: inside;"
+                />
+                <div
+                  class="euiSpacer euiSpacer--l"
+                />
+                <div
+                  class="euiText euiText--medium"
+                >
+                  <div
+                    class="euiTextColor euiTextColor--subdued"
+                  >
+                    To confirm your action, type 
+                    <b>
+                      delete
+                    </b>
+                    .
+                  </div>
+                </div>
+                <div
+                  class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                >
+                  <div
+                    class="euiFormControlLayout__childrenWrapper"
+                  >
+                    <input
+                      class="euiFieldText euiFieldText--fullWidth"
+                      data-test-subj="delete-workspace-modal-input"
+                      placeholder="delete"
+                      type="text"
+                      value=""
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiModalFooter"
+          >
+            <button
+              class="euiButtonEmpty euiButtonEmpty--primary"
+              data-test-subj="delete-workspace-modal-cancel-button"
+              type="button"
+            >
+              <span
+                class="euiButtonContent euiButtonEmpty__content"
+              >
+                <span
+                  class="euiButtonEmpty__text"
+                >
+                  Cancel
+                </span>
+              </span>
+            </button>
+            <button
+              class="euiButton euiButton--danger euiButton--fill euiButton-isDisabled"
+              data-test-subj="delete-workspace-modal-confirm"
+              disabled=""
+              type="button"
+            >
+              <span
+                class="euiButtonContent euiButton__content"
+              >
+                <span
+                  class="euiButton__text"
+                >
+                  Delete
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx b/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx
new file mode 100644
index 000000000000..0304aa238ada
--- /dev/null
+++ b/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx
@@ -0,0 +1,228 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { DeleteWorkspaceModal, DeleteWorkspaceModalProps } from './delete_workspace_modal';
+import { coreMock } from '../../../../../core/public/mocks';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import { workspaceClientMock } from '../../../public/workspace_client.mock';
+import { OpenSearchDashboardsContextProvider } from '../../../../../plugins/opensearch_dashboards_react/public';
+
+const defaultProps: DeleteWorkspaceModalProps = {
+  onClose: jest.fn(),
+  selectedWorkspace: null,
+  onDeleteSuccess: jest.fn(),
+};
+
+const coreStartMock = coreMock.createStart();
+
+function getWrapWorkspaceDeleteModalInContext(
+  props: DeleteWorkspaceModalProps,
+  services = { ...coreStartMock }
+) {
+  return (
+    <OpenSearchDashboardsContextProvider services={services}>
+      <DeleteWorkspaceModal {...props} />
+    </OpenSearchDashboardsContextProvider>
+  );
+}
+
+describe('DeleteWorkspaceModal', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render normally', async () => {
+    const { getByText, baseElement, getByTestId } = render(
+      getWrapWorkspaceDeleteModalInContext(defaultProps)
+    );
+    await screen.findByTestId('delete-workspace-modal-header');
+    expect(getByText('Delete workspace')).toBeInTheDocument();
+    expect(getByTestId('delete-workspace-modal-header')).toBeInTheDocument();
+    expect(getByTestId('delete-workspace-modal-body')).toBeInTheDocument();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('should emit onClose when clicking cancel button', () => {
+    const onClose = jest.fn();
+    const newProps = {
+      ...defaultProps,
+      onClose,
+    };
+    const { getByTestId } = render(getWrapWorkspaceDeleteModalInContext(newProps));
+    expect(onClose).not.toHaveBeenCalled();
+    const cancelButton = getByTestId('delete-workspace-modal-cancel-button');
+    fireEvent.click(cancelButton);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should be able to delete workspace and emit onDeleteSuccess', async () => {
+    const onCloseFn = jest.fn();
+    const onDeleteSuccessFn = jest.fn();
+    const newProps = {
+      ...defaultProps,
+      selectedWorkspace: {
+        id: 'test',
+        name: 'test',
+      },
+      onClose: onCloseFn,
+      onDeleteSuccess: onDeleteSuccessFn,
+    };
+    const deleteFn = jest.fn().mockReturnValue({
+      success: true,
+    });
+    const newServices = {
+      ...coreStartMock,
+      workspaceClient: {
+        ...workspaceClientMock,
+        delete: deleteFn,
+      },
+    };
+    const { getByTestId, findByTestId } = render(
+      getWrapWorkspaceDeleteModalInContext(newProps, newServices)
+    );
+    await findByTestId('delete-workspace-modal-input');
+    const input = getByTestId('delete-workspace-modal-input');
+    fireEvent.change(input, {
+      target: { value: 'delete' },
+    });
+    const confirmButton = getByTestId('delete-workspace-modal-confirm');
+    expect(deleteFn).not.toHaveBeenCalled();
+    fireEvent.click(confirmButton);
+    expect(deleteFn).toHaveBeenCalledWith('test');
+    await waitFor(() => {
+      expect(coreStartMock.notifications.toasts.addSuccess).toHaveBeenCalled();
+      expect(onCloseFn).toHaveBeenCalled();
+      expect(onDeleteSuccessFn).toHaveBeenCalled();
+    });
+  });
+
+  it('should not call deleteWorkspace if passed selectedWorkspace is null', async () => {
+    const newProps = {
+      ...defaultProps,
+      selectedWorkspace: null,
+    };
+    const deleteFn = jest.fn().mockReturnValue({
+      success: true,
+    });
+    const newServices = {
+      ...coreStartMock,
+      workspaceClient: {
+        ...workspaceClientMock,
+        delete: deleteFn,
+      },
+    };
+    const { getByTestId, findByTestId } = render(
+      getWrapWorkspaceDeleteModalInContext(newProps, newServices)
+    );
+    await findByTestId('delete-workspace-modal-input');
+    const input = getByTestId('delete-workspace-modal-input');
+    fireEvent.change(input, {
+      target: { value: 'delete' },
+    });
+    const confirmButton = getByTestId('delete-workspace-modal-confirm');
+    fireEvent.click(confirmButton);
+    expect(deleteFn).not.toHaveBeenCalled();
+  });
+
+  it('should add danger is returned data is unsuccess', async () => {
+    const newProps = {
+      ...defaultProps,
+      selectedWorkspace: {
+        id: 'test',
+        name: 'test',
+      },
+    };
+    const deleteFn = jest.fn().mockReturnValue({
+      success: false,
+    });
+    const newServices = {
+      ...coreStartMock,
+      workspaceClient: {
+        ...workspaceClientMock,
+        delete: deleteFn,
+      },
+    };
+    const { getByTestId, findByTestId } = render(
+      getWrapWorkspaceDeleteModalInContext(newProps, newServices)
+    );
+    await findByTestId('delete-workspace-modal-input');
+    const input = getByTestId('delete-workspace-modal-input');
+    fireEvent.change(input, {
+      target: { value: 'delete' },
+    });
+    const confirmButton = getByTestId('delete-workspace-modal-confirm');
+    fireEvent.click(confirmButton);
+    expect(deleteFn).toHaveBeenCalledWith('test');
+    await waitFor(() => {
+      expect(coreStartMock.notifications.toasts.addSuccess).not.toHaveBeenCalled();
+      expect(coreStartMock.notifications.toasts.addDanger).toHaveBeenCalled();
+    });
+  });
+
+  it('confirm button should be disabled if not input delete', async () => {
+    const newProps = {
+      ...defaultProps,
+      selectedWorkspace: {
+        id: 'test',
+        name: 'test',
+      },
+    };
+    const deleteFn = jest.fn().mockReturnValue({
+      success: false,
+    });
+    const newServices = {
+      ...coreStartMock,
+      workspaceClient: {
+        ...workspaceClientMock,
+        delete: deleteFn,
+      },
+    };
+    const { getByTestId, findByTestId } = render(
+      getWrapWorkspaceDeleteModalInContext(newProps, newServices)
+    );
+    await findByTestId('delete-workspace-modal-input');
+    const input = getByTestId('delete-workspace-modal-input');
+    fireEvent.change(input, {
+      target: { value: 'delet' },
+    });
+    const confirmButton = getByTestId('delete-workspace-modal-confirm');
+    expect(confirmButton.hasAttribute('disabled'));
+  });
+
+  it('should catch error and add danger', async () => {
+    const onCloseFn = jest.fn();
+    const newProps = {
+      ...defaultProps,
+      selectedWorkspace: {
+        id: 'test',
+        name: 'test',
+      },
+      onclose: onCloseFn,
+    };
+    const deleteFn = jest.fn().mockImplementation(() => {
+      throw new Error('error');
+    });
+    const newServices = {
+      ...coreStartMock,
+      workspaceClient: {
+        ...workspaceClientMock,
+        delete: deleteFn,
+      },
+    };
+    const { getByTestId, findByTestId } = render(
+      getWrapWorkspaceDeleteModalInContext(newProps, newServices)
+    );
+    await findByTestId('delete-workspace-modal-input');
+    const input = getByTestId('delete-workspace-modal-input');
+    fireEvent.change(input, {
+      target: { value: 'delete' },
+    });
+    const confirmButton = getByTestId('delete-workspace-modal-confirm');
+    fireEvent.click(confirmButton);
+    expect(deleteFn).toHaveBeenCalledWith('test');
+    expect(coreStartMock.notifications.toasts.addDanger).toHaveBeenCalled();
+  });
+});
diff --git a/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.tsx b/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.tsx
new file mode 100644
index 000000000000..157c2ca8570a
--- /dev/null
+++ b/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.tsx
@@ -0,0 +1,114 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldText,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { WorkspaceAttribute } from 'opensearch-dashboards/public';
+import { i18n } from '@osd/i18n';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { WorkspaceClient } from '../../workspace_client';
+
+export interface DeleteWorkspaceModalProps {
+  onClose: () => void;
+  selectedWorkspace?: WorkspaceAttribute | null;
+  onDeleteSuccess?: () => void;
+}
+
+export function DeleteWorkspaceModal(props: DeleteWorkspaceModalProps) {
+  const [value, setValue] = useState('');
+  const { onClose, selectedWorkspace, onDeleteSuccess } = props;
+  const {
+    services: { notifications, workspaceClient },
+  } = useOpenSearchDashboards<{ workspaceClient: WorkspaceClient }>();
+
+  const deleteWorkspace = async () => {
+    if (selectedWorkspace?.id) {
+      let result;
+      try {
+        result = await workspaceClient.delete(selectedWorkspace?.id);
+      } catch (error) {
+        notifications?.toasts.addDanger({
+          title: i18n.translate('workspace.delete.failed', {
+            defaultMessage: 'Failed to delete workspace',
+          }),
+          text: error instanceof Error ? error.message : JSON.stringify(error),
+        });
+        return onClose();
+      }
+      if (result?.success) {
+        notifications?.toasts.addSuccess({
+          title: i18n.translate('workspace.delete.success', {
+            defaultMessage: 'Delete workspace successfully',
+          }),
+        });
+        onClose();
+        if (onDeleteSuccess) {
+          onDeleteSuccess();
+        }
+      } else {
+        notifications?.toasts.addDanger({
+          title: i18n.translate('workspace.delete.failed', {
+            defaultMessage: 'Failed to delete workspace',
+          }),
+          text: result?.error,
+        });
+      }
+    }
+  };
+
+  return (
+    <EuiModal onClose={onClose} className="delete-workspace-modal" aria-label="modal">
+      <EuiModalHeader data-test-subj="delete-workspace-modal-header">
+        <EuiModalHeaderTitle>Delete workspace</EuiModalHeaderTitle>
+      </EuiModalHeader>
+
+      <EuiModalBody data-test-subj="delete-workspace-modal-body">
+        <div style={{ lineHeight: 1.5 }}>
+          <p>The following workspace will be permanently deleted. This action cannot be undone.</p>
+          <ul style={{ listStyleType: 'disc', listStylePosition: 'inside' }}>
+            {selectedWorkspace?.name ? <li>{selectedWorkspace.name}</li> : null}
+          </ul>
+          <EuiSpacer />
+          <EuiText color="subdued">
+            To confirm your action, type <b>delete</b>.
+          </EuiText>
+          <EuiFieldText
+            placeholder="delete"
+            fullWidth
+            value={value}
+            data-test-subj="delete-workspace-modal-input"
+            onChange={(e) => setValue(e.target.value)}
+          />
+        </div>
+      </EuiModalBody>
+
+      <EuiModalFooter>
+        <EuiButtonEmpty onClick={onClose} data-test-subj="delete-workspace-modal-cancel-button">
+          Cancel
+        </EuiButtonEmpty>
+        <EuiButton
+          data-test-subj="delete-workspace-modal-confirm"
+          onClick={deleteWorkspace}
+          fill
+          color="danger"
+          disabled={value !== 'delete'}
+        >
+          Delete
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+}
diff --git a/src/plugins/workspace/public/components/delete_workspace_modal/index.ts b/src/plugins/workspace/public/components/delete_workspace_modal/index.ts
new file mode 100644
index 000000000000..3466e180c54a
--- /dev/null
+++ b/src/plugins/workspace/public/components/delete_workspace_modal/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './delete_workspace_modal';
diff --git a/src/plugins/workspace/public/components/utils/workspace.test.ts b/src/plugins/workspace/public/components/utils/workspace.test.ts
new file mode 100644
index 000000000000..926455feed34
--- /dev/null
+++ b/src/plugins/workspace/public/components/utils/workspace.test.ts
@@ -0,0 +1,84 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { switchWorkspace, navigateToWorkspaceUpdatePage } from './workspace';
+import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
+jest.mock('../../../../../core/public/utils');
+
+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('switchWorkspace', () => {
+    it('should redirect if newUrl is returned', () => {
+      Object.defineProperty(window, 'location', {
+        value: {
+          href: defaultUrl,
+        },
+        writable: true,
+      });
+      // @ts-ignore
+      formatUrlWithWorkspaceId.mockImplementation(() => 'new_url');
+      switchWorkspace({ application: coreStartMock.application, http: coreStartMock.http }, '');
+      expect(mockNavigateToUrl).toHaveBeenCalledWith('new_url');
+    });
+
+    it('should not redirect if newUrl is not returned', () => {
+      Object.defineProperty(window, 'location', {
+        value: {
+          href: defaultUrl,
+        },
+        writable: true,
+      });
+      // @ts-ignore
+      formatUrlWithWorkspaceId.mockImplementation(() => '');
+      switchWorkspace({ application: coreStartMock.application, http: coreStartMock.http }, '');
+      expect(mockNavigateToUrl).not.toBeCalled();
+    });
+  });
+
+  describe('navigateToWorkspaceUpdatePage', () => {
+    it('should redirect if newUrl is returned', () => {
+      Object.defineProperty(window, 'location', {
+        value: {
+          href: defaultUrl,
+        },
+        writable: true,
+      });
+      // @ts-ignore
+      formatUrlWithWorkspaceId.mockImplementation(() => 'new_url');
+      navigateToWorkspaceUpdatePage(
+        { application: coreStartMock.application, http: coreStartMock.http },
+        ''
+      );
+      expect(mockNavigateToUrl).toHaveBeenCalledWith('new_url');
+    });
+
+    it('should not redirect if newUrl is not returned', () => {
+      Object.defineProperty(window, 'location', {
+        value: {
+          href: defaultUrl,
+        },
+        writable: true,
+      });
+      // @ts-ignore
+      formatUrlWithWorkspaceId.mockImplementation(() => '');
+      navigateToWorkspaceUpdatePage(
+        { application: coreStartMock.application, http: coreStartMock.http },
+        ''
+      );
+      expect(mockNavigateToUrl).not.toBeCalled();
+    });
+  });
+});
diff --git a/src/plugins/workspace/public/components/utils/workspace.ts b/src/plugins/workspace/public/components/utils/workspace.ts
new file mode 100644
index 000000000000..63ed5953dbfa
--- /dev/null
+++ b/src/plugins/workspace/public/components/utils/workspace.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { WORKSPACE_OVERVIEW_APP_ID, WORKSPACE_UPDATE_APP_ID } from '../../../common/constants';
+import { CoreStart } from '../../../../../core/public';
+import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
+
+type Core = Pick<CoreStart, 'application' | 'http'>;
+
+export const switchWorkspace = ({ application, http }: Core, id: string) => {
+  const newUrl = formatUrlWithWorkspaceId(
+    application.getUrlForApp(WORKSPACE_OVERVIEW_APP_ID, {
+      absolute: true,
+    }),
+    id,
+    http.basePath
+  );
+  if (newUrl) {
+    application.navigateToUrl(newUrl);
+  }
+};
+
+export const navigateToWorkspaceUpdatePage = ({ application, http }: Core, id: string) => {
+  const newUrl = formatUrlWithWorkspaceId(
+    application.getUrlForApp(WORKSPACE_UPDATE_APP_ID, {
+      absolute: true,
+    }),
+    id,
+    http.basePath
+  );
+  if (newUrl) {
+    application.navigateToUrl(newUrl);
+  }
+};
diff --git a/src/plugins/workspace/public/components/workspace_creator/index.tsx b/src/plugins/workspace/public/components/workspace_creator/index.tsx
new file mode 100644
index 000000000000..c8cdbfab65be
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_creator/index.tsx
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { WorkspaceCreator } from './workspace_creator';
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
new file mode 100644
index 000000000000..9cc4f9b53f69
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx
@@ -0,0 +1,213 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { PublicAppInfo } from 'opensearch-dashboards/public';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { BehaviorSubject } from 'rxjs';
+import { WorkspaceCreator as WorkspaceCreatorComponent } from './workspace_creator';
+import { coreMock } from '../../../../../core/public/mocks';
+import { createOpenSearchDashboardsReactContext } from '../../../../opensearch_dashboards_react/public';
+
+const workspaceClientCreate = jest
+  .fn()
+  .mockReturnValue({ result: { id: 'successResult' }, success: true });
+
+const navigateToApp = jest.fn();
+const notificationToastsAddSuccess = jest.fn();
+const notificationToastsAddDanger = jest.fn();
+const PublicAPPInfoMap = new Map([
+  ['app1', { id: 'app1', title: 'app1' }],
+  ['app2', { id: 'app2', title: 'app2', category: { id: 'category1', label: 'category1' } }],
+  ['app3', { id: 'app3', category: { id: 'category1', label: 'category1' } }],
+  ['app4', { id: 'app4', category: { id: 'category2', label: 'category2' } }],
+  ['app5', { id: 'app5', category: { id: 'category2', label: 'category2' } }],
+]);
+
+const mockCoreStart = coreMock.createStart();
+
+const WorkspaceCreator = (props: any) => {
+  const { Provider } = createOpenSearchDashboardsReactContext({
+    ...mockCoreStart,
+    ...{
+      application: {
+        ...mockCoreStart.application,
+        navigateToApp,
+        getUrlForApp: jest.fn(() => '/app/workspace_overview'),
+        applications$: new BehaviorSubject<Map<string, PublicAppInfo>>(PublicAPPInfoMap as any),
+      },
+      notifications: {
+        ...mockCoreStart.notifications,
+        toasts: {
+          ...mockCoreStart.notifications.toasts,
+          addDanger: notificationToastsAddDanger,
+          addSuccess: notificationToastsAddSuccess,
+        },
+      },
+      workspaceClient: {
+        ...mockCoreStart.workspaces,
+        create: workspaceClientCreate,
+      },
+    },
+  });
+
+  return (
+    <Provider>
+      <WorkspaceCreatorComponent {...props} />
+    </Provider>
+  );
+};
+
+function clearMockedFunctions() {
+  workspaceClientCreate.mockClear();
+  notificationToastsAddDanger.mockClear();
+  notificationToastsAddSuccess.mockClear();
+}
+
+describe('WorkspaceCreator', () => {
+  beforeEach(() => clearMockedFunctions());
+  const { location } = window;
+  const setHrefSpy = jest.fn((href) => href);
+
+  beforeAll(() => {
+    if (window.location) {
+      // @ts-ignore
+      delete window.location;
+    }
+    window.location = {} as Location;
+    Object.defineProperty(window.location, 'href', {
+      get: () => 'http://localhost/w/workspace/app/workspace_create',
+      set: setHrefSpy,
+    });
+  });
+
+  afterAll(() => {
+    window.location = location;
+  });
+
+  it('should not create workspace when name is empty', async () => {
+    const { getByTestId } = render(<WorkspaceCreator />);
+    fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
+    expect(workspaceClientCreate).not.toHaveBeenCalled();
+  });
+
+  it('should not create workspace with invalid name', async () => {
+    const { getByTestId } = render(<WorkspaceCreator />);
+    const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+    fireEvent.input(nameInput, {
+      target: { value: '~' },
+    });
+    expect(workspaceClientCreate).not.toHaveBeenCalled();
+  });
+
+  it('should not create workspace with invalid description', async () => {
+    const { getByTestId } = render(<WorkspaceCreator />);
+    const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+    fireEvent.input(nameInput, {
+      target: { value: 'test workspace name' },
+    });
+    const descriptionInput = getByTestId('workspaceForm-workspaceDetails-descriptionInputText');
+    fireEvent.input(descriptionInput, {
+      target: { value: '~' },
+    });
+    expect(workspaceClientCreate).not.toHaveBeenCalled();
+  });
+
+  it('cancel create workspace', async () => {
+    const { findByText, getByTestId } = render(<WorkspaceCreator />);
+    fireEvent.click(getByTestId('workspaceForm-bottomBar-cancelButton'));
+    await findByText('Discard changes?');
+    fireEvent.click(getByTestId('confirmModalConfirmButton'));
+    expect(navigateToApp).toHaveBeenCalled();
+  });
+
+  it('create workspace with detailed information', async () => {
+    const { getByTestId } = render(<WorkspaceCreator />);
+    const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+    fireEvent.input(nameInput, {
+      target: { value: 'test workspace name' },
+    });
+    const descriptionInput = getByTestId('workspaceForm-workspaceDetails-descriptionInputText');
+    fireEvent.input(descriptionInput, {
+      target: { value: 'test workspace description' },
+    });
+    const colorSelector = getByTestId(
+      'euiColorPickerAnchor workspaceForm-workspaceDetails-colorPicker'
+    );
+    fireEvent.input(colorSelector, {
+      target: { value: '#000000' },
+    });
+    fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
+    expect(workspaceClientCreate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'test workspace name',
+        color: '#000000',
+        description: 'test workspace description',
+      })
+    );
+    await waitFor(() => {
+      expect(notificationToastsAddSuccess).toHaveBeenCalled();
+    });
+    expect(notificationToastsAddDanger).not.toHaveBeenCalled();
+  });
+
+  it('create workspace with customized features', async () => {
+    setHrefSpy.mockReset();
+    const { getByTestId } = render(<WorkspaceCreator />);
+    const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+    fireEvent.input(nameInput, {
+      target: { value: 'test workspace name' },
+    });
+    fireEvent.click(getByTestId('workspaceForm-workspaceFeatureVisibility-app1'));
+    fireEvent.click(getByTestId('workspaceForm-workspaceFeatureVisibility-category1'));
+    expect(setHrefSpy).not.toHaveBeenCalled();
+    fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
+    expect(workspaceClientCreate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'test workspace name',
+        features: expect.arrayContaining(['app1', 'app2', 'app3']),
+      })
+    );
+    await waitFor(() => {
+      expect(notificationToastsAddSuccess).toHaveBeenCalled();
+    });
+    expect(notificationToastsAddDanger).not.toHaveBeenCalled();
+    await waitFor(() => {
+      expect(setHrefSpy).toHaveBeenCalledWith(expect.stringMatching(/workspace_overview$/));
+    });
+  });
+
+  it('should show danger toasts after create workspace failed', async () => {
+    workspaceClientCreate.mockReturnValue({ result: { id: 'failResult' }, success: false });
+    const { getByTestId } = render(<WorkspaceCreator />);
+    const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+    fireEvent.input(nameInput, {
+      target: { value: 'test workspace name' },
+    });
+    fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
+    expect(workspaceClientCreate).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(notificationToastsAddDanger).toHaveBeenCalled();
+    });
+    expect(notificationToastsAddSuccess).not.toHaveBeenCalled();
+  });
+
+  it('should show danger toasts after call create workspace API failed', async () => {
+    workspaceClientCreate.mockImplementation(async () => {
+      throw new Error();
+    });
+    const { getByTestId } = render(<WorkspaceCreator />);
+    const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+    fireEvent.input(nameInput, {
+      target: { value: 'test workspace name' },
+    });
+    fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
+    expect(workspaceClientCreate).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(notificationToastsAddDanger).toHaveBeenCalled();
+    });
+    expect(notificationToastsAddSuccess).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx
new file mode 100644
index 000000000000..83d0f6675fe6
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx
@@ -0,0 +1,93 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback } from 'react';
+import { EuiPage, EuiPageBody, EuiPageHeader, EuiPageContent, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { WorkspaceForm, WorkspaceFormSubmitData, WorkspaceOperationType } from '../workspace_form';
+import { WORKSPACE_OVERVIEW_APP_ID } from '../../../common/constants';
+import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
+import { WorkspaceClient } from '../../workspace_client';
+
+export const WorkspaceCreator = () => {
+  const {
+    services: { application, notifications, http, workspaceClient },
+  } = useOpenSearchDashboards<{ workspaceClient: WorkspaceClient }>();
+
+  const handleWorkspaceFormSubmit = useCallback(
+    async (data: WorkspaceFormSubmitData) => {
+      let result;
+      try {
+        result = await workspaceClient.create(data);
+      } catch (error) {
+        notifications?.toasts.addDanger({
+          title: i18n.translate('workspace.create.failed', {
+            defaultMessage: 'Failed to create workspace',
+          }),
+          text: error instanceof Error ? error.message : JSON.stringify(error),
+        });
+        return;
+      }
+      if (result?.success) {
+        notifications?.toasts.addSuccess({
+          title: i18n.translate('workspace.create.success', {
+            defaultMessage: 'Create workspace successfully',
+          }),
+        });
+        if (application && http) {
+          const newWorkspaceId = result.result.id;
+          // Redirect page after one second, leave one second time to show create successful toast.
+          window.setTimeout(() => {
+            window.location.href = formatUrlWithWorkspaceId(
+              application.getUrlForApp(WORKSPACE_OVERVIEW_APP_ID, {
+                absolute: true,
+              }),
+              newWorkspaceId,
+              http.basePath
+            );
+          }, 1000);
+        }
+        return;
+      }
+      notifications?.toasts.addDanger({
+        title: i18n.translate('workspace.create.failed', {
+          defaultMessage: 'Failed to create workspace',
+        }),
+        text: result?.error,
+      });
+    },
+    [notifications?.toasts, http, application, workspaceClient]
+  );
+
+  return (
+    <EuiPage paddingSize="none">
+      <EuiPageBody>
+        <EuiPageHeader restrictWidth pageTitle="Create Workspace" />
+        <EuiSpacer />
+        <EuiPageContent
+          verticalPosition="center"
+          horizontalPosition="center"
+          paddingSize="none"
+          color="subdued"
+          hasShadow={false}
+          /**
+           * Since above EuiPageHeader has a maxWidth: 1000 style,
+           * add maxWidth: 1000 below to align with the above page header
+           **/
+          style={{ width: '100%', maxWidth: 1000 }}
+        >
+          {application && (
+            <WorkspaceForm
+              application={application}
+              onSubmit={handleWorkspaceFormSubmit}
+              operationType={WorkspaceOperationType.Create}
+            />
+          )}
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_creator_app.tsx b/src/plugins/workspace/public/components/workspace_creator_app.tsx
new file mode 100644
index 000000000000..b74359929352
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_creator_app.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+import { WorkspaceCreator } from './workspace_creator';
+
+export const WorkspaceCreatorApp = () => {
+  const {
+    services: { chrome },
+  } = useOpenSearchDashboards();
+
+  /**
+   * set breadcrumbs to chrome
+   */
+  useEffect(() => {
+    chrome?.setBreadcrumbs([
+      {
+        text: i18n.translate('workspace.workspaceCreateTitle', {
+          defaultMessage: 'Create workspace',
+        }),
+      },
+    ]);
+  }, [chrome]);
+
+  return (
+    <I18nProvider>
+      <WorkspaceCreator />
+    </I18nProvider>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_form/constants.ts b/src/plugins/workspace/public/components/workspace_form/constants.ts
new file mode 100644
index 000000000000..83ae111e9c20
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/constants.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export enum WorkspaceOperationType {
+  Create = 'create',
+  Update = 'update',
+}
+
+export enum WorkspaceFormTabs {
+  NotSelected,
+  FeatureVisibility,
+}
diff --git a/src/plugins/workspace/public/components/workspace_form/index.ts b/src/plugins/workspace/public/components/workspace_form/index.ts
new file mode 100644
index 000000000000..6531d4a1c6f7
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { WorkspaceForm } from './workspace_form';
+export { WorkspaceFormSubmitData } from './types';
+export { WorkspaceOperationType } from './constants';
diff --git a/src/plugins/workspace/public/components/workspace_form/types.ts b/src/plugins/workspace/public/components/workspace_form/types.ts
new file mode 100644
index 000000000000..8014c2321ad5
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/types.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { WorkspaceOperationType } from './constants';
+import type { ApplicationStart } from '../../../../../core/public';
+
+export interface WorkspaceFormSubmitData {
+  name: string;
+  description?: string;
+  features?: string[];
+  color?: string;
+}
+
+export interface WorkspaceFormData extends WorkspaceFormSubmitData {
+  id: string;
+  reserved?: boolean;
+}
+
+export interface WorkspaceFeature {
+  id: string;
+  name: string;
+}
+
+export interface WorkspaceFeatureGroup {
+  name: string;
+  features: WorkspaceFeature[];
+}
+
+export type WorkspaceFormErrors = { [key in keyof WorkspaceFormData]?: string };
+
+export interface WorkspaceFormProps {
+  application: ApplicationStart;
+  onSubmit?: (formData: WorkspaceFormSubmitData) => void;
+  defaultValues?: WorkspaceFormData;
+  operationType?: WorkspaceOperationType;
+}
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
new file mode 100644
index 000000000000..2bbef2d62fbd
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/use_workspace_form.test.ts
@@ -0,0 +1,76 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { renderHook, act } from '@testing-library/react-hooks';
+
+import { applicationServiceMock } from '../../../../../core/public/mocks';
+import { WorkspaceFormData } from './types';
+import { useWorkspaceForm } from './use_workspace_form';
+
+const setup = (defaultValues?: WorkspaceFormData) => {
+  const onSubmitMock = jest.fn();
+  const renderResult = renderHook(useWorkspaceForm, {
+    initialProps: {
+      application: applicationServiceMock.createStartContract(),
+      defaultValues,
+      onSubmit: onSubmitMock,
+    },
+  });
+  return {
+    renderResult,
+    onSubmitMock,
+  };
+};
+
+describe('useWorkspaceForm', () => {
+  it('should return "Invalid workspace name" and not call onSubmit when invalid name', async () => {
+    const { renderResult, onSubmitMock } = setup({
+      id: 'foo',
+      name: '~',
+    });
+    expect(renderResult.result.current.formErrors).toEqual({});
+
+    act(() => {
+      renderResult.result.current.handleFormSubmit({ preventDefault: jest.fn() });
+    });
+    expect(renderResult.result.current.formErrors).toEqual({
+      name: 'Invalid workspace name',
+    });
+    expect(onSubmitMock).not.toHaveBeenCalled();
+  });
+  it('should return "Invalid workspace description" and not call onSubmit when invalid description', async () => {
+    const { renderResult, onSubmitMock } = setup({
+      id: 'foo',
+      name: 'test-workspace-name',
+      description: '~',
+    });
+    expect(renderResult.result.current.formErrors).toEqual({});
+
+    act(() => {
+      renderResult.result.current.handleFormSubmit({ preventDefault: jest.fn() });
+    });
+    expect(renderResult.result.current.formErrors).toEqual({
+      description: 'Invalid workspace description',
+    });
+    expect(onSubmitMock).not.toHaveBeenCalled();
+  });
+  it('should call onSubmit with workspace name and features', async () => {
+    const { renderResult, onSubmitMock } = setup({
+      id: 'foo',
+      name: 'test-workspace-name',
+    });
+    expect(renderResult.result.current.formErrors).toEqual({});
+
+    act(() => {
+      renderResult.result.current.handleFormSubmit({ preventDefault: jest.fn() });
+    });
+    expect(onSubmitMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'test-workspace-name',
+        features: ['workspace_update', 'workspace_overview'],
+      })
+    );
+  });
+});
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
new file mode 100644
index 000000000000..315f3486f83e
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts
@@ -0,0 +1,148 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useCallback, useState, FormEventHandler, useRef, useMemo, useEffect } from 'react';
+import { htmlIdGenerator, EuiFieldTextProps, EuiColorPickerProps } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { useApplications } from '../../hooks';
+import { featureMatchesConfig } from '../../utils';
+
+import { WorkspaceFormTabs } from './constants';
+import { WorkspaceFormProps, WorkspaceFormErrors } from './types';
+import { appendDefaultFeatureIds, getNumberOfErrors, isValidFormTextInput } from './utils';
+
+const workspaceHtmlIdGenerator = htmlIdGenerator();
+
+export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: WorkspaceFormProps) => {
+  const applications = useApplications(application);
+  const [name, setName] = useState(defaultValues?.name);
+  const [description, setDescription] = useState(defaultValues?.description);
+  const [color, setColor] = useState(defaultValues?.color);
+
+  const [selectedTab, setSelectedTab] = useState(WorkspaceFormTabs.FeatureVisibility);
+  // The matched feature id list based on original feature config,
+  // the feature category will be expanded to list of feature ids
+  const defaultFeatures = useMemo(() => {
+    // The original feature list, may contain feature id and category wildcard like @management, etc.
+    const defaultOriginalFeatures = defaultValues?.features ?? [];
+    return applications.filter(featureMatchesConfig(defaultOriginalFeatures)).map((app) => app.id);
+  }, [defaultValues?.features, applications]);
+
+  const defaultFeaturesRef = useRef(defaultFeatures);
+  defaultFeaturesRef.current = defaultFeatures;
+
+  const [selectedFeatureIds, setSelectedFeatureIds] = useState(
+    appendDefaultFeatureIds(defaultFeatures)
+  );
+
+  const [formErrors, setFormErrors] = useState<WorkspaceFormErrors>({});
+  const numberOfErrors = useMemo(() => getNumberOfErrors(formErrors), [formErrors]);
+  const formIdRef = useRef<string>();
+  const getFormData = () => ({
+    name,
+    description,
+    features: selectedFeatureIds,
+    color,
+  });
+  const getFormDataRef = useRef(getFormData);
+  getFormDataRef.current = getFormData;
+
+  if (!formIdRef.current) {
+    formIdRef.current = workspaceHtmlIdGenerator();
+  }
+
+  const handleFormSubmit = useCallback<FormEventHandler>(
+    (e) => {
+      e.preventDefault();
+      let currentFormErrors: WorkspaceFormErrors = {};
+      const formData = getFormDataRef.current();
+      if (!formData.name) {
+        currentFormErrors = {
+          ...currentFormErrors,
+          name: i18n.translate('workspace.form.detail.name.empty', {
+            defaultMessage: "Name can't be empty.",
+          }),
+        };
+      }
+      if (formData.name && !isValidFormTextInput(formData.name)) {
+        currentFormErrors = {
+          ...currentFormErrors,
+          name: i18n.translate('workspace.form.detail.name.invalid', {
+            defaultMessage: 'Invalid workspace name',
+          }),
+        };
+      }
+      if (formData.description && !isValidFormTextInput(formData.description)) {
+        currentFormErrors = {
+          ...currentFormErrors,
+          description: i18n.translate('workspace.form.detail.description.invalid', {
+            defaultMessage: 'Invalid workspace description',
+          }),
+        };
+      }
+      setFormErrors(currentFormErrors);
+      if (getNumberOfErrors(currentFormErrors) > 0) {
+        return;
+      }
+
+      const featureConfigChanged =
+        formData.features.length !== defaultFeatures.length ||
+        formData.features.some((feat) => !defaultFeatures.includes(feat));
+
+      if (!featureConfigChanged) {
+        // If feature config not changed, set workspace feature config to the original value.
+        // The reason why we do this is when a workspace feature is configured by wildcard,
+        // such as `['@management']` or `['*']`. The form value `formData.features` will be
+        // expanded to array of individual feature id, if the feature hasn't changed, we will
+        // set the feature config back to the original value so that category wildcard won't
+        // expanded to feature ids
+        formData.features = defaultValues?.features ?? [];
+      }
+
+      onSubmit?.({ ...formData, name: formData.name! });
+    },
+    [defaultFeatures, onSubmit, defaultValues?.features]
+  );
+
+  const handleNameInputChange = useCallback<Required<EuiFieldTextProps>['onChange']>((e) => {
+    setName(e.target.value);
+  }, []);
+
+  const handleDescriptionInputChange = useCallback<Required<EuiFieldTextProps>['onChange']>((e) => {
+    setDescription(e.target.value);
+  }, []);
+
+  const handleColorChange = useCallback<Required<EuiColorPickerProps>['onChange']>((text) => {
+    setColor(text);
+  }, []);
+
+  const handleTabFeatureClick = useCallback(() => {
+    setSelectedTab(WorkspaceFormTabs.FeatureVisibility);
+  }, []);
+
+  const handleFeaturesChange = useCallback((featureIds: string[]) => {
+    setSelectedFeatureIds(featureIds);
+  }, []);
+
+  useEffect(() => {
+    // When applications changed, reset form feature selection to original value
+    setSelectedFeatureIds(appendDefaultFeatureIds(defaultFeaturesRef.current));
+  }, [applications]);
+
+  return {
+    formId: formIdRef.current,
+    formData: getFormData(),
+    formErrors,
+    selectedTab,
+    applications,
+    numberOfErrors,
+    handleFormSubmit,
+    handleColorChange,
+    handleFeaturesChange,
+    handleNameInputChange,
+    handleTabFeatureClick,
+    handleDescriptionInputChange,
+  };
+};
diff --git a/src/plugins/workspace/public/components/workspace_form/utils.test.ts b/src/plugins/workspace/public/components/workspace_form/utils.test.ts
new file mode 100644
index 000000000000..6101bd078831
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/utils.test.ts
@@ -0,0 +1,126 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { AppNavLinkStatus, DEFAULT_APP_CATEGORIES } from '../../../../../core/public';
+import { convertApplicationsToFeaturesOrGroups } from './utils';
+
+describe('convertApplicationsToFeaturesOrGroups', () => {
+  it('should filter out invisible features', () => {
+    expect(
+      convertApplicationsToFeaturesOrGroups([
+        { id: 'foo1', title: 'Foo 1', navLinkStatus: AppNavLinkStatus.hidden },
+        { id: 'foo2', title: 'Foo 2', navLinkStatus: AppNavLinkStatus.visible, chromeless: true },
+        {
+          id: 'foo3',
+          title: 'Foo 3',
+          navLinkStatus: AppNavLinkStatus.visible,
+          category: DEFAULT_APP_CATEGORIES.management,
+        },
+        {
+          id: 'workspace_overview',
+          title: 'Workspace Overview',
+          navLinkStatus: AppNavLinkStatus.visible,
+        },
+        {
+          id: 'bar',
+          title: 'Bar',
+          navLinkStatus: AppNavLinkStatus.visible,
+        },
+      ])
+    ).toEqual([
+      {
+        id: 'bar',
+        name: 'Bar',
+      },
+    ]);
+  });
+  it('should group same category applications in same feature group', () => {
+    expect(
+      convertApplicationsToFeaturesOrGroups([
+        {
+          id: 'foo',
+          title: 'Foo',
+          navLinkStatus: AppNavLinkStatus.visible,
+          category: DEFAULT_APP_CATEGORIES.opensearchDashboards,
+        },
+        {
+          id: 'bar',
+          title: 'Bar',
+          navLinkStatus: AppNavLinkStatus.visible,
+          category: DEFAULT_APP_CATEGORIES.opensearchDashboards,
+        },
+        {
+          id: 'baz',
+          title: 'Baz',
+          navLinkStatus: AppNavLinkStatus.visible,
+          category: DEFAULT_APP_CATEGORIES.observability,
+        },
+      ])
+    ).toEqual([
+      {
+        name: 'OpenSearch Dashboards',
+        features: [
+          {
+            id: 'foo',
+            name: 'Foo',
+          },
+          {
+            id: 'bar',
+            name: 'Bar',
+          },
+        ],
+      },
+      {
+        name: 'Observability',
+        features: [
+          {
+            id: 'baz',
+            name: 'Baz',
+          },
+        ],
+      },
+    ]);
+  });
+  it('should return features if application without category', () => {
+    expect(
+      convertApplicationsToFeaturesOrGroups([
+        {
+          id: 'foo',
+          title: 'Foo',
+          navLinkStatus: AppNavLinkStatus.visible,
+        },
+        {
+          id: 'baz',
+          title: 'Baz',
+          navLinkStatus: AppNavLinkStatus.visible,
+          category: DEFAULT_APP_CATEGORIES.observability,
+        },
+        {
+          id: 'bar',
+          title: 'Bar',
+          navLinkStatus: AppNavLinkStatus.visible,
+        },
+      ])
+    ).toEqual([
+      {
+        id: 'foo',
+        name: 'Foo',
+      },
+      {
+        id: 'bar',
+        name: 'Bar',
+      },
+      {
+        name: 'Observability',
+        features: [
+          {
+            id: 'baz',
+            name: 'Baz',
+          },
+        ],
+      },
+    ]);
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_form/utils.ts b/src/plugins/workspace/public/components/workspace_form/utils.ts
new file mode 100644
index 000000000000..5514e6a8fb9c
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/utils.ts
@@ -0,0 +1,100 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  AppNavLinkStatus,
+  DEFAULT_APP_CATEGORIES,
+  PublicAppInfo,
+} from '../../../../../core/public';
+import { DEFAULT_SELECTED_FEATURES_IDS } from '../../../common/constants';
+
+import { WorkspaceFeature, WorkspaceFeatureGroup, WorkspaceFormErrors } from './types';
+
+export const isWorkspaceFeatureGroup = (
+  featureOrGroup: WorkspaceFeature | WorkspaceFeatureGroup
+): featureOrGroup is WorkspaceFeatureGroup => 'features' in featureOrGroup;
+
+export const appendDefaultFeatureIds = (ids: string[]) => {
+  // concat default checked ids and unique the result
+  return Array.from(new Set(ids.concat(DEFAULT_SELECTED_FEATURES_IDS)));
+};
+
+export const isValidFormTextInput = (input?: string) => {
+  /**
+   * This regular expression is from the workspace form name and description field UI.
+   * It only accepts below characters.
+   **/
+  const regex = /^[0-9a-zA-Z()_\[\]\-\s]+$/;
+  return typeof input === 'string' && regex.test(input);
+};
+
+export const getNumberOfErrors = (formErrors: WorkspaceFormErrors) => {
+  let numberOfErrors = 0;
+  if (formErrors.name) {
+    numberOfErrors += 1;
+  }
+  if (formErrors.description) {
+    numberOfErrors += 1;
+  }
+  return numberOfErrors;
+};
+
+export const convertApplicationsToFeaturesOrGroups = (
+  applications: Array<
+    Pick<PublicAppInfo, 'id' | 'title' | 'category' | 'navLinkStatus' | 'chromeless'>
+  >
+) => {
+  const UNDEFINED = 'undefined';
+
+  // Filter out all hidden applications and management applications and default selected features
+  const visibleApplications = applications.filter(
+    ({ navLinkStatus, chromeless, category, id }) =>
+      navLinkStatus !== AppNavLinkStatus.hidden &&
+      !chromeless &&
+      !DEFAULT_SELECTED_FEATURES_IDS.includes(id) &&
+      category?.id !== DEFAULT_APP_CATEGORIES.management.id
+  );
+
+  /**
+   *
+   * Convert applications to features map, the map use category label as
+   * map key and group all same category applications in one array after
+   * transfer application to feature.
+   *
+   **/
+  const categoryLabel2Features = visibleApplications.reduce<{
+    [key: string]: WorkspaceFeature[];
+  }>((previousValue, application) => {
+    const label = application.category?.label || UNDEFINED;
+
+    return {
+      ...previousValue,
+      [label]: [...(previousValue[label] || []), { id: application.id, name: application.title }],
+    };
+  }, {});
+
+  /**
+   *
+   * Iterate all keys of categoryLabel2Features map, convert map to features or groups array.
+   * Features with category label will be converted to feature groups. Features without "undefined"
+   * category label will be converted to single features. Then append them to the result array.
+   *
+   **/
+  return Object.keys(categoryLabel2Features).reduce<
+    Array<WorkspaceFeature | WorkspaceFeatureGroup>
+  >((previousValue, categoryLabel) => {
+    const features = categoryLabel2Features[categoryLabel];
+    if (categoryLabel === UNDEFINED) {
+      return [...previousValue, ...features];
+    }
+    return [
+      ...previousValue,
+      {
+        name: categoryLabel,
+        features,
+      },
+    ];
+  }, []);
+};
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_bottom_bar.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_bottom_bar.tsx
new file mode 100644
index 000000000000..7e528d2214ee
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_bottom_bar.tsx
@@ -0,0 +1,110 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiBottomBar,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import React, { useState } from 'react';
+import { ApplicationStart } from 'opensearch-dashboards/public';
+import { WorkspaceOperationType } from '../workspace_form';
+import { WorkspaceCancelModal } from './workspace_cancel_modal';
+
+interface WorkspaceBottomBarProps {
+  formId: string;
+  operationType?: WorkspaceOperationType;
+  numberOfErrors: number;
+  application: ApplicationStart;
+  numberOfUnSavedChanges?: number;
+}
+
+export const WorkspaceBottomBar = ({
+  formId,
+  operationType,
+  numberOfErrors,
+  numberOfUnSavedChanges,
+  application,
+}: WorkspaceBottomBarProps) => {
+  const [isCancelModalVisible, setIsCancelModalVisible] = useState(false);
+  const closeCancelModal = () => setIsCancelModalVisible(false);
+  const showCancelModal = () => setIsCancelModalVisible(true);
+
+  return (
+    <div>
+      <EuiSpacer size="xl" />
+      <EuiSpacer size="xl" />
+      <EuiBottomBar>
+        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup gutterSize="s">
+              {operationType === WorkspaceOperationType.Update ? (
+                <EuiText textAlign="left">
+                  {i18n.translate('workspace.form.bottomBar.unsavedChanges', {
+                    defaultMessage: '{numberOfUnSavedChanges} Unsaved change(s)',
+                    values: {
+                      numberOfUnSavedChanges,
+                    },
+                  })}
+                </EuiText>
+              ) : (
+                <EuiText textAlign="left">
+                  {i18n.translate('workspace.form.bottomBar.errors', {
+                    defaultMessage: '{numberOfErrors} Error(s)',
+                    values: {
+                      numberOfErrors,
+                    },
+                  })}
+                </EuiText>
+              )}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup gutterSize="m">
+              <EuiButtonEmpty
+                color="ghost"
+                onClick={showCancelModal}
+                data-test-subj="workspaceForm-bottomBar-cancelButton"
+              >
+                {i18n.translate('workspace.form.bottomBar.cancel', {
+                  defaultMessage: 'Cancel',
+                })}
+              </EuiButtonEmpty>
+              <EuiSpacer />
+              {operationType === WorkspaceOperationType.Create && (
+                <EuiButton
+                  fill
+                  type="submit"
+                  color="primary"
+                  form={formId}
+                  data-test-subj="workspaceForm-bottomBar-createButton"
+                >
+                  {i18n.translate('workspace.form.bottomBar.createWorkspace', {
+                    defaultMessage: 'Create workspace',
+                  })}
+                </EuiButton>
+              )}
+              {operationType === WorkspaceOperationType.Update && (
+                <EuiButton form={formId} type="submit" fill color="primary">
+                  {i18n.translate('workspace.form.bottomBar.saveChanges', {
+                    defaultMessage: 'Save changes',
+                  })}
+                </EuiButton>
+              )}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiBottomBar>
+      {isCancelModalVisible && (
+        <WorkspaceCancelModal application={application} closeCancelModal={closeCancelModal} />
+      )}
+    </div>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_cancel_modal.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_cancel_modal.tsx
new file mode 100644
index 000000000000..11e835087cd6
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_cancel_modal.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiConfirmModal } from '@elastic/eui';
+import { ApplicationStart } from 'opensearch-dashboards/public';
+import { WORKSPACE_LIST_APP_ID } from '../../../common/constants';
+
+interface WorkspaceCancelModalProps {
+  application: ApplicationStart;
+  closeCancelModal: () => void;
+}
+
+export const WorkspaceCancelModal = ({
+  application,
+  closeCancelModal,
+}: WorkspaceCancelModalProps) => {
+  return (
+    <EuiConfirmModal
+      data-test-subj="workspaceForm-cancelModal"
+      title={i18n.translate('workspace.form.cancelModal.title', {
+        defaultMessage: 'Discard changes?',
+      })}
+      onCancel={closeCancelModal}
+      onConfirm={() => application?.navigateToApp(WORKSPACE_LIST_APP_ID)}
+      cancelButtonText={i18n.translate('workspace.form.cancelButtonText', {
+        defaultMessage: 'Continue editing',
+      })}
+      confirmButtonText={i18n.translate('workspace.form.confirmButtonText', {
+        defaultMessage: 'Discard changes',
+      })}
+      buttonColor="danger"
+      defaultFocusedButton="confirm"
+    >
+      {i18n.translate('workspace.form.cancelModal.body', {
+        defaultMessage: 'This will discard all changes. Are you sure?',
+      })}
+    </EuiConfirmModal>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_feature_selector.test.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_feature_selector.test.tsx
new file mode 100644
index 000000000000..0875b0d1ff10
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_feature_selector.test.tsx
@@ -0,0 +1,92 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import {
+  WorkspaceFeatureSelector,
+  WorkspaceFeatureSelectorProps,
+} from './workspace_feature_selector';
+import { AppNavLinkStatus } from '../../../../../core/public';
+
+const setup = (options?: Partial<WorkspaceFeatureSelectorProps>) => {
+  const onChangeMock = jest.fn();
+  const applications = [
+    {
+      id: 'app-1',
+      title: 'App 1',
+      category: { id: 'category-1', label: 'Category 1' },
+      navLinkStatus: AppNavLinkStatus.visible,
+    },
+    {
+      id: 'app-2',
+      title: 'App 2',
+      category: { id: 'category-1', label: 'Category 1' },
+      navLinkStatus: AppNavLinkStatus.visible,
+    },
+    {
+      id: 'app-3',
+      title: 'App 3',
+      category: { id: 'category-2', label: 'Category 2' },
+      navLinkStatus: AppNavLinkStatus.visible,
+    },
+    {
+      id: 'app-4',
+      title: 'App 4',
+      navLinkStatus: AppNavLinkStatus.visible,
+    },
+  ];
+  const renderResult = render(
+    <WorkspaceFeatureSelector
+      applications={applications}
+      selectedFeatures={[]}
+      onChange={onChangeMock}
+      {...options}
+    />
+  );
+  return {
+    renderResult,
+    onChangeMock,
+  };
+};
+
+describe('WorkspaceFeatureSelector', () => {
+  it('should call onChange with clicked feature', () => {
+    const { renderResult, onChangeMock } = setup();
+
+    expect(onChangeMock).not.toHaveBeenCalled();
+    fireEvent.click(renderResult.getByText('App 1'));
+    expect(onChangeMock).toHaveBeenCalledWith(['app-1']);
+  });
+  it('should call onChange with empty array after selected feature clicked', () => {
+    const { renderResult, onChangeMock } = setup({
+      selectedFeatures: ['app-2'],
+    });
+
+    expect(onChangeMock).not.toHaveBeenCalled();
+    fireEvent.click(renderResult.getByText('App 2'));
+    expect(onChangeMock).toHaveBeenCalledWith([]);
+  });
+  it('should call onChange with features under clicked group', () => {
+    const { renderResult, onChangeMock } = setup();
+
+    expect(onChangeMock).not.toHaveBeenCalled();
+    fireEvent.click(
+      renderResult.getByTestId('workspaceForm-workspaceFeatureVisibility-Category 1')
+    );
+    expect(onChangeMock).toHaveBeenCalledWith(['app-1', 'app-2']);
+  });
+  it('should call onChange without features under clicked group when group already selected', () => {
+    const { renderResult, onChangeMock } = setup({
+      selectedFeatures: ['app-1', 'app-2', 'app-3'],
+    });
+
+    expect(onChangeMock).not.toHaveBeenCalled();
+    fireEvent.click(
+      renderResult.getByTestId('workspaceForm-workspaceFeatureVisibility-Category 1')
+    );
+    expect(onChangeMock).toHaveBeenCalledWith(['app-3']);
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_feature_selector.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_feature_selector.tsx
new file mode 100644
index 000000000000..da9deb174f52
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_feature_selector.tsx
@@ -0,0 +1,143 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import {
+  EuiText,
+  EuiFlexItem,
+  EuiCheckbox,
+  EuiCheckboxGroup,
+  EuiFlexGroup,
+  EuiCheckboxGroupProps,
+  EuiCheckboxProps,
+} from '@elastic/eui';
+
+import { PublicAppInfo } from '../../../../../core/public';
+
+import { isWorkspaceFeatureGroup, convertApplicationsToFeaturesOrGroups } from './utils';
+
+export interface WorkspaceFeatureSelectorProps {
+  applications: Array<
+    Pick<PublicAppInfo, 'id' | 'title' | 'category' | 'chromeless' | 'navLinkStatus'>
+  >;
+  selectedFeatures: string[];
+  onChange: (newFeatures: string[]) => void;
+}
+
+export const WorkspaceFeatureSelector = ({
+  applications,
+  selectedFeatures,
+  onChange,
+}: WorkspaceFeatureSelectorProps) => {
+  const featuresOrGroups = useMemo(() => convertApplicationsToFeaturesOrGroups(applications), [
+    applications,
+  ]);
+
+  const handleFeatureChange = useCallback<EuiCheckboxGroupProps['onChange']>(
+    (featureId) => {
+      if (!selectedFeatures.includes(featureId)) {
+        onChange([...selectedFeatures, featureId]);
+        return;
+      }
+      onChange(selectedFeatures.filter((selectedId) => selectedId !== featureId));
+    },
+    [selectedFeatures, onChange]
+  );
+
+  const handleFeatureCheckboxChange = useCallback<EuiCheckboxProps['onChange']>(
+    (e) => {
+      handleFeatureChange(e.target.id);
+    },
+    [handleFeatureChange]
+  );
+
+  const handleFeatureGroupChange = useCallback<EuiCheckboxProps['onChange']>(
+    (e) => {
+      const featureOrGroup = featuresOrGroups.find(
+        (item) => isWorkspaceFeatureGroup(item) && item.name === e.target.id
+      );
+      if (!featureOrGroup || !isWorkspaceFeatureGroup(featureOrGroup)) {
+        return;
+      }
+      const groupFeatureIds = featureOrGroup.features.map((feature) => feature.id);
+      const notExistsIds = groupFeatureIds.filter((id) => !selectedFeatures.includes(id));
+      // Check all not selected features if not been selected in current group.
+      if (notExistsIds.length > 0) {
+        onChange([...selectedFeatures, ...notExistsIds]);
+        return;
+      }
+      // Need to un-check these features, if all features in group has been selected
+      onChange(selectedFeatures.filter((featureId) => !groupFeatureIds.includes(featureId)));
+    },
+    [featuresOrGroups, selectedFeatures, onChange]
+  );
+
+  return (
+    <>
+      {featuresOrGroups.map((featureOrGroup) => {
+        const features = isWorkspaceFeatureGroup(featureOrGroup) ? featureOrGroup.features : [];
+        const selectedIds = selectedFeatures.filter((id) =>
+          (isWorkspaceFeatureGroup(featureOrGroup)
+            ? featureOrGroup.features
+            : [featureOrGroup]
+          ).find((item) => item.id === id)
+        );
+        const featureOrGroupId = isWorkspaceFeatureGroup(featureOrGroup)
+          ? featureOrGroup.name
+          : featureOrGroup.id;
+
+        return (
+          <EuiFlexGroup key={featureOrGroup.name}>
+            <EuiFlexItem>
+              <div>
+                <EuiText>
+                  <strong>{featureOrGroup.name}</strong>
+                </EuiText>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiCheckbox
+                id={featureOrGroupId}
+                onChange={
+                  isWorkspaceFeatureGroup(featureOrGroup)
+                    ? handleFeatureGroupChange
+                    : handleFeatureCheckboxChange
+                }
+                label={`${featureOrGroup.name}${
+                  features.length > 0 ? ` (${selectedIds.length}/${features.length})` : ''
+                }`}
+                checked={selectedIds.length > 0}
+                indeterminate={
+                  isWorkspaceFeatureGroup(featureOrGroup) &&
+                  selectedIds.length > 0 &&
+                  selectedIds.length < features.length
+                }
+                data-test-subj={`workspaceForm-workspaceFeatureVisibility-${featureOrGroupId}`}
+              />
+              {isWorkspaceFeatureGroup(featureOrGroup) && (
+                <EuiCheckboxGroup
+                  options={featureOrGroup.features.map((item) => ({
+                    id: item.id,
+                    label: item.name,
+                  }))}
+                  idToSelectedMap={selectedIds.reduce(
+                    (previousValue, currentValue) => ({
+                      ...previousValue,
+                      [currentValue]: true,
+                    }),
+                    {}
+                  )}
+                  onChange={handleFeatureChange}
+                  style={{ marginLeft: 40 }}
+                  data-test-subj={`workspaceForm-workspaceFeatureVisibility-featureWithCategory-${featureOrGroupId}`}
+                />
+              )}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        );
+      })}
+    </>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx
new file mode 100644
index 000000000000..69793c75395d
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx
@@ -0,0 +1,151 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiPanel,
+  EuiSpacer,
+  EuiTitle,
+  EuiForm,
+  EuiFormRow,
+  EuiFieldText,
+  EuiText,
+  EuiColorPicker,
+  EuiHorizontalRule,
+  EuiTab,
+  EuiTabs,
+} from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+import { WorkspaceBottomBar } from './workspace_bottom_bar';
+import { WorkspaceFormProps } from './types';
+import { WorkspaceFormTabs } from './constants';
+import { useWorkspaceForm } from './use_workspace_form';
+import { WorkspaceFeatureSelector } from './workspace_feature_selector';
+
+export const WorkspaceForm = (props: WorkspaceFormProps) => {
+  const { application, defaultValues, operationType } = props;
+  const {
+    formId,
+    formData,
+    formErrors,
+    selectedTab,
+    applications,
+    numberOfErrors,
+    handleFormSubmit,
+    handleColorChange,
+    handleFeaturesChange,
+    handleNameInputChange,
+    handleTabFeatureClick,
+    handleDescriptionInputChange,
+  } = useWorkspaceForm(props);
+  const workspaceDetailsTitle = i18n.translate('workspace.form.workspaceDetails.title', {
+    defaultMessage: 'Workspace Details',
+  });
+  const featureVisibilityTitle = i18n.translate('workspace.form.featureVisibility.title', {
+    defaultMessage: 'Feature Visibility',
+  });
+
+  return (
+    <EuiForm id={formId} onSubmit={handleFormSubmit} component="form">
+      <EuiPanel>
+        <EuiTitle size="s">
+          <h2>{workspaceDetailsTitle}</h2>
+        </EuiTitle>
+        <EuiHorizontalRule margin="xs" />
+        <EuiSpacer size="s" />
+        <EuiFormRow
+          label={i18n.translate('workspace.form.workspaceDetails.name.label', {
+            defaultMessage: 'Name',
+          })}
+          helpText={i18n.translate('workspace.form.workspaceDetails.name.helpText', {
+            defaultMessage:
+              'Valid characters are a-z, A-Z, 0-9, (), [], _ (underscore), - (hyphen) and (space).',
+          })}
+          isInvalid={!!formErrors.name}
+          error={formErrors.name}
+        >
+          <EuiFieldText
+            value={formData.name}
+            onChange={handleNameInputChange}
+            readOnly={!!defaultValues?.reserved}
+            data-test-subj="workspaceForm-workspaceDetails-nameInputText"
+          />
+        </EuiFormRow>
+        <EuiFormRow
+          label={
+            <>
+              Description - <i>optional</i>
+            </>
+          }
+          helpText={i18n.translate('workspace.form.workspaceDetails.description.helpText', {
+            defaultMessage:
+              'Valid characters are a-z, A-Z, 0-9, (), [], _ (underscore), - (hyphen) and (space).',
+          })}
+          isInvalid={!!formErrors.description}
+          error={formErrors.description}
+        >
+          <EuiFieldText
+            value={formData.description}
+            onChange={handleDescriptionInputChange}
+            data-test-subj="workspaceForm-workspaceDetails-descriptionInputText"
+          />
+        </EuiFormRow>
+        <EuiFormRow
+          label={i18n.translate('workspace.form.workspaceDetails.color.label', {
+            defaultMessage: 'Color',
+          })}
+          isInvalid={!!formErrors.color}
+          error={formErrors.color}
+        >
+          <div>
+            <EuiText size="xs" color="subdued">
+              {i18n.translate('workspace.form.workspaceDetails.color.helpText', {
+                defaultMessage: 'Accent color for your workspace',
+              })}
+            </EuiText>
+            <EuiSpacer size={'s'} />
+            <EuiColorPicker
+              color={formData.color}
+              onChange={handleColorChange}
+              data-test-subj="workspaceForm-workspaceDetails-colorPicker"
+            />
+          </div>
+        </EuiFormRow>
+      </EuiPanel>
+      <EuiSpacer />
+
+      <EuiTabs>
+        <EuiTab
+          onClick={handleTabFeatureClick}
+          isSelected={selectedTab === WorkspaceFormTabs.FeatureVisibility}
+        >
+          <EuiText>{featureVisibilityTitle}</EuiText>
+        </EuiTab>
+      </EuiTabs>
+      {selectedTab === WorkspaceFormTabs.FeatureVisibility && (
+        <EuiPanel>
+          <EuiTitle size="s">
+            <h2>{featureVisibilityTitle}</h2>
+          </EuiTitle>
+          <EuiHorizontalRule margin="xs" />
+          <EuiSpacer size="s" />
+          <WorkspaceFeatureSelector
+            applications={applications}
+            selectedFeatures={formData.features}
+            onChange={handleFeaturesChange}
+          />
+        </EuiPanel>
+      )}
+      <EuiSpacer />
+      <WorkspaceBottomBar
+        operationType={operationType}
+        formId={formId}
+        application={application}
+        numberOfErrors={numberOfErrors}
+      />
+    </EuiForm>
+  );
+};
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
new file mode 100644
index 000000000000..f90101772950
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_list/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,301 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WorkspaceList should render title and table normally 1`] = `
+<div>
+  <div
+    class="euiPage euiPage--grow"
+  >
+    <div
+      class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--hasShadow euiPageBody euiPageBody--borderRadiusNone euiPageBody--paddingLarge"
+    >
+      <header
+        class="euiPageHeader euiPageHeader--responsive euiPage--restrictWidth-default euiPageHeader--center"
+        style="padding-bottom: 0px; border-bottom: 0;"
+      >
+        <div
+          class="euiPageHeaderContent"
+        >
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
+          >
+            <div
+              class="euiFlexItem"
+            >
+              <h1
+                class="euiTitle euiTitle--large"
+              >
+                Workspaces
+              </h1>
+              <div
+                class="euiSpacer euiSpacer--l"
+              />
+              <div
+                class="euiText euiText--medium euiText--constrainedWidth"
+              >
+                <p>
+                  Workspace allow you to save and organize library items, such as index patterns, visualizations, dashboards, saved searches, and share them with other OpenSearch Dashboards users. You can control which features are visible in each workspace, and which users and groups have read and write access to the library items in the workspace.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div
+        class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
+        role="main"
+        style="width: 100%; max-width: 1000px;"
+      >
+        <div>
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+          >
+            <div
+              class="euiFlexItem euiSearchBar__searchHolder"
+            >
+              <div
+                class="euiFormControlLayout euiFormControlLayout--fullWidth"
+              >
+                <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"
+                    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"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                data-test-subj="workspaceList-create-workspace"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Create workspace
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <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="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <div
+                      class="euiTableSortMobile"
+                    >
+                      <div
+                        class="euiPopover euiPopover--anchorDownRight"
+                      >
+                        <div
+                          class="euiPopover__anchor"
+                        >
+                          <button
+                            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                            type="button"
+                          >
+                            <span
+                              class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                            >
+                              <span
+                                class="euiButtonContent__icon"
+                                color="inherit"
+                                data-euiicon-type="arrowDown"
+                              />
+                              <span
+                                class="euiButtonEmpty__text"
+                              >
+                                Sorting
+                              </span>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <table
+                class="euiTable euiTable--responsive"
+                id="__table_generated-id"
+                tabindex="-1"
+              >
+                <caption
+                  class="euiScreenReaderOnly euiTableCaption"
+                />
+                <thead>
+                  <tr>
+                    <th
+                      aria-live="polite"
+                      aria-sort="ascending"
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_name_0"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <button
+                        class="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                        data-test-subj="tableHeaderSortButton"
+                        type="button"
+                      >
+                        <span
+                          class="euiTableCellContent"
+                        >
+                          <span
+                            class="euiTableCellContent__text"
+                            title="Name"
+                          >
+                            Name
+                          </span>
+                          <span
+                            class="euiTableSortIcon"
+                            data-euiicon-type="sortUp"
+                          />
+                        </span>
+                      </button>
+                    </th>
+                    <th
+                      aria-live="polite"
+                      aria-sort="none"
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_id_1"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <button
+                        class="euiTableHeaderButton"
+                        data-test-subj="tableHeaderSortButton"
+                        type="button"
+                      >
+                        <span
+                          class="euiTableCellContent"
+                        >
+                          <span
+                            class="euiTableCellContent__text"
+                            title="ID"
+                          >
+                            ID
+                          </span>
+                        </span>
+                      </button>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_description_2"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <span
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Description"
+                        >
+                          Description
+                        </span>
+                      </span>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_features_3"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <span
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Features"
+                        >
+                          Features
+                        </span>
+                      </span>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <span
+                        class="euiTableCellContent euiTableCellContent--alignRight"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Actions"
+                        >
+                          Actions
+                        </span>
+                      </span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    class="euiTableRow"
+                  >
+                    <td
+                      class="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                      colspan="5"
+                    >
+                      <div
+                        class="euiTableCellContent euiTableCellContent--alignCenter"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                        >
+                          No items found
+                        </span>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/plugins/workspace/public/components/workspace_list/index.test.tsx b/src/plugins/workspace/public/components/workspace_list/index.test.tsx
new file mode 100644
index 000000000000..d75ddf0d513f
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_list/index.test.tsx
@@ -0,0 +1,126 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { WorkspaceList } from './index';
+import { coreMock } from '../../../../../core/public/mocks';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { I18nProvider } from '@osd/i18n/react';
+import { switchWorkspace, navigateToWorkspaceUpdatePage } from '../utils/workspace';
+
+import { of } from 'rxjs';
+
+import { OpenSearchDashboardsContextProvider } from '../../../../../plugins/opensearch_dashboards_react/public';
+
+jest.mock('../utils/workspace');
+
+jest.mock('../delete_workspace_modal', () => ({
+  DeleteWorkspaceModal: ({ onClose }: { onClose: () => void }) => (
+    <div aria-label="mock delete workspace modal">
+      <button onClick={onClose} aria-label="mock delete workspace modal button" />
+    </div>
+  ),
+}));
+
+function getWrapWorkspaceListInContext(
+  workspaceList = [
+    { id: 'id1', name: 'name1' },
+    { id: 'id2', name: 'name2' },
+  ]
+) {
+  const coreStartMock = coreMock.createStart();
+
+  const services = {
+    ...coreStartMock,
+    workspaces: {
+      workspaceList$: of(workspaceList),
+    },
+  };
+
+  return (
+    <I18nProvider>
+      <OpenSearchDashboardsContextProvider services={services}>
+        <WorkspaceList />
+      </OpenSearchDashboardsContextProvider>
+    </I18nProvider>
+  );
+}
+
+describe('WorkspaceList', () => {
+  it('should render title and table normally', () => {
+    const { getByText, getByRole, container } = render(<WorkspaceList />);
+    expect(getByText('Workspaces')).toBeInTheDocument();
+    expect(getByRole('table')).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
+  it('should render data in table based on workspace list data', async () => {
+    const { getByText } = render(getWrapWorkspaceListInContext());
+    expect(getByText('name1')).toBeInTheDocument();
+    expect(getByText('name2')).toBeInTheDocument();
+  });
+  it('should be able to apply debounce search after input', async () => {
+    const list = [
+      { id: 'id1', name: 'name1' },
+      { id: 'id2', name: 'name2' },
+      { id: 'id3', name: 'name3' },
+      { id: 'id4', name: 'name4' },
+      { id: 'id5', name: 'name5' },
+      { id: 'id6', name: 'name6' },
+    ];
+    const { getByText, getByRole, queryByText } = render(getWrapWorkspaceListInContext(list));
+    expect(getByText('name1')).toBeInTheDocument();
+    expect(queryByText('name6')).not.toBeInTheDocument();
+    const input = getByRole('searchbox');
+    fireEvent.change(input, {
+      target: { value: 'nam' },
+    });
+    fireEvent.change(input, {
+      target: { value: 'name6' },
+    });
+    expect(queryByText('name6')).not.toBeInTheDocument();
+  });
+
+  it('should be able to switch workspace after clicking name', async () => {
+    const { getByText } = render(getWrapWorkspaceListInContext());
+    const nameLink = getByText('name1');
+    fireEvent.click(nameLink);
+    expect(switchWorkspace).toBeCalled();
+  });
+
+  it('should be able to update workspace after clicking name', async () => {
+    const { getAllByTestId } = render(getWrapWorkspaceListInContext());
+    const editIcon = getAllByTestId('workspace-list-edit-icon')[0];
+    fireEvent.click(editIcon);
+    expect(navigateToWorkspaceUpdatePage).toBeCalled();
+  });
+
+  it('should be able to call delete modal after clicking delete button', async () => {
+    const { getAllByTestId } = render(getWrapWorkspaceListInContext());
+    const deleteIcon = getAllByTestId('workspace-list-delete-icon')[0];
+    fireEvent.click(deleteIcon);
+    expect(screen.queryByLabelText('mock delete workspace modal')).toBeInTheDocument();
+    const modalCancelButton = screen.getByLabelText('mock delete workspace modal button');
+    fireEvent.click(modalCancelButton);
+    expect(screen.queryByLabelText('mock delete workspace modal')).not.toBeInTheDocument();
+  });
+
+  it('should be able to pagination when clicking pagination button', async () => {
+    const list = [
+      { id: 'id1', name: 'name1' },
+      { id: 'id2', name: 'name2' },
+      { id: 'id3', name: 'name3' },
+      { id: 'id4', name: 'name4' },
+      { id: 'id5', name: 'name5' },
+      { id: 'id6', name: 'name6' },
+    ];
+    const { getByTestId, getByText, queryByText } = render(getWrapWorkspaceListInContext(list));
+    expect(getByText('name1')).toBeInTheDocument();
+    expect(queryByText('name6')).not.toBeInTheDocument();
+    const paginationButton = getByTestId('pagination-button-next');
+    fireEvent.click(paginationButton);
+    expect(queryByText('name1')).not.toBeInTheDocument();
+    expect(getByText('name6')).toBeInTheDocument();
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_list/index.tsx b/src/plugins/workspace/public/components/workspace_list/index.tsx
new file mode 100644
index 000000000000..b22a0fdb99fd
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_list/index.tsx
@@ -0,0 +1,220 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useMemo, useCallback } from 'react';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiPageContent,
+  EuiLink,
+  EuiButton,
+  EuiInMemoryTable,
+  EuiSearchBarProps,
+} from '@elastic/eui';
+import useObservable from 'react-use/lib/useObservable';
+import { of } from 'rxjs';
+import { i18n } from '@osd/i18n';
+import { debounce } from '../../../../../core/public';
+import { WorkspaceAttribute } from '../../../../../core/public';
+import { useOpenSearchDashboards } from '../../../../../plugins/opensearch_dashboards_react/public';
+import { switchWorkspace, navigateToWorkspaceUpdatePage } from '../utils/workspace';
+
+import { WORKSPACE_CREATE_APP_ID } from '../../../common/constants';
+
+import { cleanWorkspaceId } from '../../../../../core/public';
+import { DeleteWorkspaceModal } from '../delete_workspace_modal';
+
+const WORKSPACE_LIST_PAGE_DESCRIPTIOIN = i18n.translate('workspace.list.description', {
+  defaultMessage:
+    'Workspace allow you to save and organize library items, such as index patterns, visualizations, dashboards, saved searches, and share them with other OpenSearch Dashboards users. You can control which features are visible in each workspace, and which users and groups have read and write access to the library items in the workspace.',
+});
+
+export const WorkspaceList = () => {
+  const {
+    services: { workspaces, application, http },
+  } = useOpenSearchDashboards();
+
+  const initialSortField = 'name';
+  const initialSortDirection = 'asc';
+  const workspaceList = useObservable(workspaces?.workspaceList$ ?? of([]), []);
+  const [queryInput, setQueryInput] = useState<string>('');
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 5,
+    pageSizeOptions: [5, 10, 20],
+  });
+  const [deletedWorkspace, setDeletedWorkspace] = useState<WorkspaceAttribute | null>(null);
+
+  const handleSwitchWorkspace = useCallback(
+    (id: string) => {
+      if (application && http) {
+        switchWorkspace({ application, http }, id);
+      }
+    },
+    [application, http]
+  );
+
+  const handleUpdateWorkspace = useCallback(
+    (id: string) => {
+      if (application && http) {
+        navigateToWorkspaceUpdatePage({ application, http }, id);
+      }
+    },
+    [application, http]
+  );
+
+  const searchResult = useMemo(() => {
+    if (queryInput) {
+      const normalizedQuery = queryInput.toLowerCase();
+      const result = workspaceList.filter((item) => {
+        return (
+          item.id.toLowerCase().indexOf(normalizedQuery) > -1 ||
+          item.name.toLowerCase().indexOf(normalizedQuery) > -1
+        );
+      });
+      return result;
+    }
+    return workspaceList;
+  }, [workspaceList, queryInput]);
+
+  const columns = [
+    {
+      field: 'name',
+      name: 'Name',
+      sortable: true,
+      render: (name: string, item: WorkspaceAttribute) => (
+        <span>
+          <EuiLink onClick={() => handleSwitchWorkspace(item.id)}>{name}</EuiLink>
+        </span>
+      ),
+    },
+    {
+      field: 'id',
+      name: 'ID',
+      sortable: true,
+    },
+    {
+      field: 'description',
+      name: 'Description',
+      truncateText: true,
+    },
+    {
+      field: 'features',
+      name: 'Features',
+      isExpander: true,
+      hasActions: true,
+    },
+    {
+      name: 'Actions',
+      field: '',
+      actions: [
+        {
+          name: 'Edit',
+          icon: 'pencil',
+          type: 'icon',
+          description: 'Edit workspace',
+          onClick: ({ id }: WorkspaceAttribute) => handleUpdateWorkspace(id),
+          'data-test-subj': 'workspace-list-edit-icon',
+        },
+        {
+          name: 'Delete',
+          icon: 'trash',
+          type: 'icon',
+          description: 'Delete workspace',
+          onClick: (item: WorkspaceAttribute) => setDeletedWorkspace(item),
+          'data-test-subj': 'workspace-list-delete-icon',
+        },
+      ],
+    },
+  ];
+
+  const workspaceCreateUrl = useMemo(() => {
+    if (!application || !http) {
+      return '';
+    }
+
+    const appUrl = application.getUrlForApp(WORKSPACE_CREATE_APP_ID, {
+      absolute: false,
+    });
+    if (!appUrl) return '';
+
+    return cleanWorkspaceId(appUrl);
+  }, [application, http]);
+
+  const debouncedSetQueryInput = useMemo(() => {
+    return debounce(setQueryInput, 300);
+  }, [setQueryInput]);
+
+  const handleSearchInput: EuiSearchBarProps['onChange'] = useCallback(
+    ({ query }) => {
+      debouncedSetQueryInput(query?.text ?? '');
+    },
+    [debouncedSetQueryInput]
+  );
+
+  const search: EuiSearchBarProps = {
+    onChange: handleSearchInput,
+    box: {
+      incremental: true,
+    },
+    toolsRight: [
+      <EuiButton
+        href={workspaceCreateUrl}
+        key="create_workspace"
+        data-test-subj="workspaceList-create-workspace"
+      >
+        Create workspace
+      </EuiButton>,
+    ],
+  };
+
+  return (
+    <EuiPage paddingSize="none">
+      <EuiPageBody panelled>
+        <EuiPageHeader
+          restrictWidth
+          pageTitle="Workspaces"
+          description={WORKSPACE_LIST_PAGE_DESCRIPTIOIN}
+          style={{ paddingBottom: 0, borderBottom: 0 }}
+        />
+        <EuiPageContent
+          verticalPosition="center"
+          horizontalPosition="center"
+          paddingSize="none"
+          panelPaddingSize="l"
+          hasShadow={false}
+          style={{ width: '100%', maxWidth: 1000 }}
+        >
+          <EuiInMemoryTable
+            items={searchResult}
+            columns={columns}
+            itemId="id"
+            onTableChange={({ page: { index, size } }) =>
+              setPagination((prev) => {
+                return { ...prev, pageIndex: index, pageSize: size };
+              })
+            }
+            pagination={pagination}
+            sorting={{
+              sort: {
+                field: initialSortField,
+                direction: initialSortDirection,
+              },
+            }}
+            isSelectable={true}
+            search={search}
+          />
+        </EuiPageContent>
+      </EuiPageBody>
+      {deletedWorkspace && (
+        <DeleteWorkspaceModal
+          selectedWorkspace={deletedWorkspace}
+          onClose={() => setDeletedWorkspace(null)}
+        />
+      )}
+    </EuiPage>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_list_app.tsx b/src/plugins/workspace/public/components/workspace_list_app.tsx
new file mode 100644
index 000000000000..8970cfc46fc7
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_list_app.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+import { WorkspaceList } from './workspace_list';
+
+export const WorkspaceListApp = () => {
+  const {
+    services: { chrome },
+  } = useOpenSearchDashboards();
+
+  /**
+   * set breadcrumbs to chrome
+   */
+  useEffect(() => {
+    chrome?.setBreadcrumbs([
+      {
+        text: i18n.translate('workspace.workspaceListTitle', {
+          defaultMessage: 'Workspaces',
+        }),
+      },
+    ]);
+  }, [chrome]);
+
+  return (
+    <I18nProvider>
+      <WorkspaceList />
+    </I18nProvider>
+  );
+};
diff --git a/src/plugins/workspace/public/hooks.ts b/src/plugins/workspace/public/hooks.ts
new file mode 100644
index 000000000000..875e9b494f23
--- /dev/null
+++ b/src/plugins/workspace/public/hooks.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ApplicationStart, PublicAppInfo } from 'opensearch-dashboards/public';
+import { useObservable } from 'react-use';
+import { useMemo } from 'react';
+
+export function useApplications(applicationInstance: ApplicationStart) {
+  const applications = useObservable(applicationInstance.applications$);
+  return useMemo(() => {
+    const apps: PublicAppInfo[] = [];
+    applications?.forEach((app) => {
+      apps.push(app);
+    });
+    return apps;
+  }, [applications]);
+}
diff --git a/src/plugins/workspace/public/plugin.test.ts b/src/plugins/workspace/public/plugin.test.ts
index 2306c460b88d..793ed5e0f09f 100644
--- a/src/plugins/workspace/public/plugin.test.ts
+++ b/src/plugins/workspace/public/plugin.test.ts
@@ -23,6 +23,7 @@ describe('Workspace plugin', () => {
     const setupMock = getSetupMock();
     const workspacePlugin = new WorkspacePlugin();
     await workspacePlugin.setup(setupMock);
+    expect(setupMock.application.register).toBeCalledTimes(3);
     expect(WorkspaceClientMock).toBeCalledTimes(1);
   });
 
@@ -34,7 +35,7 @@ describe('Workspace plugin', () => {
     workspacePlugin.start(coreStart);
     coreStart.workspaces.currentWorkspaceId$.next('foo');
     expect(coreStart.savedObjects.client.setCurrentWorkspace).toHaveBeenCalledWith('foo');
-    expect(setupMock.application.register).toBeCalledTimes(1);
+    expect(setupMock.application.register).toBeCalledTimes(3);
     expect(WorkspaceClientMock).toBeCalledTimes(1);
     expect(workspaceClientMock.enterWorkspace).toBeCalledTimes(0);
   });
@@ -69,7 +70,7 @@ describe('Workspace plugin', () => {
 
     const workspacePlugin = new WorkspacePlugin();
     await workspacePlugin.setup(setupMock);
-    expect(setupMock.application.register).toBeCalledTimes(1);
+    expect(setupMock.application.register).toBeCalledTimes(3);
     expect(WorkspaceClientMock).toBeCalledTimes(1);
     expect(workspaceClientMock.enterWorkspace).toBeCalledWith('workspaceId');
     expect(setupMock.getStartServices).toBeCalledTimes(1);
diff --git a/src/plugins/workspace/public/plugin.ts b/src/plugins/workspace/public/plugin.ts
index f0c82bda90b7..bce606583b85 100644
--- a/src/plugins/workspace/public/plugin.ts
+++ b/src/plugins/workspace/public/plugin.ts
@@ -5,6 +5,7 @@
 
 import type { Subscription } from 'rxjs';
 import React from 'react';
+import { i18n } from '@osd/i18n';
 import {
   Plugin,
   CoreStart,
@@ -12,7 +13,12 @@ import {
   AppMountParameters,
   AppNavLinkStatus,
 } from '../../../core/public';
-import { WORKSPACE_FATAL_ERROR_APP_ID, WORKSPACE_OVERVIEW_APP_ID } from '../common/constants';
+import {
+  WORKSPACE_FATAL_ERROR_APP_ID,
+  WORKSPACE_OVERVIEW_APP_ID,
+  WORKSPACE_CREATE_APP_ID,
+  WORKSPACE_LIST_APP_ID,
+} from '../common/constants';
 import { getWorkspaceIdFromUrl } from '../../../core/public/utils';
 import { Services } from './types';
 import { WorkspaceClient } from './workspace_client';
@@ -89,6 +95,19 @@ export class WorkspacePlugin implements Plugin<{}, {}, {}> {
       return renderApp(params, services);
     };
 
+    // create
+    core.application.register({
+      id: WORKSPACE_CREATE_APP_ID,
+      title: i18n.translate('workspace.settings.workspaceCreate', {
+        defaultMessage: 'Create Workspace',
+      }),
+      navLinkStatus: AppNavLinkStatus.hidden,
+      async mount(params: AppMountParameters) {
+        const { renderCreatorApp } = await import('./application');
+        return mountWorkspaceApp(params, renderCreatorApp);
+      },
+    });
+
     // workspace fatal error
     core.application.register({
       id: WORKSPACE_FATAL_ERROR_APP_ID,
@@ -110,6 +129,17 @@ export class WorkspacePlugin implements Plugin<{}, {}, {}> {
       return React.createElement(WorkspaceMenu, { coreStart: this.coreStart });
     });
 
+    // workspace list
+    core.application.register({
+      id: WORKSPACE_LIST_APP_ID,
+      title: '',
+      navLinkStatus: AppNavLinkStatus.hidden,
+      async mount(params: AppMountParameters) {
+        const { renderListApp } = await import('./application');
+        return mountWorkspaceApp(params, renderListApp);
+      },
+    });
+
     return {};
   }
 
diff --git a/src/plugins/workspace/public/utils.test.ts b/src/plugins/workspace/public/utils.test.ts
new file mode 100644
index 000000000000..510a775cd745
--- /dev/null
+++ b/src/plugins/workspace/public/utils.test.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { featureMatchesConfig } from './utils';
+
+describe('workspace utils: featureMatchesConfig', () => {
+  it('feature configured with `*` should match any features', () => {
+    const match = featureMatchesConfig(['*']);
+    expect(match({ id: 'dev_tools', category: { id: 'management', label: 'Management' } })).toBe(
+      true
+    );
+    expect(
+      match({ id: 'discover', category: { id: 'opensearchDashboards', label: 'Library' } })
+    ).toBe(true);
+  });
+
+  it('should NOT match the config if feature id not matches', () => {
+    const match = featureMatchesConfig(['discover', 'dashboards', 'visualize']);
+    expect(match({ id: 'dev_tools', category: { id: 'management', label: 'Management' } })).toBe(
+      false
+    );
+  });
+
+  it('should match the config if feature id matches', () => {
+    const match = featureMatchesConfig(['discover', 'dashboards', 'visualize']);
+    expect(
+      match({ id: 'discover', category: { id: 'opensearchDashboards', label: 'Library' } })
+    ).toBe(true);
+  });
+
+  it('should match the config if feature category matches', () => {
+    const match = featureMatchesConfig(['discover', 'dashboards', '@management', 'visualize']);
+    expect(match({ id: 'dev_tools', category: { id: 'management', label: 'Management' } })).toBe(
+      true
+    );
+  });
+
+  it('should match any features but not the excluded feature id', () => {
+    const match = featureMatchesConfig(['*', '!discover']);
+    expect(match({ id: 'dev_tools', category: { id: 'management', label: 'Management' } })).toBe(
+      true
+    );
+    expect(
+      match({ id: 'discover', category: { id: 'opensearchDashboards', label: 'Library' } })
+    ).toBe(false);
+  });
+
+  it('should match any features but not the excluded feature category', () => {
+    const match = featureMatchesConfig(['*', '!@management']);
+    expect(match({ id: 'dev_tools', category: { id: 'management', label: 'Management' } })).toBe(
+      false
+    );
+    expect(match({ id: 'integrations', category: { id: 'management', label: 'Management' } })).toBe(
+      false
+    );
+    expect(
+      match({ id: 'discover', category: { id: 'opensearchDashboards', label: 'Library' } })
+    ).toBe(true);
+  });
+
+  it('should NOT match the excluded feature category', () => {
+    const match = featureMatchesConfig(['!@management']);
+    expect(match({ id: 'dev_tools', category: { id: 'management', label: 'Management' } })).toBe(
+      false
+    );
+    expect(match({ id: 'integrations', category: { id: 'management', label: 'Management' } })).toBe(
+      false
+    );
+  });
+
+  it('should match features of a category but NOT the excluded feature', () => {
+    const match = featureMatchesConfig(['@management', '!dev_tools']);
+    expect(match({ id: 'dev_tools', category: { id: 'management', label: 'Management' } })).toBe(
+      false
+    );
+    expect(match({ id: 'integrations', category: { id: 'management', label: 'Management' } })).toBe(
+      true
+    );
+  });
+
+  it('a config presents later in the config array should override the previous config', () => {
+    // though `dev_tools` is excluded, but this config will override by '@management' as dev_tools has category 'management'
+    const match = featureMatchesConfig(['!dev_tools', '@management']);
+    expect(match({ id: 'dev_tools', category: { id: 'management', label: 'Management' } })).toBe(
+      true
+    );
+    expect(match({ id: 'integrations', category: { id: 'management', label: 'Management' } })).toBe(
+      true
+    );
+  });
+});
diff --git a/src/plugins/workspace/public/utils.ts b/src/plugins/workspace/public/utils.ts
new file mode 100644
index 000000000000..444b3aadadf3
--- /dev/null
+++ b/src/plugins/workspace/public/utils.ts
@@ -0,0 +1,57 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { AppCategory } from '../../../core/public';
+
+/**
+ * Checks if a given feature matches the provided feature configuration.
+ *
+ * Rules:
+ * 1. `*` matches any feature.
+ * 2. Config starts with `@` matches category, for example, @management matches any feature of `management` category,
+ * 3. To match a specific feature, use the feature id, such as `discover`,
+ * 4. To exclude a feature or category, prepend with `!`, e.g., `!discover` or `!@management`.
+ * 5. The order of featureConfig array matters. From left to right, later configs override the previous ones.
+ *    For example, ['!@management', '*'] matches any feature because '*' overrides the previous setting: '!@management'.
+ */
+export const featureMatchesConfig = (featureConfigs: string[]) => ({
+  id,
+  category,
+}: {
+  id: string;
+  category?: AppCategory;
+}) => {
+  let matched = false;
+
+  for (const featureConfig of featureConfigs) {
+    // '*' matches any feature
+    if (featureConfig === '*') {
+      matched = true;
+    }
+
+    // The config starts with `@` matches a category
+    if (category && featureConfig === `@${category.id}`) {
+      matched = true;
+    }
+
+    // The config matches a feature id
+    if (featureConfig === id) {
+      matched = true;
+    }
+
+    // If a config starts with `!`, such feature or category will be excluded
+    if (featureConfig.startsWith('!')) {
+      if (category && featureConfig === `!@${category.id}`) {
+        matched = false;
+      }
+
+      if (featureConfig === `!${id}`) {
+        matched = false;
+      }
+    }
+  }
+
+  return matched;
+};