diff --git a/changelogs/fragments/7750.yml b/changelogs/fragments/7750.yml
new file mode 100644
index 000000000000..a9ec74c2cdc9
--- /dev/null
+++ b/changelogs/fragments/7750.yml
@@ -0,0 +1,2 @@
+feat:
+- [Workspace]Add right sidebar to workspace create form ([#7750](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7750))
\ No newline at end of file
diff --git a/src/plugins/workspace/public/components/workspace_creator/__snapshots__/workspace_faq_panel.test.tsx.snap b/src/plugins/workspace/public/components/workspace_creator/__snapshots__/workspace_faq_panel.test.tsx.snap
new file mode 100644
index 000000000000..9fe60a2ab6e1
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_creator/__snapshots__/workspace_faq_panel.test.tsx.snap
@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WorkspaceFaqPanel renders correctly 1`] = `
+<div>
+  <div
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned"
+  >
+    <div
+      class="euiCard__content"
+    >
+      <h3
+        class="euiTitle euiTitle--xsmall euiCard__title"
+        id="generated-idTitle"
+      >
+        FAQs
+      </h3>
+      <div
+        class="euiCard__children"
+      >
+        <div
+          class="euiText euiText--extraSmall"
+        >
+          <h4>
+            Can I change the workspace use case later?
+          </h4>
+          <p>
+            You can only change to the All use case after workspace creation.
+          </p>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--s"
+        />
+        <div
+          class="euiSpacer euiSpacer--xs"
+        />
+        <div
+          class="euiText euiText--extraSmall"
+        >
+          <h4>
+            Why can’t I find the data sources I want to attached to the workspace? 
+          </h4>
+          <p>
+            Available data sources to all workspaces here are configured by OpenSearch admin. Contact OpenSearch admin within your organization to add the requested data source. 
+          </p>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--s"
+        />
+        <div
+          class="euiSpacer euiSpacer--xs"
+        />
+        <div
+          class="euiText euiText--extraSmall"
+        >
+          <h4>
+            Do the added team members automatically gain access to the attached data sources?
+          </h4>
+          <p>
+            No. Adding team members will only grant them access to the created workspace. To grant access to the attached data sources, contact the data source admin within your organization.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/plugins/workspace/public/components/workspace_creator/utils.ts b/src/plugins/workspace/public/components/workspace_creator/utils.ts
new file mode 100644
index 000000000000..9be647c1a30b
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_creator/utils.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const RIGHT_SIDEBAR_SCROLL_KEY = 'data-right-sidebar-scroll';
+
+export enum RightSidebarScrollField {
+  Name = 'name',
+  Description = 'description',
+  Color = 'color',
+  UseCase = 'useCase',
+  DataSource = 'dataSource',
+  Member = 'member',
+}
+
+export const generateRightSidebarScrollProps = (key: RightSidebarScrollField) => {
+  return { [RIGHT_SIDEBAR_SCROLL_KEY]: key };
+};
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_create_action_panel.test.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_create_action_panel.test.tsx
similarity index 80%
rename from src/plugins/workspace/public/components/workspace_form/workspace_create_action_panel.test.tsx
rename to src/plugins/workspace/public/components/workspace_creator/workspace_create_action_panel.test.tsx
index 6f1dbc58bf9e..3fd6e78ac7d1 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_create_action_panel.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_create_action_panel.test.tsx
@@ -27,6 +27,7 @@ describe('WorkspaceCreateActionPanel', () => {
         formId={formId}
         formData={{ name: longName, description: formData.description }}
         application={mockApplication}
+        isSubmitting={false}
       />
     );
     const createButton = screen.getByText('Create workspace');
@@ -40,6 +41,7 @@ describe('WorkspaceCreateActionPanel', () => {
         formId={formId}
         formData={{ name: formData.name, description: longDescription }}
         application={mockApplication}
+        isSubmitting={false}
       />
     );
     const createButton = screen.getByText('Create workspace');
@@ -52,9 +54,23 @@ describe('WorkspaceCreateActionPanel', () => {
         formId={formId}
         formData={formData}
         application={mockApplication}
+        isSubmitting={false}
       />
     );
     const createButton = screen.getByText('Create workspace');
     expect(createButton.closest('button')).not.toBeDisabled();
   });
+
+  it('should disable the "Create Workspace" and "Cancel" button when submitting', () => {
+    render(
+      <WorkspaceCreateActionPanel
+        formId={formId}
+        formData={{ name: 'test' }}
+        application={mockApplication}
+        isSubmitting
+      />
+    );
+    expect(screen.getByText('Create workspace').closest('button')).toBeDisabled();
+    expect(screen.getByText('Cancel').closest('button')).toBeDisabled();
+  });
 });
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_create_action_panel.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_create_action_panel.tsx
similarity index 71%
rename from src/plugins/workspace/public/components/workspace_form/workspace_create_action_panel.tsx
rename to src/plugins/workspace/public/components/workspace_creator/workspace_create_action_panel.tsx
index 0b914c0a7658..5f59cbb9587b 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_create_action_panel.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_create_action_panel.tsx
@@ -3,12 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiSmallButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiSmallButton, EuiFlexGroup, EuiFlexItem, EuiSmallButtonEmpty } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React, { useState, useCallback } from 'react';
 import type { ApplicationStart } from 'opensearch-dashboards/public';
