diff --git a/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.tsx b/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.tsx
index 50859803f8e0..88fbe57c7b9c 100644
--- a/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.tsx
@@ -77,7 +77,7 @@ export interface AssociationDataSourceModalProps {
   savedObjects: SavedObjectsStart;
   assignedConnections: DataSourceConnection[];
   closeModal: () => void;
-  handleAssignDataSourceConnections: (connections: DataSourceConnection[]) => Promise<void>;
+  handleAssignDataSourceConnections: (connections: DataSourceConnection[]) => Promise<void> | void;
 }
 
 export const AssociationDataSourceModal = ({
diff --git a/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx b/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx
index 6083f557fc8e..2f9a32cf5a75 100644
--- a/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx
@@ -32,9 +32,11 @@ import { AssociationDataSourceModalTab } from '../../../common/constants';
 
 interface OpenSearchConnectionTableProps {
   isDashboardAdmin: boolean;
-  connectionType: string;
+  connectionType?: string;
   dataSourceConnections: DataSourceConnection[];
-  handleUnassignDataSources: (dataSources: DataSourceConnection[]) => Promise<void>;
+  inCreatePage?: boolean;
+  handleUnassignDataSources: (dataSources: DataSourceConnection[]) => Promise<void> | void;
+  getSelectedItems?: (dataSources: DataSourceConnection[]) => void;
 }
 
 export const OpenSearchConnectionTable = ({
@@ -42,6 +44,8 @@ export const OpenSearchConnectionTable = ({
   connectionType,
   dataSourceConnections,
   handleUnassignDataSources,
+  getSelectedItems,
+  inCreatePage = false,
 }: OpenSearchConnectionTableProps) => {
   const [selectedItems, setSelectedItems] = useState<DataSourceConnection[]>([]);
   const [modalVisible, setModalVisible] = useState(false);
@@ -50,6 +54,12 @@ export const OpenSearchConnectionTable = ({
     Record<string, React.ReactNode>
   >({});
 
+  useEffect(() => {
+    if (inCreatePage && getSelectedItems) {
+      getSelectedItems(selectedItems);
+    }
+  }, [selectedItems, getSelectedItems, inCreatePage]);
+
   useEffect(() => {
     // Reset selected items when connectionType changes
     setSelectedItems([]);
@@ -162,7 +172,7 @@ export const OpenSearchConnectionTable = ({
       width: '25%',
       field: 'name',
       name: i18n.translate('workspace.detail.dataSources.table.title', {
-        defaultMessage: 'Title',
+        defaultMessage: 'Data source',
       }),
       truncateText: true,
       render: (name: string, record) => {
@@ -274,7 +284,11 @@ export const OpenSearchConnectionTable = ({
                 type: 'icon',
                 onClick: (item: DataSourceConnection) => {
                   setSelectedItems([item]);
-                  setModalVisible(true);
+                  if (inCreatePage) {
+                    handleUnassignDataSources([item]);
+                  } else {
+                    setModalVisible(true);
+                  }
                 },
                 'data-test-subj': 'workspace-detail-dataSources-table-actions-remove',
               },
@@ -291,23 +305,36 @@ export const OpenSearchConnectionTable = ({
 
   return (
     <>
-      <EuiInMemoryTable
-        items={filteredDataSources}
-        itemId="id"
-        columns={columns}
-        selection={selection}
-        search={search}
-        key={connectionType}
-        isSelectable={true}
-        itemIdToExpandedRowMap={itemIdToExpandedRowMap}
-        isExpandable={true}
-        pagination={{
-          initialPageSize: 10,
-          pageSizeOptions: [10, 20, 30],
-        }}
-      />
+      {inCreatePage ? (
+        <EuiInMemoryTable
+          items={filteredDataSources}
+          itemId="id"
+          columns={columns}
+          selection={selection}
+          key={connectionType}
+          isSelectable={true}
+          itemIdToExpandedRowMap={itemIdToExpandedRowMap}
+          isExpandable={true}
+        />
+      ) : (
+        <EuiInMemoryTable
+          items={filteredDataSources}
+          itemId="id"
+          columns={columns}
+          selection={selection}
+          search={search}
+          key={connectionType}
+          isSelectable={true}
+          itemIdToExpandedRowMap={itemIdToExpandedRowMap}
+          isExpandable={true}
+          pagination={{
+            initialPageSize: 10,
+            pageSizeOptions: [10, 20, 30],
+          }}
+        />
+      )}
       <EuiSpacer />
-      {modalVisible && (
+      {modalVisible && !inCreatePage && (
         <EuiConfirmModal
           data-test-subj="workspaceForm-cancelModal"
           title={i18n.translate('workspace.detail.dataSources.modal.title', {
diff --git a/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.test.tsx b/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.test.tsx
index 2890333f1268..0c408ad369c0 100644
--- a/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.test.tsx
@@ -4,85 +4,122 @@
  */
 
 import React from 'react';
-import { fireEvent, render, act } from '@testing-library/react';
+import { fireEvent, render, act, waitFor } from '@testing-library/react';
 import { SelectDataSourcePanel, SelectDataSourcePanelProps } from './select_data_source_panel';
 import { coreMock } from '../../../../../core/public/mocks';
+import * as utils from '../../utils';
 
-const dataSources = [
+const currentAssignedDataSources = [
   {
     id: 'id1',
-    title: 'title1',
+    name: 'title1',
+    description: 'ds-1-description',
+    type: 'OpenSearch',
+    connectionType: 0,
+  },
+  {
+    id: 'id2',
+    name: 'title2',
+    description: 'ds-1-description',
+    type: 'S3GLUE',
+    connectionType: 0,
   },
-  { id: 'id2', title: 'title2' },
 ];
 
-jest.mock('../../utils', () => ({
-  getDataSourcesList: jest.fn().mockResolvedValue(dataSources),
-}));
+const dataSources = [
+  {
+    id: 'id3',
+    title: 'title3',
+    description: 'ds-3-description',
+    auth: '',
+    dataSourceEngineType: '',
+    workspaces: [],
+  },
+  {
+    id: 'id4',
+    title: 'title4',
+    description: 'ds-4-description',
+    auth: '',
+    dataSourceEngineType: '',
+    workspaces: [],
+  },
+];
+
+jest.spyOn(utils, 'getDataSourcesList').mockResolvedValue(dataSources);
 
 const mockCoreStart = coreMock.createStart();
 
 const setup = ({
   savedObjects = mockCoreStart.savedObjects,
-  selectedDataSources = [],
+  assignedDataSources = [],
   onChange = jest.fn(),
   errors = undefined,
+  isDashboardAdmin = true,
 }: Partial<SelectDataSourcePanelProps>) => {
   return render(
     <SelectDataSourcePanel
       onChange={onChange}
       savedObjects={savedObjects}
-      selectedDataSources={selectedDataSources}
+      assignedDataSources={assignedDataSources}
       errors={errors}
+      isDashboardAdmin={isDashboardAdmin}
     />
   );
 };
 
 describe('SelectDataSourcePanel', () => {
   it('should render consistent data sources when selected data sources passed', () => {
-    const { getByText } = setup({ selectedDataSources: dataSources });
+    const { getByText } = setup({ assignedDataSources: currentAssignedDataSources });
 
-    expect(getByText(dataSources[0].title)).toBeInTheDocument();
-    expect(getByText(dataSources[1].title)).toBeInTheDocument();
+    expect(getByText(currentAssignedDataSources[0].name)).toBeInTheDocument();
+    expect(getByText(currentAssignedDataSources[1].name)).toBeInTheDocument();
   });
 
-  it('should call onChange when clicking add new data source button', () => {
+  it('should call onChange when updating data sources', async () => {
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      value: 600,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 600,
+    });
     const onChangeMock = jest.fn();
-    const { getByTestId } = setup({ onChange: onChangeMock });
+    const { getByTestId, getAllByText, getByText } = setup({
+      onChange: onChangeMock,
+      assignedDataSources: [],
+    });
 
     expect(onChangeMock).not.toHaveBeenCalled();
-    fireEvent.click(getByTestId('workspaceForm-select-dataSource-addNew'));
+    fireEvent.click(getByTestId('workspace-creator-dataSources-assign-button'));
+
+    await waitFor(() => {
+      expect(getByText(dataSources[0].title)).toBeInTheDocument();
+    });
+
+    fireEvent.click(getAllByText(dataSources[0].title)[0]);
+    fireEvent.click(getByText('Associate data sources'));
     expect(onChangeMock).toHaveBeenCalledWith([
       {
-        id: '',
-        title: '',
+        connectionType: 0,
+        description: 'ds-3-description',
+        id: 'id3',
+        name: 'title3',
+        relatedConnections: [],
+        type: '',
       },
     ]);
   });
 
-  it('should call onChange when updating selected data sources in combo box', async () => {
-    const onChangeMock = jest.fn();
-    const { getByTitle, getByText } = setup({
-      onChange: onChangeMock,
-      selectedDataSources: [{ id: '', title: '' }],
-    });
-    expect(onChangeMock).not.toHaveBeenCalled();
-    await act(() => {
-      fireEvent.click(getByText('Select'));
-    });
-    fireEvent.click(getByTitle(dataSources[0].title));
-    expect(onChangeMock).toHaveBeenCalledWith([{ id: 'id1', title: 'title1' }]);
-  });
-
   it('should call onChange when deleting selected data source', async () => {
     const onChangeMock = jest.fn();
-    const { getByLabelText } = setup({
+    const { getByTestId } = setup({
       onChange: onChangeMock,
-      selectedDataSources: [{ id: '', title: '' }],
+      assignedDataSources: [{ id: '', name: '', type: '', connectionType: 0 }],
     });
     expect(onChangeMock).not.toHaveBeenCalled();
     await act(() => {
-      fireEvent.click(getByLabelText('Delete data source'));
+      fireEvent.click(getByTestId('workspace-detail-dataSources-table-actions-remove'));
     });
     expect(onChangeMock).toHaveBeenCalledWith([]);
   });
diff --git a/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.tsx b/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.tsx
index 9c990d7e7195..03b2dc645cf7 100644
--- a/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.tsx
@@ -3,149 +3,132 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {
-  EuiSmallButton,
-  EuiCompressedFormRow,
   EuiSpacer,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButtonIcon,
-  EuiCompressedComboBox,
-  EuiComboBoxOptionOption,
   EuiFormLabel,
+  EuiText,
+  EuiFlexItem,
+  EuiSmallButton,
+  EuiFlexGroup,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-import { SavedObjectsStart } from '../../../../../core/public';
-import { getDataSourcesList } from '../../utils';
-import { DataSource } from '../../../common/types';
+import { SavedObjectsStart, CoreStart } from '../../../../../core/public';
+import { DataSourceConnection } from '../../../common/types';
 import { WorkspaceFormError } from './types';
+import { AssociationDataSourceModal } from '../workspace_detail/association_data_source_modal';
+import { OpenSearchConnectionTable } from '../workspace_detail/opensearch_connections_table';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { WorkspaceClient } from '../../workspace_client';
+import { AssociationDataSourceModalTab } from '../../../common/constants';
 
 export interface SelectDataSourcePanelProps {
   errors?: { [key: number]: WorkspaceFormError };
   savedObjects: SavedObjectsStart;
-  selectedDataSources: DataSource[];
-  onChange: (value: DataSource[]) => void;
+  assignedDataSources: DataSourceConnection[];
+  onChange: (value: DataSourceConnection[]) => void;
+  isDashboardAdmin: boolean;
 }
 
 export const SelectDataSourcePanel = ({
   errors,
   onChange,
-  selectedDataSources,
+  assignedDataSources,
   savedObjects,
+  isDashboardAdmin,
 }: SelectDataSourcePanelProps) => {
-  const [dataSourcesOptions, setDataSourcesOptions] = useState<EuiComboBoxOptionOption[]>([]);
-  useEffect(() => {
-    if (!savedObjects) return;
-    getDataSourcesList(savedObjects.client, ['*']).then((result) => {
-      const options = result.map(({ title, id }) => ({
-        label: title,
-        value: id,
-      }));
-      setDataSourcesOptions(options);
-    });
-  }, [savedObjects, setDataSourcesOptions]);
-  const handleAddNewOne = useCallback(() => {
-    onChange?.([
-      ...selectedDataSources,
-      {
-        title: '',
-        id: '',
-      },
-    ]);
-  }, [onChange, selectedDataSources]);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<DataSourceConnection[]>([]);
+  const {
+    services: { notifications, http },
+  } = useOpenSearchDashboards<{ CoreStart: CoreStart; workspaceClient: WorkspaceClient }>();
 
-  const handleSelect = useCallback(
-    (selectedOptions, index) => {
-      const newOption = selectedOptions[0]
-        ? // Select new data source
-          {
-            title: selectedOptions[0].label,
-            id: selectedOptions[0].value,
-          }
-        : // Click reset button
-          {
-            title: '',
-            id: '',
-          };
-      const newSelectedOptions = [...selectedDataSources];
-      newSelectedOptions.splice(index, 1, newOption);
+  const handleAssignDataSources = (dataSources: DataSourceConnection[]) => {
+    setModalVisible(false);
+    const savedDataSources: DataSourceConnection[] = [...assignedDataSources, ...dataSources];
+    onChange(savedDataSources);
+  };
 
-      onChange(newSelectedOptions);
-    },
-    [onChange, selectedDataSources]
-  );
+  const handleUnassignDataSources = (dataSources: DataSourceConnection[]) => {
+    const savedDataSources = (assignedDataSources ?? [])?.filter(
+      ({ id }: DataSourceConnection) => !dataSources.some((item) => item.id === id)
+    );
+    onChange(savedDataSources);
+  };
+
+  const renderTableContent = () => {
+    return (
+      <OpenSearchConnectionTable
+        isDashboardAdmin={isDashboardAdmin}
+        dataSourceConnections={assignedDataSources}
+        handleUnassignDataSources={handleUnassignDataSources}
+        getSelectedItems={getSelectedItems}
+        inCreatePage={true}
+        connectionType={AssociationDataSourceModalTab.DirectQueryConnections}
+      />
+    );
+  };
 
-  const handleDelete = useCallback(
-    (index) => {
-      const newSelectedOptions = [...selectedDataSources];
-      newSelectedOptions.splice(index, 1);
+  const associationButton = (
+    <EuiSmallButton
+      iconType="plusInCircle"
+      onClick={() => setModalVisible(true)}
+      data-test-subj="workspace-creator-dataSources-assign-button"
+    >
+      {i18n.translate('workspace.form.selectDataSourcePanel.addNew', {
+        defaultMessage: 'Add data sources',
+      })}
+    </EuiSmallButton>
+  );
 
-      onChange(newSelectedOptions);
-    },
-    [onChange, selectedDataSources]
+  const removeButton = (
+    <EuiSmallButton
+      iconType="unlink"
+      color="danger"
+      onClick={() => {
+        handleUnassignDataSources(selectedItems);
+      }}
+      data-test-subj="workspace-creator-dataSources-assign-button"
+    >
+      {i18n.translate('workspace.form.selectDataSourcePanel.remove', {
+        defaultMessage: 'Remove selected',
+      })}
+    </EuiSmallButton>
   );
 
+  const getSelectedItems = (currentSelectedItems: DataSourceConnection[]) =>
+    setSelectedItems(currentSelectedItems);
+
   return (
     <div>
       <EuiFormLabel>
-        {i18n.translate('workspace.form.selectDataSource.subTitle', {
-          defaultMessage: 'Data source',
-        })}
+        <EuiText size="xs">
+          {i18n.translate('workspace.form.selectDataSource.subTitle', {
+            defaultMessage: 'Add data sources that will be available in the workspace',
+          })}
+        </EuiText>
       </EuiFormLabel>
-      <EuiSpacer size="s" />
-      {selectedDataSources.map(({ id, title }, index) => (
-        <EuiCompressedFormRow
-          key={index}
-          isInvalid={!!errors?.[index]}
-          error={errors?.[index]?.message}
-          fullWidth
-        >
-          <EuiFlexGroup alignItems="flexEnd" gutterSize="m">
-            <EuiFlexItem style={{ maxWidth: 400 }}>
-              <EuiCompressedComboBox
-                data-test-subj="workspaceForm-select-dataSource-comboBox"
-                singleSelection
-                options={dataSourcesOptions}
-                selectedOptions={
-                  id
-                    ? [
-                        {
-                          label: title,
-                          value: id,
-                        },
-                      ]
-                    : []
-                }
-                onChange={(selectedOptions) => handleSelect(selectedOptions, index)}
-                placeholder="Select"
-              />
-            </EuiFlexItem>
-            <EuiFlexItem style={{ maxWidth: 332 }}>
-              <EuiButtonIcon
-                color="danger"
-                aria-label="Delete data source"
-                iconType="trash"
-                display="empty"
-                size="m"
-                onClick={() => handleDelete(index)}
-                isDisabled={false}
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiCompressedFormRow>
-      ))}
-
-      <EuiSmallButton
-        fill
-        fullWidth={false}
-        onClick={handleAddNewOne}
-        data-test-subj={`workspaceForm-select-dataSource-addNew`}
-      >
-        {i18n.translate('workspace.form.selectDataSourcePanel.addNew', {
-          defaultMessage: 'Add New',
-        })}
-      </EuiSmallButton>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup alignItems="center">
+        {isDashboardAdmin && selectedItems.length > 0 && assignedDataSources.length > 0 && (
+          <EuiFlexItem grow={false}>{removeButton}</EuiFlexItem>
+        )}
+        {isDashboardAdmin && <EuiFlexItem grow={false}>{associationButton}</EuiFlexItem>}
+      </EuiFlexGroup>
+      <EuiSpacer size="xs" />
+      <EuiFlexItem style={{ maxWidth: 800 }}>
+        {assignedDataSources.length > 0 && renderTableContent()}
+      </EuiFlexItem>
+      {modalVisible && (
+        <AssociationDataSourceModal
+          savedObjects={savedObjects}
+          assignedConnections={assignedDataSources}
+          closeModal={() => setModalVisible(false)}
+          handleAssignDataSourceConnections={handleAssignDataSources}
+          http={http}
+          notifications={notifications}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/plugins/workspace/public/components/workspace_form/types.ts b/src/plugins/workspace/public/components/workspace_form/types.ts
index 5ec929e17b0c..a9a7df9005d4 100644
--- a/src/plugins/workspace/public/components/workspace_form/types.ts
+++ b/src/plugins/workspace/public/components/workspace_form/types.ts
@@ -6,7 +6,7 @@
 import type { ApplicationStart, SavedObjectsStart } from '../../../../../core/public';
 import type { WorkspacePermissionMode } from '../../../common/constants';
 import type { DetailTab, WorkspaceOperationType, WorkspacePermissionItemType } from './constants';
-import { DataSource } from '../../../common/types';
+import { DataSourceConnection } from '../../../common/types';
 import { DataSourceManagementPluginSetup } from '../../../../../plugins/data_source_management/public';
 import { WorkspaceUseCase } from '../../types';
 
@@ -34,7 +34,7 @@ export interface WorkspaceFormSubmitData {
   features?: string[];
   color?: string;
   permissionSettings?: WorkspacePermissionSetting[];
-  selectedDataSources?: DataSource[];
+  selectedDataSources?: DataSourceConnection[];
 }
 
 export interface WorkspaceFormData extends WorkspaceFormSubmitData {
diff --git a/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts b/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts
index f627df1f3aad..87b64376de8f 100644
--- a/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts
+++ b/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts
@@ -12,7 +12,7 @@ import {
   getUseCaseFeatureConfig,
   isUseCaseFeatureConfig,
 } from '../../utils';
-import { DataSource } from '../../../common/types';
+import { DataSourceConnection } from '../../../common/types';
 import { WorkspaceFormProps, WorkspaceFormErrors, WorkspacePermissionSetting } from './types';
 import {
   generatePermissionSettingsState,
@@ -49,7 +49,7 @@ export const useWorkspaceForm = ({
     Array<Pick<WorkspacePermissionSetting, 'id'> & Partial<WorkspacePermissionSetting>>
   >(initialPermissionSettingsRef.current);
 
-  const [selectedDataSources, setSelectedDataSources] = useState<DataSource[]>(
+  const [selectedDataSources, setSelectedDataSources] = useState<DataSourceConnection[]>(
     defaultValues?.selectedDataSources && defaultValues.selectedDataSources.length > 0
       ? defaultValues.selectedDataSources
       : []
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx
index f21a800a8357..17ab4bb37d9a 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx
@@ -48,7 +48,7 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
   const disabledUserOrGroupInputIdsRef = useRef(
     defaultValues?.permissionSettings?.map((item) => item.id) ?? []
   );
-  const isDashboardAdmin = application?.capabilities?.dashboards?.isDashboardAdmin ?? false;
+  const isDashboardAdmin = !!application?.capabilities?.dashboards?.isDashboardAdmin;
   const handleNameInputChange = useCallback(
     (newName) => {
       setName(newName);
@@ -140,8 +140,9 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
             errors={formErrors.selectedDataSources}
             onChange={setSelectedDataSources}
             savedObjects={savedObjects}
-            selectedDataSources={formData.selectedDataSources}
+            assignedDataSources={formData.selectedDataSources}
             data-test-subj={`workspaceForm-dataSourcePanel`}
+            isDashboardAdmin={isDashboardAdmin}
           />
         </EuiPanel>
       )}