-import type { WorkspaceFormData } from './types';
-import { WorkspaceCancelModal } from './workspace_cancel_modal';
+import { WorkspaceFormDataState, WorkspaceCancelModal } from '../workspace_form';
 import {
   MAX_WORKSPACE_DESCRIPTION_LENGTH,
   MAX_WORKSPACE_NAME_LENGTH,
@@ -16,14 +15,16 @@ import {
 
 interface WorkspaceCreateActionPanelProps {
   formId: string;
-  formData: Partial<Pick<WorkspaceFormData, 'name' | 'description'>>;
+  formData: Pick<WorkspaceFormDataState, 'name' | 'description'>;
   application: ApplicationStart;
+  isSubmitting: boolean;
 }
 
 export const WorkspaceCreateActionPanel = ({
   formId,
   formData,
   application,
+  isSubmitting,
 }: WorkspaceCreateActionPanelProps) => {
   const [isCancelModalVisible, setIsCancelModalVisible] = useState(false);
   const closeCancelModal = useCallback(() => setIsCancelModalVisible(false), []);
@@ -34,26 +35,28 @@ export const WorkspaceCreateActionPanel = ({
 
   return (
     <>
-      <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+      <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
-          <EuiSmallButton
+          <EuiSmallButtonEmpty
             data-test-subj="workspaceForm-bottomBar-cancelButton"
             onClick={showCancelModal}
+            disabled={isSubmitting}
           >
-            {i18n.translate('workspace.form.bottomBar.cancel', {
+            {i18n.translate('workspace.form.right.sidebar.buttons.cancelText', {
               defaultMessage: 'Cancel',
             })}
-          </EuiSmallButton>
+          </EuiSmallButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiSmallButton
-            fill
             type="submit"
             form={formId}
             data-test-subj="workspaceForm-bottomBar-createButton"
-            disabled={createButtonDisabled}
+            fill
+            disabled={createButtonDisabled || isSubmitting}
+            isLoading={isSubmitting}
           >
-            {i18n.translate('workspace.form.bottomBar.createWorkspace', {
+            {i18n.translate('workspace.form.right.sidebar.buttons.createWorkspaceText', {
               defaultMessage: 'Create workspace',
             })}
           </EuiSmallButton>
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx
index 760c4060de58..9200ea7cfa07 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx
@@ -344,4 +344,29 @@ describe('WorkspaceCreator', () => {
     });
     expect(notificationToastsAddDanger).not.toHaveBeenCalled();
   });
+
+  it('should not create workspace API when submitting', async () => {
+    workspaceClientCreate.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          setTimeout(resolve, 100);
+        })
+    );
+    const { getByTestId } = render(<WorkspaceCreator />);
+    // Ensure workspace create form rendered
+    await waitFor(() => {
+      expect(getByTestId('workspaceForm-bottomBar-createButton')).toBeInTheDocument();
+    });
+    fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
+    expect(workspaceClientCreate).toHaveBeenCalledTimes(1);
+
+    // Since create button was been disabled, fire form submit event by form directly
+    fireEvent.submit(getByTestId('workspaceCreatorForm'));
+    expect(workspaceClientCreate).toHaveBeenCalledTimes(1);
+
+    await waitFor(() => {
+      fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
+      expect(workspaceClientCreate).toHaveBeenCalledTimes(2);
+    });
+  });
 });
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx
index a7a2b247914a..3ba8b7850753 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx
@@ -3,13 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { EuiPage, EuiPageBody, EuiPageContent, euiPaletteColorBlind } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { BehaviorSubject } from 'rxjs';
 
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
-import { WorkspaceForm, WorkspaceFormSubmitData, WorkspaceOperationType } from '../workspace_form';
+import { WorkspaceFormSubmitData, WorkspaceOperationType } from '../workspace_form';
 import { WORKSPACE_DETAIL_APP_ID } from '../../../common/constants';
 import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
 import { WorkspaceClient } from '../../workspace_client';
@@ -17,10 +17,10 @@ import { convertPermissionSettingsToPermissions } from '../workspace_form';
 import { DataSource } from '../../../common/types';
 import { DataSourceManagementPluginSetup } from '../../../../../plugins/data_source_management/public';
 import { WorkspaceUseCase } from '../../types';
-import { WorkspaceFormData } from '../workspace_form/types';
 import { getUseCaseFeatureConfig } from '../../utils';
 import { useFormAvailableUseCases } from '../workspace_form/use_form_available_use_cases';
 import { NavigationPublicPluginStart } from '../../../../../plugins/navigation/public';
+import { WorkspaceCreatorForm } from './workspace_creator_form';
 
 export interface WorkspaceCreatorProps {
   registeredUseCases$: BehaviorSubject<WorkspaceUseCase[]>;
@@ -43,6 +43,7 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
     dataSourceManagement?: DataSourceManagementPluginSetup;
     navigationUI: NavigationPublicPluginStart['ui'];
   }>();
+  const [isFormSubmitting, setIsFormSubmitting] = useState(false);
 
   const isPermissionEnabled = application?.capabilities.workspaces.permissionEnabled;
   const { isOnlyAllowEssential, availableUseCases } = useFormAvailableUseCases({
@@ -52,7 +53,7 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
   });
 
   const defaultSelectedUseCase = availableUseCases?.[0];
-  const defaultWorkspaceFormValues: Partial<WorkspaceFormData> = {
+  const defaultWorkspaceFormValues: Partial<WorkspaceFormSubmitData> = {
     color: euiPaletteColorBlind()[0],
     ...(defaultSelectedUseCase
       ? {
@@ -65,6 +66,10 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
   const handleWorkspaceFormSubmit = useCallback(
     async (data: WorkspaceFormSubmitData) => {
       let result;
+      if (isFormSubmitting) {
+        return;
+      }
+      setIsFormSubmitting(true);
       try {
         const { permissionSettings, selectedDataSources, ...attributes } = data;
         const selectedDataSourceIds = (selectedDataSources ?? []).map((ds: DataSource) => {
@@ -105,9 +110,11 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
           text: error instanceof Error ? error.message : JSON.stringify(error),
         });
         return;
+      } finally {
+        setIsFormSubmitting(false);
       }
     },
-    [notifications?.toasts, http, application, workspaceClient]
+    [notifications?.toasts, http, application, workspaceClient, isFormSubmitting]
   );
 
   const isFormReadyToRender =
@@ -137,7 +144,7 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
           hasShadow={false}
         >
           {isFormReadyToRender && (
-            <WorkspaceForm
+            <WorkspaceCreatorForm
               application={application}
               savedObjects={savedObjects}
               onSubmit={handleWorkspaceFormSubmit}
@@ -146,6 +153,7 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
               dataSourceManagement={dataSourceManagement}
               availableUseCases={availableUseCases}
               defaultValues={defaultWorkspaceFormValues}
+              isSubmitting={isFormSubmitting}
             />
           )}
         </EuiPageContent>
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.scss b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.scss
new file mode 100644
index 000000000000..010406b8797a
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.scss
@@ -0,0 +1,31 @@
+$workspaceCreateRightSideBarTopOffset: 116px;
+$workspaceCreateRightSideBarBottomOffset: 100px;
+
+.workspaceCreateRightSidebar {
+  position: sticky;
+  top: $workspaceCreateRightSideBarTopOffset;
+  max-height: calc(100vh - $workspaceCreateRightSideBarTopOffset - $workspaceCreateRightSideBarBottomOffset);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+
+  @include ouiBreakpoint("xs","s") {
+    position: static;
+    width: 100%;
+  }
+}
+
+.workspaceCreateRightSideBarContentWrapper {
+  overflow-y: scroll;
+
+  @include ouiBreakpoint("xs","s") {
+    overflow: visible;
+  }
+}
+
+.workspaceCreateRightSideBarActionsWrapper {
+  padding: $ouiSizeM;
+  border-radius: $ouiSizeM;
+  background: $ouiColorEmptyShade;
+}
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_form.test.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.test.tsx
similarity index 89%
rename from src/plugins/workspace/public/components/workspace_form/workspace_form.test.tsx
rename to src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.test.tsx
index 66279a68a1b6..95ca5bf948c5 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_form.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.test.tsx
@@ -8,8 +8,8 @@ import { fireEvent, render } from '@testing-library/react';
 import { coreMock } from '../../../../../core/public/mocks';
 import { DataSourceManagementPluginSetup } from '../../../../../plugins/data_source_management/public';
 import { createMockedRegisteredUseCases } from '../../mocks';
-import { WorkspaceOperationType } from './constants';
-import { WorkspaceForm } from './workspace_form';
+import { WorkspaceOperationType } from '../workspace_form';
+import { WorkspaceCreatorForm } from './workspace_creator_form';
 
 const mockCoreStart = coreMock.createStart();
 
@@ -37,7 +37,8 @@ const setup = (
   };
 
   return render(
-    <WorkspaceForm
+    <WorkspaceCreatorForm
+      isSubmitting={false}
       application={application}
       savedObjects={savedObjects}
       operationType={WorkspaceOperationType.Create}
@@ -53,13 +54,13 @@ describe('WorkspaceForm', () => {
   it('should enable data source panel for dashboard admin and when data source is enabled', () => {
     const { getByText } = setup(true, mockDataSourceManagementSetup);
 
-    expect(getByText('Associate data source')).toBeInTheDocument();
+    expect(getByText('Associate data sources')).toBeInTheDocument();
   });
 
   it('should not display data source panel for non dashboard admin', () => {
     const { queryByText } = setup(false, mockDataSourceManagementSetup);
 
-    expect(queryByText('Associate data source')).not.toBeInTheDocument();
+    expect(queryByText('Associate data sources')).not.toBeInTheDocument();
   });
 
   it('should not display data source panel when data source is disabled', () => {
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx
new file mode 100644
index 000000000000..9ab0a35e722b
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx
@@ -0,0 +1,236 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useRef } from 'react';
+import {
+  EuiSpacer,
+  EuiTitle,
+  EuiForm,
+  EuiText,
+  EuiCompressedFormRow,
+  EuiColorPicker,
+  EuiFlexItem,
+  EuiFlexGroup,
+} from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import {
+  useWorkspaceForm,
+  WorkspacePermissionSettingPanel,
+  WorkspaceUseCase,
+  WorkspaceFormErrorCallout,
+  SelectDataSourcePanel,
+  usersAndPermissionsCreatePageTitle,
+  WorkspaceFormProps,
+  WorkspaceNameField,
+  WorkspaceDescriptionField,
+} from '../workspace_form';
+
+import { WorkspaceCreateActionPanel } from './workspace_create_action_panel';
+import { WorkspaceFaqPanel } from './workspace_faq_panel';
+import { WorkspaceFormSummaryPanel } from './workspace_form_summary_panel';
+import { generateRightSidebarScrollProps, RightSidebarScrollField } from './utils';
+
+import './workspace_creator_form.scss';
+
+interface WorkspaceCreatorFormProps extends WorkspaceFormProps {
+  isSubmitting: boolean;
+}
+
+export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
+  const {
+    application,
+    savedObjects,
+    defaultValues,
+    permissionEnabled,
+    dataSourceManagement: isDataSourceEnabled,
+    availableUseCases,
+  } = props;
+  const {
+    formId,
+    formData,
+    formErrors,
+    numberOfErrors,
+    setName,
+    setDescription,
+    handleFormSubmit,
+    handleColorChange,
+    handleUseCaseChange: handleUseCaseChangeInHook,
+    setPermissionSettings,
+    setSelectedDataSources,
+  } = useWorkspaceForm(props);
+  const nameManualChangedRef = useRef(false);
+
+  const disabledUserOrGroupInputIdsRef = useRef(
+    defaultValues?.permissionSettings?.map((item) => item.id) ?? []
+  );
+  const isDashboardAdmin = application?.capabilities?.dashboards?.isDashboardAdmin ?? false;
+  const handleNameInputChange = useCallback(
+    (newName) => {
+      setName(newName);
+      nameManualChangedRef.current = true;
+    },
+    [setName]
+  );
+  const handleUseCaseChange = useCallback(
+    (newUseCase) => {
+      handleUseCaseChangeInHook(newUseCase);
+      const useCase = availableUseCases.find((item) => newUseCase === item.id);
+      if (!nameManualChangedRef.current && useCase) {
+        setName(useCase.title);
+      }
+    },
+    [handleUseCaseChangeInHook, availableUseCases, setName]
+  );
+
+  return (
+    <EuiFlexGroup className="workspaceCreateFormContainer">
+      <EuiFlexItem style={{ maxWidth: 650 }}>
+        <EuiForm
+          id={formId}
+          onSubmit={handleFormSubmit}
+          component="form"
+          data-test-subj="workspaceCreatorForm"
+        >
+          {numberOfErrors > 0 && (
+            <>
+              <WorkspaceFormErrorCallout errors={formErrors} />
+              <EuiSpacer />
+            </>
+          )}
+          <EuiTitle size="xs">
+            <h3>
+              {i18n.translate('workspace.creator.form.customizeTitle', {
+                defaultMessage: 'Customize the workspace',
+              })}
+            </h3>
+          </EuiTitle>
+          <div {...generateRightSidebarScrollProps(RightSidebarScrollField.UseCase)}>
+            <WorkspaceUseCase
+              value={formData.useCase}
+              onChange={handleUseCaseChange}
+              formErrors={formErrors}
+              availableUseCases={availableUseCases}
+            />
+          </div>
+          <EuiSpacer size="m" />
+          <div {...generateRightSidebarScrollProps(RightSidebarScrollField.Name)} />
+          <WorkspaceNameField
+            value={formData.name}
+            onChange={handleNameInputChange}
+            error={formErrors.name?.message}
+          />
+          <EuiSpacer size="m" />
+          <div {...generateRightSidebarScrollProps(RightSidebarScrollField.Description)} />
+          <WorkspaceDescriptionField
+            value={formData.description}
+            onChange={setDescription}
+            error={formErrors.name?.message}
+          />
+          <EuiSpacer size="m" />
+          <EuiCompressedFormRow
+            label={i18n.translate('workspace.form.workspaceDetails.color.label', {
+              defaultMessage: 'Workspace icon color',
+            })}
+            isInvalid={!!formErrors.color}
+            error={formErrors.color?.message}
+            {...generateRightSidebarScrollProps(RightSidebarScrollField.Color)}
+          >
+            <div>
+              <EuiText size="xs" color="subdued">
+                {i18n.translate('workspace.form.workspaceDetails.color.description', {
+                  defaultMessage:
+                    'Select a background color for the icon representing this workspace.',
+                })}
+              </EuiText>
+              <EuiSpacer size={'s'} />
+              <EuiColorPicker
+                color={formData.color}
+                onChange={handleColorChange}
+                data-test-subj="workspaceForm-workspaceDetails-colorPicker"
+              />
+            </div>
+          </EuiCompressedFormRow>
+          <EuiSpacer />
+          {/* SelectDataSourcePanel is only visible for dashboard admin and when data source is enabled*/}
+          {isDashboardAdmin && isDataSourceEnabled && (
+            <>
+              <EuiTitle
+                {...generateRightSidebarScrollProps(RightSidebarScrollField.DataSource)}
+                size="s"
+              >
+                <h3>
+                  {i18n.translate('workspace.creator.form.associateDataSourceTitle', {
+                    defaultMessage: 'Associate data sources',
+                  })}
+                </h3>
+              </EuiTitle>
+              <EuiText size="xs">
+                {i18n.translate('workspace.creator.form.associateDataSourceDescription', {
+                  defaultMessage:
+                    'Add data sources that will be available in the workspace. If a selected OpenSearch connection has embedded Direct Query connection, they will also be available in the workspace.',
+                })}
+              </EuiText>
+              <SelectDataSourcePanel
+                errors={formErrors.selectedDataSources}
+                onChange={setSelectedDataSources}
+                savedObjects={savedObjects}
+                selectedDataSources={formData.selectedDataSources}
+                data-test-subj={`workspaceForm-dataSourcePanel`}
+              />
+              <EuiSpacer size="s" />
+              <EuiSpacer size="s" />
+            </>
+          )}
+          {permissionEnabled && (
+            <>
+              <EuiTitle
+                {...generateRightSidebarScrollProps(RightSidebarScrollField.Member)}
+                size="s"
+              >
+                <h3>{usersAndPermissionsCreatePageTitle}</h3>
+              </EuiTitle>
+              <EuiText size="xs">
+                {i18n.translate('workspace.creator.form.usersAndPermissionsDescription', {
+                  defaultMessage:
+                    'You will be added as an owner to the workspace. Select additional users and user groups as workspace collaborators with different access levels.',
+                })}
+              </EuiText>
+              <EuiSpacer size="m" />
+              <WorkspacePermissionSettingPanel
+                errors={formErrors.permissionSettings?.fields}
+                onChange={setPermissionSettings}
+                permissionSettings={formData.permissionSettings}
+                disabledUserOrGroupInputIds={disabledUserOrGroupInputIdsRef.current}
+                data-test-subj={`workspaceForm-permissionSettingPanel`}
+              />
+            </>
+          )}
+        </EuiForm>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <div className="workspaceCreateRightSidebar">
+          <div className="workspaceCreateRightSideBarContentWrapper">
+            <WorkspaceFaqPanel />
+            <EuiSpacer size="m" />
+            <WorkspaceFormSummaryPanel
+              formData={formData}
+              availableUseCases={availableUseCases}
+              permissionEnabled={permissionEnabled}
+            />
+          </div>
+          <EuiSpacer size="m" />
+          <div className="workspaceCreateRightSideBarActionsWrapper">
+            <WorkspaceCreateActionPanel
+              formData={formData}
+              formId={formId}
+              application={application}
+              isSubmitting={props.isSubmitting}
+            />
+          </div>
+        </div>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_faq_panel.test.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_faq_panel.test.tsx
new file mode 100644
index 000000000000..e8d737b32242
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_faq_panel.test.tsx
@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { WorkspaceFaqPanel } from './workspace_faq_panel';
+
+describe('WorkspaceFaqPanel', () => {
+  it('renders correctly', () => {
+    const tree = render(<WorkspaceFaqPanel />);
+    expect(tree.container).toMatchSnapshot();
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_faq_panel.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_faq_panel.tsx
new file mode 100644
index 000000000000..218e9a7618cf
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_faq_panel.tsx
@@ -0,0 +1,72 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiCard, EuiSpacer, EuiText } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+const WorkspaceFaqItem = ({ question, answer }: { question: string; answer: string }) => {
+  return (
+    <EuiText size="xs">
+      <h4>{question}</h4>
+      <p>{answer}</p>
+    </EuiText>
+  );
+};
+
+const FAQs = [
+  {
+    question: i18n.translate('workspace.form.faq.panel.question1', {
+      defaultMessage: 'Can I change the workspace use case later?',
+    }),
+    answer: i18n.translate('workspace.form.faq.panel.answer1', {
+      defaultMessage: 'You can only change to the All use case after workspace creation.',
+    }),
+  },
+  {
+    question: i18n.translate('workspace.form.faq.panel.question2', {
+      defaultMessage: 'Why can’t I find the data sources I want to attached to the workspace? ',
+    }),
+    answer: i18n.translate('workspace.form.faq.panel.answer2', {
+      defaultMessage:
+        'Available data sources to all workspaces here are configured by OpenSearch admin. Contact OpenSearch admin within your organization to add the requested data source. ',
+    }),
+  },
+  {
+    question: i18n.translate('workspace.form.faq.panel.question3', {
+      defaultMessage:
+        'Do the added team members automatically gain access to the attached data sources?',
+    }),
+    answer: i18n.translate('workspace.form.faq.panel.answer3', {
+      defaultMessage:
+        'No. Adding team members will only grant them access to the created workspace. To grant access to the attached data sources, contact the data source admin within your organization.',
+    }),
+  },
+];
+
+export const WorkspaceFaqPanel = () => {
+  return (
+    <EuiCard
+      title={i18n.translate('workspace.form.faq.panel.title', {
+        defaultMessage: 'FAQs',
+      })}
+      textAlign="left"
+      titleSize="xs"
+      titleElement="h3"
+    >
+      {FAQs.map(({ question, answer }, index) => (
+        <React.Fragment key={index}>
+          <WorkspaceFaqItem question={question} answer={answer} />
+          {index !== FAQs.length - 1 && (
+            <>
+              <EuiSpacer size="s" />
+              <EuiSpacer size="xs" />
+            </>
+          )}
+        </React.Fragment>
+      ))}
+    </EuiCard>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.test.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.test.tsx
new file mode 100644
index 000000000000..4db2d9365ab9
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.test.tsx
@@ -0,0 +1,182 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import {
+  WorkspaceFormSummaryPanel,
+  ExpandableTextList,
+  FieldSummaryItem,
+} from './workspace_form_summary_panel';
+import { RightSidebarScrollField } from './utils';
+import { WorkspacePermissionItemType } from '../workspace_form';
+
+describe('WorkspaceFormSummaryPanel', () => {
+  const formData = {
+    features: [],
+    useCase: 'useCase1',
+    name: 'Test Workspace',
+    description: 'This is a test workspace',
+    color: '#000000',
+    selectedDataSources: [
+      { id: 'data-source-1', title: 'Data Source 1' },
+      { id: 'data-source-2', title: 'Data Source 2' },
+      { id: 'data-source-3', title: 'Data Source 3' },
+    ],
+    permissionSettings: [
+      { id: 1, type: WorkspacePermissionItemType.User, userId: 'user1' },
+      { id: 2, type: WorkspacePermissionItemType.Group, group: 'group1' },
+      { id: 3, type: WorkspacePermissionItemType.User, userId: 'user2' },
+    ],
+  };
+
+  const availableUseCases = [
+    {
+      id: 'useCase1',
+      title: 'Use Case 1',
+      description: 'This is Use Case 1',
+      features: [],
+    },
+    {
+      id: 'useCase2',
+      title: 'Use Case 2',
+      description: 'This is Use Case 2',
+      features: [],
+    },
+  ];
+
+  it('renders summary panel with correct data', () => {
+    render(
+      <WorkspaceFormSummaryPanel
+        formData={formData}
+        availableUseCases={availableUseCases}
+        permissionEnabled
+      />
+    );
+
+    expect(screen.getByText('Summary')).toBeInTheDocument();
+    expect(screen.getByText('Use Case 1')).toBeInTheDocument();
+    expect(screen.getByText('This is Use Case 1')).toBeInTheDocument();
+    expect(screen.getByText('Test Workspace')).toBeInTheDocument();
+    expect(screen.getByText('This is a test workspace')).toBeInTheDocument();
+    expect(screen.getByText('#000000')).toBeInTheDocument();
+    expect(screen.getByText('Data Source 1')).toBeInTheDocument();
+    expect(screen.getByText('user1')).toBeInTheDocument();
+    expect(screen.getByText('group1')).toBeInTheDocument();
+    expect(screen.queryByText('user2')).toBeNull();
+  });
+
+  it('renders placeholders for empty form data', () => {
+    render(
+      <WorkspaceFormSummaryPanel
+        formData={{
+          name: '',
+          selectedDataSources: [],
+          permissionSettings: [],
+          features: [],
+          useCase: undefined,
+        }}
+        availableUseCases={availableUseCases}
+        permissionEnabled
+      />
+    );
+
+    expect(screen.getByText('Summary')).toBeInTheDocument();
+
+    // Use case placeholder
+    const useCasePlaceholder = screen.getByTestId('workspaceFormRightSideBarSummary-useCase-Value');
+    expect(useCasePlaceholder).toHaveTextContent('—');
+
+    // Name placeholder
+    const namePlaceholder = screen.getByTestId('workspaceFormRightSideBarSummary-name-Value');
+    expect(namePlaceholder).toHaveTextContent('—');
+
+    // Description placeholder
+    const descriptionPlaceholder = screen.getByTestId(
+      'workspaceFormRightSideBarSummary-description-Value'
+    );
+    expect(descriptionPlaceholder).toHaveTextContent('—');
+
+    // Color placeholder
+    const colorPlaceholder = screen.getByTestId('workspaceFormRightSideBarSummary-color-Value');
+    expect(colorPlaceholder).toHaveTextContent('—');
+
+    // Data sources placeholder
+    const dataSourcesPlaceholder = screen.getByTestId(
+      'workspaceFormRightSideBarSummary-dataSource-Value'
+    );
+    expect(dataSourcesPlaceholder).toHaveTextContent('—');
+
+    // Permissions placeholder
+    const permissionsPlaceholder = screen.getByTestId(
+      'workspaceFormRightSideBarSummary-member-Value'
+    );
+    expect(permissionsPlaceholder).toHaveTextContent('—');
+  });
+});
+
+describe('ExpandableTextList', () => {
+  it('renders all texts when expanded', () => {
+    const texts = ['Text 1', 'Text 2', 'Text 3', 'Text 4'];
+    render(<ExpandableTextList texts={texts} collapseDisplayCount={2} />);
+
+    expect(screen.getByText('Text 1')).toBeInTheDocument();
+    expect(screen.getByText('Text 2')).toBeInTheDocument();
+    expect(screen.queryByText('Text 3')).not.toBeInTheDocument();
+    expect(screen.queryByText('Text 4')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Show all'));
+
+    expect(screen.getByText('Text 3')).toBeInTheDocument();
+    expect(screen.getByText('Text 4')).toBeInTheDocument();
+  });
+  it('should not show "Show all" button when all texts can be displayed', () => {
+    const texts = ['Text 1', 'Text 2'];
+    render(<ExpandableTextList texts={texts} collapseDisplayCount={3} />);
+
+    expect(screen.getByText('Text 1')).toBeInTheDocument();
+    expect(screen.getByText('Text 2')).toBeInTheDocument();
+    expect(screen.queryByText('Show all')).not.toBeInTheDocument();
+  });
+});
+
+describe('FieldSummaryItem', () => {
+  it('renders title and content correctly', () => {
+    render(
+      <FieldSummaryItem field={RightSidebarScrollField.Name}>Content for Name</FieldSummaryItem>
+    );
+
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Content for Name')).toBeInTheDocument();
+  });
+
+  it('renders placeholder when no content is provided', () => {
+    render(<FieldSummaryItem field={RightSidebarScrollField.Name} />);
+
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('—')).toBeInTheDocument();
+  });
+
+  it('scrolls to the corresponding field when title is clicked', () => {
+    const originScrollIntoView = window.HTMLElement.prototype.scrollIntoView;
+    const scrollIntoViewMock = jest.fn();
+    window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+
+    render(
+      <div className="workspaceCreateFormContainer">
+        <div data-right-sidebar-scroll="name" />
+        <FieldSummaryItem field={RightSidebarScrollField.Name}>Content for Name</FieldSummaryItem>
+      </div>
+    );
+
+    fireEvent.click(screen.getByText('Name'));
+
+    expect(scrollIntoViewMock).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      block: 'center',
+    });
+    window.HTMLElement.prototype.scrollIntoView = originScrollIntoView;
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx
new file mode 100644
index 000000000000..a16cad76ede7
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx
@@ -0,0 +1,193 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useState } from 'react';
+import {
+  EuiCard,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiSpacer,
+  EuiText,
+  EuiTextColor,
+  EuiLink,
+} from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { WorkspaceFormDataState } from '../forms';
+import { WorkspaceUseCase } from '../../types';
+import { RightSidebarScrollField, RIGHT_SIDEBAR_SCROLL_KEY } from './utils';
+
+const SCROLL_FIELDS = {
+  [RightSidebarScrollField.UseCase]: i18n.translate('workspace.form.summary.panel.useCase.title', {
+    defaultMessage: 'Use case',
+  }),
+  [RightSidebarScrollField.Name]: i18n.translate('workspace.form.summary.panel.name.title', {
+    defaultMessage: 'Name',
+  }),
+  [RightSidebarScrollField.Description]: i18n.translate(
+    'workspace.form.summary.panel.description.title',
+    {
+      defaultMessage: 'Description',
+    }
+  ),
+  [RightSidebarScrollField.Color]: i18n.translate('workspace.form.summary.panel.color.title', {
+    defaultMessage: 'Accent color',
+  }),
+  [RightSidebarScrollField.DataSource]: i18n.translate(
+    'workspace.form.summary.panel.dataSources.title',
+    {
+      defaultMessage: 'Data sources',
+    }
+  ),
+  [RightSidebarScrollField.Member]: i18n.translate('workspace.form.summary.panel.members.title', {
+    defaultMessage: 'Members',
+  }),
+};
+
+export const FieldSummaryItem = ({
+  field,
+  children,
+  bottomGap = true,
+}: React.PropsWithChildren<{
+  field: RightSidebarScrollField;
+  bottomGap?: boolean;
+}>) => {
+  const handleTitleClick = useCallback(() => {
+    const element = document.querySelector(
+      `.workspaceCreateFormContainer [${RIGHT_SIDEBAR_SCROLL_KEY}="${field}"]`
+    );
+
+    element?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }, [field]);
+
+  return (
+    <>
+      <EuiText size="xs">
+        <h5>
+          <EuiLink color="text" onClick={handleTitleClick}>
+            <u>{SCROLL_FIELDS[field]}</u>
+          </EuiLink>
+        </h5>
+      </EuiText>
+      <EuiSpacer size="xs" />
+      <EuiText data-test-subj={`workspaceFormRightSideBarSummary-${field}-Value`} size="xs">
+        {!!children ? children : <EuiTextColor color="subdued">&mdash;</EuiTextColor>}
+      </EuiText>
+      {bottomGap && (
+        <>
+          <EuiSpacer size="s" />
+          <EuiSpacer size="xs" />
+        </>
+      )}
+    </>
+  );
+};
+
+export const ExpandableTextList = ({
+  texts,
+  collapseDisplayCount,
+}: {
+  texts: string[];
+  collapseDisplayCount: number;
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const uniqueTexts = Array.from(new Set(texts));
+  const displayedTexts = isExpanded ? uniqueTexts : uniqueTexts.slice(0, collapseDisplayCount);
+  return (
+    <>
+      {displayedTexts.map((text) => (
+        <EuiText size="xs" key={text}>
+          {text}
+        </EuiText>
+      ))}
+      {uniqueTexts.length > collapseDisplayCount && (
+        <EuiLink
+          onClick={() => {
+            setIsExpanded((flag) => !flag);
+          }}
+        >
+          {isExpanded
+            ? i18n.translate('workspace.form.summary.members.showLess', {
+                defaultMessage: 'Show less',
+              })
+            : i18n.translate('workspace.form.summary.members.showAll', {
+                defaultMessage: 'Show all',
+              })}
+        </EuiLink>
+      )}
+    </>
+  );
+};
+
+interface WorkspaceFormSummaryPanelProps {
+  formData: WorkspaceFormDataState;
+  availableUseCases: WorkspaceUseCase[];
+  permissionEnabled?: boolean;
+}
+
+export const WorkspaceFormSummaryPanel = ({
+  formData,
+  availableUseCases,
+  permissionEnabled,
+}: WorkspaceFormSummaryPanelProps) => {
+  const useCase = availableUseCases.find((item) => item.id === formData.useCase);
+  const userAndGroups = formData.permissionSettings.flatMap((setting) => {
+    if ('userId' in setting && !!setting.userId) {
+      return [setting.userId];
+    }
+    if ('group' in setting && !!setting.group) {
+      return [setting.group];
+    }
+    return [];
+  });
+
+  return (
+    <EuiCard
+      title={i18n.translate('workspace.form.summary.panel.title', { defaultMessage: 'Summary' })}
+      textAlign="left"
+      titleSize="xs"
+    >
+      <FieldSummaryItem field={RightSidebarScrollField.UseCase}>
+        {useCase && (
+          <>
+            <EuiText size="xs">{useCase.title}</EuiText>
+            <EuiText size="xs">{useCase.description}</EuiText>
+          </>
+        )}
+      </FieldSummaryItem>
+      <FieldSummaryItem field={RightSidebarScrollField.Name}>{formData.name}</FieldSummaryItem>
+      <FieldSummaryItem field={RightSidebarScrollField.Description}>
+        {formData.description?.trim()}
+      </FieldSummaryItem>
+      <FieldSummaryItem field={RightSidebarScrollField.Color}>
+        {formData.color && (
+          <EuiFlexGroup gutterSize="xs" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiIcon type="swatchInput" color={formData.color} />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiText size="xs">{formData.color}</EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        )}
+      </FieldSummaryItem>
+      <FieldSummaryItem field={RightSidebarScrollField.DataSource}>
+        {formData.selectedDataSources.length > 0 && (
+          <ExpandableTextList
+            texts={formData.selectedDataSources.map(({ title }) => title)}
+            collapseDisplayCount={2}
+          />
+        )}
+      </FieldSummaryItem>
+      {permissionEnabled && (
+        <FieldSummaryItem bottomGap={false} field={RightSidebarScrollField.Member}>
+          {userAndGroups.length > 0 && (
+            <ExpandableTextList texts={userAndGroups} collapseDisplayCount={2} />
+          )}
+        </FieldSummaryItem>
+      )}
+    </EuiCard>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_form/fields/index.ts b/src/plugins/workspace/public/components/workspace_form/fields/index.ts
new file mode 100644
index 000000000000..f9217e910213
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/fields/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { WorkspaceDescriptionField } from './workspace_description_field';
+export { WorkspaceNameField } from './workspace_name_field';
diff --git a/src/plugins/workspace/public/components/workspace_form/index.ts b/src/plugins/workspace/public/components/workspace_form/index.ts
index 42164ca530e2..3c493bf4aa3c 100644
--- a/src/plugins/workspace/public/components/workspace_form/index.ts
+++ b/src/plugins/workspace/public/components/workspace_form/index.ts
@@ -3,12 +3,30 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { WorkspaceForm } from './workspace_form';
 export { WorkspaceDetailForm } from './workspace_detail_form';
-export { WorkspaceFormSubmitData } from './types';
-export { WorkspaceOperationType } from './constants';
+export { SelectDataSourcePanel } from './select_data_source_panel';
+export { WorkspaceFormErrorCallout } from './workspace_form_error_callout';
+export { WorkspaceUseCase } from './workspace_use_case';
+export { WorkspacePermissionSettingPanel } from './workspace_permission_setting_panel';
+export { WorkspaceCancelModal } from './workspace_cancel_modal';
+export { WorkspaceNameField, WorkspaceDescriptionField } from './fields';
+
+export { WorkspaceFormSubmitData, WorkspaceFormProps, WorkspaceFormDataState } from './types';
+export {
+  WorkspaceOperationType,
+  DetailTab,
+  DetailTabTitles,
+  WorkspacePermissionItemType,
+  usersAndPermissionsCreatePageTitle,
+  selectDataSourceTitle,
+  workspaceDetailsTitle,
+  workspaceUseCaseTitle,
+} from './constants';
 export {
   convertPermissionsToPermissionSettings,
   convertPermissionSettingsToPermissions,
 } from './utils';
+
 export { WorkspaceFormProvider, useWorkspaceFormContext } from './workspace_form_context';
+export { useWorkspaceForm } from './use_workspace_form';
+export { useFormAvailableUseCases } from './use_form_available_use_cases';
diff --git a/src/plugins/workspace/public/components/workspace_form/types.ts b/src/plugins/workspace/public/components/workspace_form/types.ts
index 5ec929e17b0c..2625047c2b69 100644
--- a/src/plugins/workspace/public/components/workspace_form/types.ts
+++ b/src/plugins/workspace/public/components/workspace_form/types.ts
@@ -31,17 +31,12 @@ export type WorkspacePermissionSetting =
 export interface WorkspaceFormSubmitData {
   name: string;
   description?: string;
-  features?: string[];
+  features: string[];
   color?: string;
   permissionSettings?: WorkspacePermissionSetting[];
   selectedDataSources?: DataSource[];
 }
 
-export interface WorkspaceFormData extends WorkspaceFormSubmitData {
-  id: string;
-  reserved?: boolean;
-}
-
 export enum WorkspaceFormErrorCode {
   InvalidWorkspaceName,
   WorkspaceNameMissing,
@@ -65,7 +60,7 @@ export interface WorkspaceFormError {
 
 export type WorkspaceFormErrors = {
   [key in keyof Omit<
-    WorkspaceFormData,
+    WorkspaceFormSubmitData,
     'permissionSettings' | 'description' | 'selectedDataSources'
   >]?: WorkspaceFormError;
 } & {
@@ -80,20 +75,24 @@ export interface WorkspaceFormProps {
   application: ApplicationStart;
   savedObjects: SavedObjectsStart;
   onSubmit?: (formData: WorkspaceFormSubmitData) => void;
-  defaultValues?: Partial<WorkspaceFormData>;
+  defaultValues?: Partial<WorkspaceFormSubmitData>;
   operationType: WorkspaceOperationType;
   permissionEnabled?: boolean;
-  detailTab?: DetailTab;
   dataSourceManagement?: DataSourceManagementPluginSetup;
   availableUseCases: WorkspaceUseCase[];
-  detailTitle?: string;
-}
-
-export interface WorkspaceDetailedFormProps extends WorkspaceFormProps {
-  defaultValues?: WorkspaceFormData;
 }
 
 export interface AvailableUseCaseItem
   extends Pick<WorkspaceUseCase, 'id' | 'title' | 'features' | 'description' | 'systematic'> {
   disabled?: boolean;
 }
+
+export interface WorkspaceFormDataState
+  extends Omit<WorkspaceFormSubmitData, 'name' | 'permissionSettings'> {
+  name: string;
+  useCase: string | undefined;
+  selectedDataSources: DataSource[];
+  permissionSettings: Array<
+    Pick<WorkspacePermissionSetting, 'id'> & Partial<WorkspacePermissionSetting>
+  >;
+}
diff --git a/src/plugins/workspace/public/components/workspace_form/use_workspace_form.test.ts b/src/plugins/workspace/public/components/workspace_form/use_workspace_form.test.ts
index 6e25c81d4440..078ce9af3e45 100644
--- a/src/plugins/workspace/public/components/workspace_form/use_workspace_form.test.ts
+++ b/src/plugins/workspace/public/components/workspace_form/use_workspace_form.test.ts
@@ -8,10 +8,10 @@ import { renderHook, act } from '@testing-library/react-hooks';
 import { applicationServiceMock } from '../../../../../core/public/mocks';
 import { WorkspacePermissionMode } from '../../../common/constants';
 import { WorkspaceOperationType, WorkspacePermissionItemType } from './constants';
-import { WorkspaceFormData, WorkspaceFormErrorCode } from './types';
+import { WorkspaceFormSubmitData, WorkspaceFormErrorCode } from './types';
 import { useWorkspaceForm } from './use_workspace_form';
 
-const setup = (defaultValues?: WorkspaceFormData, permissionEnabled = false) => {
+const setup = (defaultValues?: WorkspaceFormSubmitData, permissionEnabled = false) => {
   const onSubmitMock = jest.fn();
   const renderResult = renderHook(useWorkspaceForm, {
     initialProps: {
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..55f5c5af1607 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
@@ -13,7 +13,12 @@ import {
   isUseCaseFeatureConfig,
 } from '../../utils';
 import { DataSource } from '../../../common/types';
-import { WorkspaceFormProps, WorkspaceFormErrors, WorkspacePermissionSetting } from './types';
+import {
+  WorkspaceFormProps,
+  WorkspaceFormErrors,
+  WorkspacePermissionSetting,
+  WorkspaceFormDataState,
+} from './types';
 import {
   generatePermissionSettingsState,
   getNumberOfChanges,
@@ -46,7 +51,7 @@ export const useWorkspaceForm = ({
     featureConfigs,
   ]);
   const [permissionSettings, setPermissionSettings] = useState<
-    Array<Pick<WorkspacePermissionSetting, 'id'> & Partial<WorkspacePermissionSetting>>
+    WorkspaceFormDataState['permissionSettings']
   >(initialPermissionSettingsRef.current);
 
   const [selectedDataSources, setSelectedDataSources] = useState<DataSource[]>(
@@ -58,7 +63,7 @@ export const useWorkspaceForm = ({
   const [formErrors, setFormErrors] = useState<WorkspaceFormErrors>({});
   const numberOfErrors = useMemo(() => getNumberOfErrors(formErrors), [formErrors]);
   const formIdRef = useRef<string>();
-  const getFormData = () => ({
+  const getFormData = (): WorkspaceFormDataState => ({
     name,
     description,
     features: featureConfigs,
diff --git a/src/plugins/workspace/public/components/workspace_form/utils.ts b/src/plugins/workspace/public/components/workspace_form/utils.ts
index 04c1f3772600..bd45cf6a901f 100644
--- a/src/plugins/workspace/public/components/workspace_form/utils.ts
+++ b/src/plugins/workspace/public/components/workspace_form/utils.ts
@@ -16,7 +16,7 @@ import {
 } from './constants';
 
 import {
-  WorkspaceFormData,
+  WorkspaceFormDataState,
   WorkspaceFormError,
   WorkspaceFormErrorCode,
   WorkspaceFormErrors,
@@ -295,11 +295,7 @@ export const isSelectedDataSourcesDuplicated = (
 ) => selectedDataSources.some((ds) => ds.id === row.id);
 
 export const validateWorkspaceForm = (
-  formData: Omit<Partial<WorkspaceFormSubmitData>, 'permissionSettings'> & {
-    permissionSettings?: Array<
-      Pick<WorkspacePermissionSetting, 'id'> & Partial<WorkspacePermissionSetting>
-    >;
-  },
+  formData: Partial<WorkspaceFormDataState>,
   isPermissionEnabled: boolean
 ) => {
   const formErrors: WorkspaceFormErrors = {};
@@ -452,12 +448,8 @@ const isSamePermissionSetting = (a: PermissionSettingLike, b: PermissionSettingL
 };
 
 export const getNumberOfChanges = (
-  newFormData: Partial<Omit<WorkspaceFormSubmitData, 'permissionSettings'>> & {
-    permissionSettings?: Array<
-      Pick<WorkspacePermissionSetting, 'id'> & Partial<WorkspacePermissionSetting>
-    >;
-  },
-  initialFormData: Partial<Omit<WorkspaceFormData, 'id'>>
+  newFormData: Partial<WorkspaceFormDataState>,
+  initialFormData: Partial<WorkspaceFormSubmitData>
 ) => {
   let count = 0;
   if (newFormData.name !== initialFormData.name) {
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_detail_form.tsx
index bc3ce92067ff..8b037a99ea63 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_detail_form.tsx
@@ -50,7 +50,12 @@ const FormGroup = ({ title, children, describe }: FormGroupProps) => (
   </>
 );
 
-export const WorkspaceDetailForm = (props: WorkspaceFormProps) => {
+interface WorkspaceDetailedFormProps extends WorkspaceFormProps {
+  detailTab?: DetailTab;
+  detailTitle?: string;
+}
+
+export const WorkspaceDetailForm = (props: WorkspaceDetailedFormProps) => {
   const { detailTab, detailTitle, defaultValues, availableUseCases } = props;
   const {
     formId,
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_enter_details_panel.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_enter_details_panel.tsx
deleted file mode 100644
index 0bd172e6c47a..000000000000
--- a/src/plugins/workspace/public/components/workspace_form/workspace_enter_details_panel.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { EuiColorPicker, EuiCompressedFormRow, EuiSpacer, EuiText } from '@elastic/eui';
-import { i18n } from '@osd/i18n';
-import React from 'react';
-import { EuiColorPickerOutput } from '@elastic/eui/src/components/color_picker/color_picker';
-import { WorkspaceFormErrors } from './types';
-import { WorkspaceNameField } from './fields/workspace_name_field';
-import { WorkspaceDescriptionField } from './fields/workspace_description_field';
-
-export interface EnterDetailsPanelProps {
-  formErrors: WorkspaceFormErrors;
-  name?: string;
-  description?: string;
-  color?: string;
-  readOnly: boolean;
-  onNameChange: (newValue: string) => void;
-  onDescriptionChange: (newValue: string) => void;
-  handleColorChange: (text: string, output: EuiColorPickerOutput) => void;
-}
-
-export const EnterDetailsPanel = ({
-  formErrors,
-  name,
-  description,
-  color,
-  readOnly,
-  onNameChange,
-  onDescriptionChange,
-  handleColorChange,
-}: EnterDetailsPanelProps) => {
-  return (
-    <>
-      <WorkspaceNameField
-        value={name}
-        onChange={onNameChange}
-        readOnly={readOnly}
-        error={formErrors.name?.message}
-      />
-      <WorkspaceDescriptionField
-        value={description}
-        onChange={onDescriptionChange}
-        readOnly={readOnly}
-        error={formErrors.name?.message}
-      />
-      <EuiCompressedFormRow
-        label={i18n.translate('workspace.form.workspaceDetails.color.label', {
-          defaultMessage: 'Workspace icon color',
-        })}
-        isInvalid={!!formErrors.color}
-        error={formErrors.color?.message}
-      >
-        <div>
-          <EuiText size="xs" color="subdued">
-            {i18n.translate('workspace.form.workspaceDetails.color.description', {
-              defaultMessage: 'Select a background color for the icon representing this workspace.',
-            })}
-          </EuiText>
-          <EuiSpacer size={'s'} />
-          <EuiColorPicker
-            color={color}
-            onChange={handleColorChange}
-            data-test-subj="workspaceForm-workspaceDetails-colorPicker"
-          />
-        </div>
-      </EuiCompressedFormRow>
-    </>
-  );
-};
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx
deleted file mode 100644
index f21a800a8357..000000000000
--- a/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React, { useCallback, useRef } from 'react';
-import { EuiPanel, EuiSpacer, EuiTitle, EuiForm, EuiText } from '@elastic/eui';
-import { i18n } from '@osd/i18n';
-import { WorkspaceFormProps } from './types';
-import { useWorkspaceForm } from './use_workspace_form';
-import { WorkspacePermissionSettingPanel } from './workspace_permission_setting_panel';
-import { WorkspaceUseCase } from './workspace_use_case';
-import { WorkspaceFormErrorCallout } from './workspace_form_error_callout';
-import { WorkspaceCreateActionPanel } from './workspace_create_action_panel';
-import { SelectDataSourcePanel } from './select_data_source_panel';
-import { EnterDetailsPanel } from './workspace_enter_details_panel';
-import {
-  selectDataSourceTitle,
-  usersAndPermissionsCreatePageTitle,
-  workspaceDetailsTitle,
-  workspaceUseCaseTitle,
-} from './constants';
-
-export const WorkspaceForm = (props: WorkspaceFormProps) => {
-  const {
-    application,
-    savedObjects,
-    defaultValues,
-    permissionEnabled,
-    dataSourceManagement: isDataSourceEnabled,
-    availableUseCases,
-  } = props;
-  const {
-    formId,
-    formData,
-    formErrors,
-    numberOfErrors,
-    setName,
-    setDescription,
-    handleFormSubmit,
-    handleColorChange,
-    handleUseCaseChange: handleUseCaseChangeInHook,
-    setPermissionSettings,
-    setSelectedDataSources,
-  } = useWorkspaceForm(props);
-  const nameManualChangedRef = useRef(false);
-
-  const disabledUserOrGroupInputIdsRef = useRef(
-    defaultValues?.permissionSettings?.map((item) => item.id) ?? []
-  );
-  const isDashboardAdmin = application?.capabilities?.dashboards?.isDashboardAdmin ?? false;
-  const handleNameInputChange = useCallback(
-    (newName) => {
-      setName(newName);
-      nameManualChangedRef.current = true;
-    },
-    [setName]
-  );
-  const handleUseCaseChange = useCallback(
-    (newUseCase) => {
-      handleUseCaseChangeInHook(newUseCase);
-      const useCase = availableUseCases.find((item) => newUseCase === item.id);
-      if (!nameManualChangedRef.current && useCase) {
-        setName(useCase.title);
-      }
-    },
-    [handleUseCaseChangeInHook, availableUseCases, setName]
-  );
-
-  return (
-    <EuiForm id={formId} onSubmit={handleFormSubmit} component="form">
-      {numberOfErrors > 0 && (
-        <>
-          <WorkspaceFormErrorCallout errors={formErrors} />
-          <EuiSpacer />
-        </>
-      )}
-
-      <EuiPanel>
-        <EuiTitle size="s">
-          <h2>{workspaceDetailsTitle}</h2>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EnterDetailsPanel
-          formErrors={formErrors}
-          name={formData.name}
-          description={formData.description}
-          color={formData.color}
-          readOnly={!!defaultValues?.reserved}
-          handleColorChange={handleColorChange}
-          onNameChange={handleNameInputChange}
-          onDescriptionChange={setDescription}
-        />
-      </EuiPanel>
-      <EuiSpacer />
-      <EuiPanel>
-        <EuiTitle size="s">
-          <h2>{workspaceUseCaseTitle}</h2>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <WorkspaceUseCase
-          value={formData.useCase}
-          onChange={handleUseCaseChange}
-          formErrors={formErrors}
-          availableUseCases={availableUseCases}
-        />
-      </EuiPanel>
-      <EuiSpacer />
-      {permissionEnabled && (
-        <EuiPanel>
-          <EuiTitle size="s">
-            <h2>{usersAndPermissionsCreatePageTitle}</h2>
-          </EuiTitle>
-          <EuiSpacer size="s" />
-          <EuiText size="xs" color="default">
-            {i18n.translate('workspace.form.usersAndPermissions.description', {
-              defaultMessage:
-                'You will be added as an owner to the workspace. Select additional users and user groups as workspace collaborators with different access levels.',
-            })}
-          </EuiText>
-          <EuiSpacer size="l" />
-          <WorkspacePermissionSettingPanel
-            errors={formErrors.permissionSettings?.fields}
-            onChange={setPermissionSettings}
-            permissionSettings={formData.permissionSettings}
-            disabledUserOrGroupInputIds={disabledUserOrGroupInputIdsRef.current}
-            data-test-subj={`workspaceForm-permissionSettingPanel`}
-          />
-        </EuiPanel>
-      )}
-      <EuiSpacer />
-
-      {/* SelectDataSourcePanel is only visible for dashboard admin and when data source is enabled*/}
-      {isDashboardAdmin && isDataSourceEnabled && (
-        <EuiPanel>
-          <EuiTitle size="s">
-            <h2>{selectDataSourceTitle}</h2>
-          </EuiTitle>
-          <SelectDataSourcePanel
-            errors={formErrors.selectedDataSources}
-            onChange={setSelectedDataSources}
-            savedObjects={savedObjects}
-            selectedDataSources={formData.selectedDataSources}
-            data-test-subj={`workspaceForm-dataSourcePanel`}
-          />
-        </EuiPanel>
-      )}
-      <EuiSpacer />
-      <WorkspaceCreateActionPanel formData={formData} formId={formId} application={application} />
-    </EuiForm>
-  );
-};
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_use_case.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_use_case.tsx
index 24d1e7c80e64..5eebdc8fa369 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_use_case.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_use_case.tsx
@@ -140,7 +140,6 @@ export const WorkspaceUseCase = ({
       })}
       isInvalid={!!formErrors.features}
       error={formErrors.features?.message}
-      fullWidth
     >
       <EuiFlexGroup direction="column">
         {availableUseCases.map(({ id, title, description, features, disabled }) => (