From 53f93654b8915bae40617325e857f2f4868ef03b Mon Sep 17 00:00:00 2001
From: swaroopar <swaroop.akulu.raghupathy@huawei.com>
Date: Thu, 30 May 2024 04:57:26 +0000
Subject: [PATCH] refactor order and migrate forms

Signed-off-by: swaroopar <swaroop.akulu.raghupathy@huawei.com>
---
 .../order/common/BillingModeSelection.tsx     |  77 +++----
 .../content/order/common/FlavorFeatures.tsx   |   2 +-
 .../{FlavorInfo.tsx => FlavorSelection.tsx}   |   6 +-
 ...grateServiceSubmitAvailabilityZoneInfo.tsx |   5 +-
 .../MigrateServiceSubmitBillingMode.tsx       |  29 +--
 .../{RegionInfo.tsx => RegionSelection.tsx}   |   5 +-
 .../order/common/ServiceHostingSelection.tsx  |  25 ++-
 .../AvailabilityZoneFormItem.tsx              |  11 +-
 .../order/create/NavigateOrderSubmission.tsx  |  21 +-
 .../content/order/create/OrderSubmit.tsx      | 198 ++++++++++--------
 .../order/create/SelectServiceForm.tsx        | 151 +++++++------
 .../content/order/formElements/CspSelect.tsx  |  60 +++---
 .../content/order/migrate/DeploymentForm.tsx  |  60 +++---
 .../order/migrate/MigrateServiceSubmit.tsx    | 109 ++++++----
 .../order/migrate/SelectDestination.tsx       | 155 +++++++-------
 src/styles/app.module.css                     |   1 -
 src/styles/flavor.module.css                  |   5 +-
 src/styles/service-order.module.css           |  63 ++++--
 src/styles/table.module.css                   |   1 +
 19 files changed, 550 insertions(+), 434 deletions(-)
 rename src/components/content/order/common/{FlavorInfo.tsx => FlavorSelection.tsx} (92%)
 rename src/components/content/order/common/{RegionInfo.tsx => RegionSelection.tsx} (90%)

diff --git a/src/components/content/order/common/BillingModeSelection.tsx b/src/components/content/order/common/BillingModeSelection.tsx
index 87b70c9e..3c625ff0 100644
--- a/src/components/content/order/common/BillingModeSelection.tsx
+++ b/src/components/content/order/common/BillingModeSelection.tsx
@@ -5,6 +5,7 @@
 
 import { Alert, Flex, Form, Radio } from 'antd';
 import React, { Dispatch, SetStateAction } from 'react';
+import serviceOrderStyles from '../../../../styles/service-order.module.css';
 import { DeployRequest } from '../../../../xpanse-api/generated';
 
 export const BillingModeSelection = ({
@@ -22,43 +23,47 @@ export const BillingModeSelection = ({
 
     return (
         <>
-            <Form.Item
-                key={'BillingMode'}
-                label={<p style={{ fontWeight: 'bold' }}>{'Billing Mode'}</p>}
-                required={true}
-                rules={[
-                    {
-                        required: true,
-                        message: 'billingMode is required',
-                    },
-                    { type: 'string' },
-                ]}
+            <div
+                className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormSelectionFirstInGroup}`}
             >
-                {billingModes && billingModes.length > 0 ? (
-                    <Flex vertical gap='middle'>
-                        <Radio.Group
-                            buttonStyle='solid'
-                            onChange={(e) => {
-                                onChange(e.target.value as DeployRequest.billingMode);
-                            }}
-                            value={selectBillingMode}
-                        >
-                            {billingModes.map((mode: DeployRequest.billingMode) => (
-                                <Radio.Button key={mode} value={mode}>
-                                    {mode}
-                                </Radio.Button>
-                            ))}
-                        </Radio.Group>
-                    </Flex>
-                ) : (
-                    <Alert
-                        message={'No BillingMode found'}
-                        description={'Optional field. Can proceed.'}
-                        type={'success'}
-                        closable={false}
-                    />
-                )}
-            </Form.Item>
+                <Form.Item
+                    key={'BillingMode'}
+                    label={<p className={serviceOrderStyles.orderFormItemName}>{'Billing Mode'}</p>}
+                    required={true}
+                    rules={[
+                        {
+                            required: true,
+                            message: 'billingMode is required',
+                        },
+                        { type: 'string' },
+                    ]}
+                >
+                    {billingModes && billingModes.length > 0 ? (
+                        <Flex vertical gap='middle'>
+                            <Radio.Group
+                                buttonStyle='solid'
+                                onChange={(e) => {
+                                    onChange(e.target.value as DeployRequest.billingMode);
+                                }}
+                                value={selectBillingMode}
+                            >
+                                {billingModes.map((mode: DeployRequest.billingMode) => (
+                                    <Radio.Button key={mode} value={mode}>
+                                        {mode}
+                                    </Radio.Button>
+                                ))}
+                            </Radio.Group>
+                        </Flex>
+                    ) : (
+                        <Alert
+                            message={'No BillingMode found'}
+                            description={'Optional field. Can proceed.'}
+                            type={'success'}
+                            closable={false}
+                        />
+                    )}
+                </Form.Item>
+            </div>
         </>
     );
 };
diff --git a/src/components/content/order/common/FlavorFeatures.tsx b/src/components/content/order/common/FlavorFeatures.tsx
index 39056170..c1571a7f 100644
--- a/src/components/content/order/common/FlavorFeatures.tsx
+++ b/src/components/content/order/common/FlavorFeatures.tsx
@@ -20,7 +20,7 @@ export const FlavorFeatures = (flavor: ServiceFlavor): React.JSX.Element => {
                 itemLayout={'horizontal'}
                 dataSource={flavor.features}
                 renderItem={(item, _) => (
-                    <List.Item>
+                    <List.Item className={flavorStyles.flavorFeatureItemName}>
                         <div>
                             <CheckOutlined className={serviceModifyStyles.flavorFeaturesItemIcon} />
                             &nbsp;{item}
diff --git a/src/components/content/order/common/FlavorInfo.tsx b/src/components/content/order/common/FlavorSelection.tsx
similarity index 92%
rename from src/components/content/order/common/FlavorInfo.tsx
rename to src/components/content/order/common/FlavorSelection.tsx
index 5d31752c..df0ae9b7 100644
--- a/src/components/content/order/common/FlavorInfo.tsx
+++ b/src/components/content/order/common/FlavorSelection.tsx
@@ -12,7 +12,7 @@ import { FlavorFeatures } from './FlavorFeatures';
 import { FlavorPrice } from './FlavorPrice';
 import { FlavorTitle } from './FlavorTitle';
 
-export const FlavorInfo = ({
+export const FlavorSelection = ({
     selectFlavor,
     flavorList,
     onChangeFlavor,
@@ -23,7 +23,9 @@ export const FlavorInfo = ({
 }): React.JSX.Element => {
     return (
         <>
-            <div className={`${serviceOrderStyles.orderFormSelectionStyle} ${flavorStyles.regionFlavorContent}`}>
+            <div
+                className={`${serviceOrderStyles.orderFormSelectionStyle} ${flavorStyles.regionFlavorContent} ${serviceOrderStyles.orderFormItemName}`}
+            >
                 <Form.Item
                     name='selectFlavor'
                     label='Flavor'
diff --git a/src/components/content/order/common/MigrateServiceSubmitAvailabilityZoneInfo.tsx b/src/components/content/order/common/MigrateServiceSubmitAvailabilityZoneInfo.tsx
index bd508658..995eb186 100644
--- a/src/components/content/order/common/MigrateServiceSubmitAvailabilityZoneInfo.tsx
+++ b/src/components/content/order/common/MigrateServiceSubmitAvailabilityZoneInfo.tsx
@@ -6,6 +6,7 @@
 import { Flex, Form, Radio } from 'antd';
 import React from 'react';
 import '../../../../styles/service-order.module.css';
+import serviceOrderStyles from '../../../../styles/service-order.module.css';
 import { AvailabilityZoneConfig } from '../../../../xpanse-api/generated';
 
 export const MigrateServiceSubmitAvailabilityZoneInfo = ({
@@ -22,8 +23,8 @@ export const MigrateServiceSubmitAvailabilityZoneInfo = ({
                       <Form.Item
                           key={availabilityZone.varName}
                           name={availabilityZone.displayName}
-                          label={availabilityZone.displayName}
-                          style={{ width: 450 }}
+                          label={<p className={serviceOrderStyles.orderFormItemName}>{availabilityZone.displayName}</p>}
+                          className={serviceOrderStyles.selectCloudProviderClass}
                       >
                           <Flex vertical gap='middle'>
                               <Radio.Group buttonStyle='solid' disabled={true}>
diff --git a/src/components/content/order/common/MigrateServiceSubmitBillingMode.tsx b/src/components/content/order/common/MigrateServiceSubmitBillingMode.tsx
index b23ce5ba..51b6d53c 100644
--- a/src/components/content/order/common/MigrateServiceSubmitBillingMode.tsx
+++ b/src/components/content/order/common/MigrateServiceSubmitBillingMode.tsx
@@ -5,23 +5,28 @@
 
 import { Flex, Form, Radio } from 'antd';
 import React from 'react';
+import serviceOrderStyles from '../../../../styles/service-order.module.css';
 
 export const MigrateServiceSubmitBillingMode = ({ selectBillMode }: { selectBillMode: string }): React.JSX.Element => {
     return (
         <>
-            <Form.Item
-                key={'BillingMode'}
-                label={<p style={{ fontWeight: 'bold' }}>{'Billing Mode'}</p>}
-                required={true}
+            <div
+                className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormSelectionFirstInGroup}`}
             >
-                <Flex vertical gap='middle'>
-                    <Radio.Group disabled={true} buttonStyle='solid' value={selectBillMode}>
-                        <Radio.Button key={selectBillMode} value={selectBillMode}>
-                            {selectBillMode}
-                        </Radio.Button>
-                    </Radio.Group>
-                </Flex>
-            </Form.Item>
+                <Form.Item
+                    key={'BillingMode'}
+                    label={<p className={serviceOrderStyles.orderFormItemName}>{'Billing Mode'}</p>}
+                    required={true}
+                >
+                    <Flex vertical gap='middle'>
+                        <Radio.Group disabled={true} buttonStyle='solid' value={selectBillMode}>
+                            <Radio.Button key={selectBillMode} value={selectBillMode}>
+                                {selectBillMode}
+                            </Radio.Button>
+                        </Radio.Group>
+                    </Flex>
+                </Form.Item>
+            </div>
         </>
     );
 };
diff --git a/src/components/content/order/common/RegionInfo.tsx b/src/components/content/order/common/RegionSelection.tsx
similarity index 90%
rename from src/components/content/order/common/RegionInfo.tsx
rename to src/components/content/order/common/RegionSelection.tsx
index c083a612..a173d975 100644
--- a/src/components/content/order/common/RegionInfo.tsx
+++ b/src/components/content/order/common/RegionSelection.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
 import { RegionDropDownInfo } from '../types/RegionDropDownInfo';
 
-export const RegionInfo = ({
+export const RegionSelection = ({
     selectRegion,
     onChangeRegion,
     regionList,
@@ -21,7 +21,7 @@ export const RegionInfo = ({
 }): React.JSX.Element => {
     return (
         <>
-            <div className={serviceOrderStyles.orderFormSelectionStyle}>
+            <div className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}>
                 <Form.Item
                     name='selectRegion'
                     label='Region'
@@ -32,7 +32,6 @@ export const RegionInfo = ({
                             className={serviceOrderStyles.selectBoxClass}
                             defaultValue={selectRegion}
                             value={selectRegion}
-                            style={{ width: 450 }}
                             onChange={(newRegion) => {
                                 if (onChangeRegion) {
                                     onChangeRegion(newRegion);
diff --git a/src/components/content/order/common/ServiceHostingSelection.tsx b/src/components/content/order/common/ServiceHostingSelection.tsx
index a0d25fc4..14adb1fa 100644
--- a/src/components/content/order/common/ServiceHostingSelection.tsx
+++ b/src/components/content/order/common/ServiceHostingSelection.tsx
@@ -33,15 +33,22 @@ export function ServiceHostingSelection({
 
     return (
         <>
-            <div className={serviceOrderStyles.orderFormSelectionStyle}>Service Hosted By:</div>
-            <Radio.Group
-                onChange={onChange}
-                disabled={disabledAlways || serviceHostingTypes.length === 1}
-                value={value}
-            >
-                <Radio value={UserOrderableServiceVo.serviceHostingType.SELF}>self</Radio>
-                <Radio value={UserOrderableServiceVo.serviceHostingType.SERVICE_VENDOR}>service-vendor</Radio>
-            </Radio.Group>
+            <div className={serviceOrderStyles.orderFormFlexElements}>
+                <div
+                    className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
+                >
+                    Service Hosted By:
+                </div>
+                <Radio.Group
+                    onChange={onChange}
+                    disabled={disabledAlways || serviceHostingTypes.length === 1}
+                    value={value}
+                    className={serviceOrderStyles.orderFormSelectionStyle}
+                >
+                    <Radio value={UserOrderableServiceVo.serviceHostingType.SELF}>self</Radio>
+                    <Radio value={UserOrderableServiceVo.serviceHostingType.SERVICE_VENDOR}>service-vendor</Radio>
+                </Radio.Group>
+            </div>
         </>
     );
 }
diff --git a/src/components/content/order/common/availabilityzone/AvailabilityZoneFormItem.tsx b/src/components/content/order/common/availabilityzone/AvailabilityZoneFormItem.tsx
index c47a477d..a1966787 100644
--- a/src/components/content/order/common/availabilityzone/AvailabilityZoneFormItem.tsx
+++ b/src/components/content/order/common/availabilityzone/AvailabilityZoneFormItem.tsx
@@ -5,6 +5,7 @@
 
 import { Form } from 'antd';
 import React from 'react';
+import serviceOrderStyles from '../../../../../styles/service-order.module.css';
 import { AvailabilityZoneConfig, UserOrderableServiceVo } from '../../../../../xpanse-api/generated';
 import useGetAvailabilityZonesForRegionQuery from '../utils/useGetAvailabilityZonesForRegionQuery';
 import { AvailabilityZoneButton } from './AvailabilityZoneButton';
@@ -35,13 +36,7 @@ export function AvailabilityZoneFormItem({
             return <AvailabilityZoneLoading key={availabilityZoneConfig.varName} />;
         }
         if (availabilityZonesVariableRequest.isError) {
-            return (
-                <AvailabilityZoneError
-                    retryRequest={retryRequest}
-                    error={availabilityZonesVariableRequest.error}
-                    key={availabilityZoneConfig.varName}
-                />
-            );
+            return <AvailabilityZoneError retryRequest={retryRequest} error={availabilityZonesVariableRequest.error} />;
         }
         if (availabilityZonesVariableRequest.data) {
             return (
@@ -59,7 +54,7 @@ export function AvailabilityZoneFormItem({
     return (
         <Form.Item
             key={availabilityZoneConfig.varName}
-            label={<p style={{ fontWeight: 'bold' }}>{availabilityZoneConfig.displayName}</p>}
+            label={<p className={serviceOrderStyles.orderFormItemName}>{availabilityZoneConfig.displayName}</p>}
             required={availabilityZoneConfig.mandatory}
             rules={[
                 {
diff --git a/src/components/content/order/create/NavigateOrderSubmission.tsx b/src/components/content/order/create/NavigateOrderSubmission.tsx
index 7b5b0f6c..9fc79869 100644
--- a/src/components/content/order/create/NavigateOrderSubmission.tsx
+++ b/src/components/content/order/create/NavigateOrderSubmission.tsx
@@ -3,6 +3,7 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
+import { Button } from 'antd';
 import React from 'react';
 import { To, useNavigate } from 'react-router-dom';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
@@ -21,6 +22,7 @@ function NavigateOrderSubmission({
 }): React.JSX.Element {
     const navigate = useNavigate();
     const [resetFormCache] = useOrderFormStore((state) => [state.clearFormVariables]);
+
     function goBack(props: OrderSubmitProps | undefined) {
         const toUrl: string = to as string;
         if (toUrl.includes(servicesSubPageRoute)) {
@@ -30,16 +32,15 @@ function NavigateOrderSubmission({
     }
 
     return (
-        <div>
-            <div
-                onClick={() => {
-                    goBack(props);
-                }}
-                className={serviceOrderStyles.orderNavigate}
-            >
-                {text}
-            </div>
-        </div>
+        <Button
+            type='primary'
+            onClick={() => {
+                goBack(props);
+            }}
+            className={serviceOrderStyles.orderNavigate}
+        >
+            {text}
+        </Button>
     );
 }
 
diff --git a/src/components/content/order/create/OrderSubmit.tsx b/src/components/content/order/create/OrderSubmit.tsx
index 661e8b68..f2fb590e 100644
--- a/src/components/content/order/create/OrderSubmit.tsx
+++ b/src/components/content/order/create/OrderSubmit.tsx
@@ -89,11 +89,9 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
     return (
         <>
             <div>
-                <NavigateOrderSubmission text={'<< Back'} to={createServicePageUrl as To} props={state} />
-                <div className={serviceOrderStyles.Line} />
                 <div className={tableStyles.genericTableContainer}>
-                    <Row>
-                        <Col span={4}>
+                    <Row justify='space-between'>
+                        <Col span={6}>
                             <Tooltip placement='topLeft' title={state.name + '@' + state.version}>
                                 <Paragraph ellipsis={true} className={appStyles.contentTitle}>
                                     Service: {state.name + '@' + state.version}
@@ -104,98 +102,112 @@ function OrderSubmit(state: OrderSubmitProps): React.JSX.Element {
                             <ApiDoc id={state.id} styleClass={serviceOrderStyles.contentTitleApi}></ApiDoc>
                         </Col>
                     </Row>
-                </div>
-            </div>
-            {isShowDeploymentResult ? (
-                <OrderSubmitStatusAlert
-                    key={uniqueRequestId.current}
-                    uuid={submitDeploymentRequest.data}
-                    isSubmitFailed={submitDeploymentRequest.error}
-                    deployedServiceDetails={getServiceDetailsByIdQuery.data}
-                    isPollingError={getServiceDetailsByIdQuery.isError}
-                    serviceProviderContactDetails={state.contactServiceDetails}
-                />
-            ) : null}
-            <div className={serviceOrderStyles.orderParamItemLeft} />
-            <Form
-                form={form}
-                layout='vertical'
-                autoComplete='off'
-                initialValues={useOrderFormStore.getState().deployParams}
-                onFinish={onSubmit}
-                validateTrigger={['onSubmit', 'onBlur', 'onChange']}
-                key='deploy'
-                disabled={submitDeploymentRequest.isSuccess}
-            >
-                <Form.Item
-                    name={'Name'}
-                    label={'Name: Service Name'}
-                    rules={[{ required: true }, { type: 'string', min: 5 }]}
-                    colon={true}
-                >
-                    <Input
-                        name={'Name'}
-                        showCount
-                        placeholder={'customer defined name for service ordered'}
-                        maxLength={256}
-                        onChange={(e) => {
-                            cacheFormVariable(CUSTOMER_SERVICE_NAME_FIELD, e.target.value);
-                        }}
-                        className={serviceOrderStyles.orderParamItemContent}
-                        suffix={
-                            <Tooltip title={'Customer defined name for the service instance created'}>
-                                <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
-                            </Tooltip>
-                        }
-                    />
-                </Form.Item>
-                <div
-                    className={
-                        getServiceDetailsByIdQuery.data?.serviceDeploymentState.toString() ===
-                        DeployedServiceDetails.serviceDeploymentState.DEPLOYING.toString()
-                            ? `${serviceOrderStyles.deploying} ${serviceOrderStyles.orderParamItemRow}`
-                            : ''
-                    }
-                >
-                    {state.params.map((item) =>
-                        item.kind === 'variable' || item.kind === 'env' ? (
-                            <OrderItem key={item.name} item={item} csp={state.csp} region={state.region} />
-                        ) : undefined
-                    )}
-                </div>
-                <div className={serviceOrderStyles.orderParamItemRow}>
-                    <div className={serviceOrderStyles.orderParamItemLeft} />
-                    <div className={serviceOrderStyles.orderParamItemContent}>
-                        <EulaInfo
-                            eula={state.eula}
-                            isEulaAccepted={isEulaAccepted}
-                            setIsEulaAccepted={setIsEulaAccepted}
+
+                    {isShowDeploymentResult ? (
+                        <OrderSubmitStatusAlert
+                            key={uniqueRequestId.current}
+                            uuid={submitDeploymentRequest.data}
+                            isSubmitFailed={submitDeploymentRequest.error}
+                            deployedServiceDetails={getServiceDetailsByIdQuery.data}
+                            isPollingError={getServiceDetailsByIdQuery.isError}
+                            serviceProviderContactDetails={state.contactServiceDetails}
                         />
-                    </div>
-                </div>
-                <div className={serviceOrderStyles.Line} />
-                <div className={serviceOrderStyles.orderParamItemRow}>
-                    <div className={serviceOrderStyles.orderParamItemLeft} />
-                    <div className={serviceOrderStyles.orderParamDeploy}>
-                        <Button
-                            type='primary'
-                            loading={
-                                submitDeploymentRequest.isPending ||
-                                getServiceDetailsByIdQuery.data?.serviceDeploymentState.toString() ===
+                    ) : null}
+                    <Form
+                        form={form}
+                        layout='vertical'
+                        autoComplete='off'
+                        initialValues={useOrderFormStore.getState().deployParams}
+                        onFinish={onSubmit}
+                        validateTrigger={['onSubmit', 'onBlur', 'onChange']}
+                        key='deploy'
+                        disabled={submitDeploymentRequest.isSuccess}
+                    >
+                        <div className={serviceOrderStyles.orderFormGroupItems}>
+                            <div className={serviceOrderStyles.orderParamItemLeft} />
+                            <Form.Item
+                                name={'Name'}
+                                label={'Name: Service Name'}
+                                rules={[{ required: true }, { type: 'string', min: 5 }]}
+                                colon={true}
+                                className={serviceOrderStyles.orderParamsFirstParam}
+                            >
+                                <Input
+                                    name={'Name'}
+                                    showCount
+                                    placeholder={'customer defined name for service ordered'}
+                                    maxLength={256}
+                                    onChange={(e) => {
+                                        cacheFormVariable(CUSTOMER_SERVICE_NAME_FIELD, e.target.value);
+                                    }}
+                                    className={serviceOrderStyles.orderParamItemContent}
+                                    suffix={
+                                        <Tooltip title={'Customer defined name for the service instance created'}>
+                                            <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
+                                        </Tooltip>
+                                    }
+                                />
+                            </Form.Item>
+                            <div
+                                className={
+                                    getServiceDetailsByIdQuery.data?.serviceDeploymentState.toString() ===
                                     DeployedServiceDetails.serviceDeploymentState.DEPLOYING.toString()
-                            }
-                            htmlType='submit'
-                            disabled={
-                                submitDeploymentRequest.isPending ||
-                                getServiceDetailsByIdQuery.data?.serviceDeploymentState.toString() ===
-                                    DeployedServiceDetails.serviceDeploymentState.DEPLOYMENT_SUCCESSFUL.toString()
-                            }
-                        >
-                            Deploy
-                        </Button>
-                    </div>
+                                        ? `${serviceOrderStyles.deploying} ${serviceOrderStyles.orderParamItemRow}`
+                                        : ''
+                                }
+                            >
+                                {state.params.map((item) =>
+                                    item.kind === 'variable' || item.kind === 'env' ? (
+                                        <OrderItem key={item.name} item={item} csp={state.csp} region={state.region} />
+                                    ) : undefined
+                                )}
+                            </div>
+                        </div>
+                        <div className={serviceOrderStyles.orderParamsFirstParam} />
+                        <div className={serviceOrderStyles.orderParamItemRow}>
+                            <div className={serviceOrderStyles.orderParamItemLeft} />
+                            <div className={serviceOrderStyles.orderParamItemContent}>
+                                <EulaInfo
+                                    eula={state.eula}
+                                    isEulaAccepted={isEulaAccepted}
+                                    setIsEulaAccepted={setIsEulaAccepted}
+                                />
+                            </div>
+                        </div>
+                        <Row justify='space-around'>
+                            <Col span={6}>
+                                <div>
+                                    <NavigateOrderSubmission
+                                        text={'Back'}
+                                        to={createServicePageUrl as To}
+                                        props={state}
+                                    />
+                                </div>
+                            </Col>
+                            <Col span={4}>
+                                <div className={serviceOrderStyles.orderParamDeploy}>
+                                    <Button
+                                        type='primary'
+                                        loading={
+                                            submitDeploymentRequest.isPending ||
+                                            getServiceDetailsByIdQuery.data?.serviceDeploymentState.toString() ===
+                                                DeployedServiceDetails.serviceDeploymentState.DEPLOYING.toString()
+                                        }
+                                        htmlType='submit'
+                                        disabled={
+                                            submitDeploymentRequest.isPending ||
+                                            getServiceDetailsByIdQuery.data?.serviceDeploymentState.toString() ===
+                                                DeployedServiceDetails.serviceDeploymentState.DEPLOYMENT_SUCCESSFUL.toString()
+                                        }
+                                    >
+                                        Deploy
+                                    </Button>
+                                </div>
+                            </Col>
+                        </Row>
+                    </Form>
                 </div>
-            </Form>
+            </div>
         </>
     );
 }
diff --git a/src/components/content/order/create/SelectServiceForm.tsx b/src/components/content/order/create/SelectServiceForm.tsx
index 0b67cf04..1bdfecd4 100644
--- a/src/components/content/order/create/SelectServiceForm.tsx
+++ b/src/components/content/order/create/SelectServiceForm.tsx
@@ -21,8 +21,8 @@ import { orderPageRoute, servicesSubPageRoute } from '../../../utils/constants';
 import { ContactDetailsShowType } from '../../common/ocl/ContactDetailsShowType';
 import { ContactDetailsText } from '../../common/ocl/ContactDetailsText';
 import { BillingModeSelection } from '../common/BillingModeSelection';
-import { FlavorInfo } from '../common/FlavorInfo';
-import { RegionInfo } from '../common/RegionInfo';
+import { FlavorSelection } from '../common/FlavorSelection.tsx';
+import { RegionSelection } from '../common/RegionSelection.tsx';
 import { ServiceHostingSelection } from '../common/ServiceHostingSelection';
 import { AvailabilityZoneFormItem } from '../common/availabilityzone/AvailabilityZoneFormItem';
 import { OrderSubmitProps } from '../common/utils/OrderSubmitProps';
@@ -286,18 +286,15 @@ export function SelectServiceForm({ services }: { services: UserOrderableService
         <>
             <Form
                 form={form}
-                layout='vertical'
+                layout='inline'
                 autoComplete='off'
                 initialValues={{ selectRegion, selectFlavor }}
                 onFinish={gotoOrderSubmit}
                 validateTrigger={['gotoOrderSubmit']}
+                className={serviceOrderStyles.orderFormInlineDisplay}
             >
-                <div>
-                    <NavigateOrderSubmission text={'<< Back'} to={servicePageUrl as To} props={undefined} />
-                    <div className={serviceOrderStyles.Line} />
-                </div>
                 <div className={tableStyles.genericTableContainer}>
-                    <Row justify='start' gutter={10}>
+                    <Row justify='space-between'>
                         <Col span={6}>
                             <Tooltip placement='topLeft' title={serviceName}>
                                 <Paragraph ellipsis={true} className={appStyles.contentTitle}>
@@ -316,69 +313,89 @@ export function SelectServiceForm({ services }: { services: UserOrderableService
                             <></>
                         )}
                     </Row>
-                    <div className={serviceOrderStyles.orderFormSelectionStyle}>
-                        Version:&nbsp;
-                        <Select
-                            value={selectVersion}
-                            className={serviceOrderStyles.versionDropDown}
-                            onChange={onChangeVersion}
-                            options={versionList}
-                        />
-                    </div>
+                    <div className={serviceOrderStyles.orderFormGroupItems}>
+                        <div className={serviceOrderStyles.orderFormFlexElements}>
+                            <div
+                                className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormSelectionFirstInGroup} ${serviceOrderStyles.orderFormItemName}`}
+                            >
+                                Version:&nbsp;
+                            </div>
+                            <Select
+                                value={selectVersion}
+                                className={serviceOrderStyles.versionDropDown}
+                                onChange={onChangeVersion}
+                                options={versionList}
+                            />
+                        </div>
 
-                    <br />
-                    <CspSelect
-                        selectCsp={selectCsp}
-                        cspList={cspList}
-                        onChangeHandler={(csp: UserOrderableServiceVo.csp) => {
-                            onChangeCloudProvider(csp);
-                        }}
-                    />
-                    <br />
-                    <ServiceHostingSelection
-                        serviceHostingTypes={serviceHostTypes}
-                        updateServiceHostingType={onChangeServiceHostingType}
-                        disabledAlways={false}
-                        previousSelection={selectServiceHostType}
-                    ></ServiceHostingSelection>
-                    <br />
-                    <br />
-                    <div className={`${serviceOrderStyles.orderFormSelectionStyle} ${appStyles.contentTitle}`}>
-                        <Tabs
-                            type='card'
-                            size='middle'
-                            activeKey={selectArea}
-                            tabPosition={'top'}
-                            items={areaList}
-                            onChange={(area) => {
-                                onChangeAreaValue(area);
+                        <br />
+                        <CspSelect
+                            selectCsp={selectCsp}
+                            cspList={cspList}
+                            onChangeHandler={(csp: UserOrderableServiceVo.csp) => {
+                                onChangeCloudProvider(csp);
                             }}
                         />
+                        <br />
+                        <ServiceHostingSelection
+                            serviceHostingTypes={serviceHostTypes}
+                            updateServiceHostingType={onChangeServiceHostingType}
+                            disabledAlways={false}
+                            previousSelection={selectServiceHostType}
+                        ></ServiceHostingSelection>
                     </div>
-                    <RegionInfo selectRegion={selectRegion} onChangeRegion={onChangeRegion} regionList={regionList} />
-                    {availabilityZoneConfigs.map((availabilityZoneConfig) => {
-                        return (
-                            <AvailabilityZoneFormItem
-                                availabilityZoneConfig={availabilityZoneConfig}
-                                selectRegion={selectRegion}
-                                onAvailabilityZoneChange={onAvailabilityZoneChange}
-                                selectAvailabilityZones={selectAvailabilityZones}
-                                selectCsp={selectCsp}
-                                key={availabilityZoneConfig.varName}
+                    <div className={serviceOrderStyles.orderFormGroupItems}>
+                        <br />
+                        <div className={`${serviceOrderStyles.orderFormSelectionStyle} ${appStyles.contentTitle}`}>
+                            <Tabs
+                                type='card'
+                                size='middle'
+                                activeKey={selectArea}
+                                tabPosition={'top'}
+                                items={areaList}
+                                onChange={(area) => {
+                                    onChangeAreaValue(area);
+                                }}
                             />
-                        );
-                    })}
-                    <BillingModeSelection
-                        selectBillingMode={selectBillingMode}
-                        setSelectBillingMode={setSelectBillMode}
-                        billingModes={billingModes}
-                    />
-                    <FlavorInfo selectFlavor={selectFlavor} flavorList={flavorList} onChangeFlavor={onChangeFlavor} />
+                        </div>
+                        <RegionSelection
+                            selectRegion={selectRegion}
+                            onChangeRegion={onChangeRegion}
+                            regionList={regionList}
+                        />
+                        {availabilityZoneConfigs.map((availabilityZoneConfig) => {
+                            return (
+                                <AvailabilityZoneFormItem
+                                    availabilityZoneConfig={availabilityZoneConfig}
+                                    selectRegion={selectRegion}
+                                    onAvailabilityZoneChange={onAvailabilityZoneChange}
+                                    selectAvailabilityZones={selectAvailabilityZones}
+                                    selectCsp={selectCsp}
+                                    key={availabilityZoneConfig.varName}
+                                />
+                            );
+                        })}
+                    </div>
+                    <div className={serviceOrderStyles.orderFormGroupItems}>
+                        <BillingModeSelection
+                            selectBillingMode={selectBillingMode}
+                            setSelectBillingMode={setSelectBillMode}
+                            billingModes={billingModes}
+                        />
+                        <FlavorSelection
+                            selectFlavor={selectFlavor}
+                            flavorList={flavorList}
+                            onChangeFlavor={onChangeFlavor}
+                        />
+                    </div>
                 </div>
-                <div>
-                    <div className={serviceOrderStyles.Line} />
-                    <div className={serviceOrderStyles.orderParamItemRow}>
-                        <div className={serviceOrderStyles.orderParamItemLeft} />
+                <Row justify='space-around'>
+                    <Col span={6}>
+                        <div>
+                            <NavigateOrderSubmission text={'Back'} to={servicePageUrl as To} props={undefined} />
+                        </div>
+                    </Col>
+                    <Col span={4}>
                         <div className={serviceOrderStyles.orderParamSubmit}>
                             <Button
                                 type='primary'
@@ -392,8 +409,8 @@ export function SelectServiceForm({ services }: { services: UserOrderableService
                                 &nbsp;&nbsp;Next&nbsp;&nbsp;
                             </Button>
                         </div>
-                    </div>
-                </div>
+                    </Col>
+                </Row>
             </Form>
         </>
     );
diff --git a/src/components/content/order/formElements/CspSelect.tsx b/src/components/content/order/formElements/CspSelect.tsx
index 15a891e1..edd29aed 100644
--- a/src/components/content/order/formElements/CspSelect.tsx
+++ b/src/components/content/order/formElements/CspSelect.tsx
@@ -20,33 +20,39 @@ export default function CspSelect({
 }): React.JSX.Element {
     return (
         <>
-            <div className={serviceOrderStyles.orderFormSelectionStyle}>Cloud Service Provider:</div>
-            <div className={serviceOrderStyles.servicesContentBody}>
-                {cspList.map((item, index) => {
-                    return (
-                        <div
-                            onClick={() => {
-                                onChangeHandler(item);
-                            }}
-                            key={index}
-                            className={
-                                selectCsp.valueOf() === item.valueOf()
-                                    ? serviceOrderStyles.cloudProviderSelectHover
-                                    : serviceOrderStyles.cloudProviderSelect
-                            }
-                        >
-                            <Image
-                                width={200}
-                                height={56}
-                                src={cspMap.get(item as unknown as CloudServiceProvider.name)?.logo}
-                                alt={item}
-                                preview={false}
-                                fallback={'https://img.shields.io/badge/-' + item + '-gray'}
-                            />
-                            <div className={serviceOrderStyles.serviceTypeOptionInfo} />
-                        </div>
-                    );
-                })}
+            <div className={serviceOrderStyles.orderFormFlexElements}>
+                <div
+                    className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
+                >
+                    Cloud Service Provider:
+                </div>
+                <div className={serviceOrderStyles.servicesContentBody}>
+                    {cspList.map((item, index) => {
+                        return (
+                            <div
+                                onClick={() => {
+                                    onChangeHandler(item);
+                                }}
+                                key={index}
+                                className={
+                                    selectCsp.valueOf() === item.valueOf()
+                                        ? serviceOrderStyles.cloudProviderSelectHover
+                                        : serviceOrderStyles.cloudProviderSelect
+                                }
+                            >
+                                <Image
+                                    width={200}
+                                    height={56}
+                                    src={cspMap.get(item as unknown as CloudServiceProvider.name)?.logo}
+                                    alt={item}
+                                    preview={false}
+                                    fallback={'https://img.shields.io/badge/-' + item + '-gray'}
+                                />
+                                <div className={serviceOrderStyles.serviceTypeOptionInfo} />
+                            </div>
+                        );
+                    })}
+                </div>
             </div>
         </>
     );
diff --git a/src/components/content/order/migrate/DeploymentForm.tsx b/src/components/content/order/migrate/DeploymentForm.tsx
index 263ea0c4..49c7d9c0 100644
--- a/src/components/content/order/migrate/DeploymentForm.tsx
+++ b/src/components/content/order/migrate/DeploymentForm.tsx
@@ -104,7 +104,6 @@ export const DeploymentForm = ({
                         </div>
                     </div>
                 </div>
-
                 <div className={serviceOrderStyles.orderParamItemLeft} />
                 <Form
                     layout='vertical'
@@ -115,35 +114,40 @@ export const DeploymentForm = ({
                     validateTrigger={['onSubmit', 'onBlur', 'onChange']}
                     key='deploy'
                 >
-                    <Form.Item
-                        name={'Name'}
-                        label={'Name: Service Name'}
-                        rules={[{ required: true }, { type: 'string', min: 5 }]}
-                        colon={true}
-                    >
-                        <Input
+                    <div className={serviceOrderStyles.orderFormGroupItems}>
+                        <div className={serviceOrderStyles.orderParamItemLeft} />
+                        <Form.Item
                             name={'Name'}
-                            showCount
-                            placeholder={'customer defined name for service ordered'}
-                            maxLength={256}
-                            className={serviceOrderStyles.orderParamItemContent}
-                            suffix={
-                                <Tooltip title={'Customer defined name for the service instance created'}>
-                                    <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
-                                </Tooltip>
-                            }
-                            onChange={(e) => {
-                                cacheFormVariable(CUSTOMER_SERVICE_NAME_FIELD, String(e.target.value));
-                            }}
-                        />
-                    </Form.Item>
-                    <div>
-                        {deployParams.params.map((item) =>
-                            item.kind === 'variable' || item.kind === 'env' ? (
-                                <OrderItem key={item.name} item={item} csp={selectCsp} region={region.name} />
-                            ) : undefined
-                        )}
+                            label={'Name: Service Name'}
+                            rules={[{ required: true }, { type: 'string', min: 5 }]}
+                            colon={true}
+                            className={serviceOrderStyles.orderParamsFirstParam}
+                        >
+                            <Input
+                                name={'Name'}
+                                showCount
+                                placeholder={'customer defined name for service ordered'}
+                                maxLength={256}
+                                className={serviceOrderStyles.orderParamItemContent}
+                                suffix={
+                                    <Tooltip title={'Customer defined name for the service instance created'}>
+                                        <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
+                                    </Tooltip>
+                                }
+                                onChange={(e) => {
+                                    cacheFormVariable(CUSTOMER_SERVICE_NAME_FIELD, String(e.target.value));
+                                }}
+                            />
+                        </Form.Item>
+                        <div>
+                            {deployParams.params.map((item) =>
+                                item.kind === 'variable' || item.kind === 'env' ? (
+                                    <OrderItem key={item.name} item={item} csp={selectCsp} region={region.name} />
+                                ) : undefined
+                            )}
+                        </div>
                     </div>
+                    <div className={serviceOrderStyles.orderParamsFirstParam} />
                     <div className={serviceOrderStyles.orderParamItemRow}>
                         <div className={serviceOrderStyles.orderParamItemLeft} />
                         <div className={serviceOrderStyles.orderParamItemContent}>
diff --git a/src/components/content/order/migrate/MigrateServiceSubmit.tsx b/src/components/content/order/migrate/MigrateServiceSubmit.tsx
index 430512cd..3ca33704 100644
--- a/src/components/content/order/migrate/MigrateServiceSubmit.tsx
+++ b/src/components/content/order/migrate/MigrateServiceSubmit.tsx
@@ -8,6 +8,7 @@ import { Tab } from 'rc-tabs/lib/interface';
 import React, { useState } from 'react';
 import appStyles from '../../../../styles/app.module.css';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
+import tableStyles from '../../../../styles/table.module.css';
 import {
     CloudServiceProvider,
     DeployRequest,
@@ -20,10 +21,10 @@ import {
 } from '../../../../xpanse-api/generated';
 import { cspMap } from '../../common/csp/CspLogo';
 import useGetOrderableServiceDetailsQuery from '../../deployedServices/myServices/query/useGetOrderableServiceDetailsQuery';
-import { FlavorInfo } from '../common/FlavorInfo';
+import { FlavorSelection } from '../common/FlavorSelection.tsx';
 import { MigrateServiceSubmitAvailabilityZoneInfo } from '../common/MigrateServiceSubmitAvailabilityZoneInfo';
 import { MigrateServiceSubmitBillingMode } from '../common/MigrateServiceSubmitBillingMode';
-import { RegionInfo } from '../common/RegionInfo';
+import { RegionSelection } from '../common/RegionSelection.tsx';
 import { ServiceHostingSelection } from '../common/ServiceHostingSelection';
 import { getServiceFlavorList } from '../formDataHelpers/flavorHelper';
 import { getAvailabilityZoneRequirementsForAService } from '../formDataHelpers/getAvailabilityZoneRequirementsForAService';
@@ -140,48 +141,72 @@ export const MigrateServiceSubmit = ({
                     migrationDetails={migrateServiceDetailsQuery.data}
                 />
             ) : null}
-            <Form layout='vertical' initialValues={{ region, selectFlavor }}>
-                <div className={serviceOrderStyles.orderFormSelectionStyle}>Cloud Service Provider:</div>
-                <div className={serviceOrderStyles.servicesContentBody}>
-                    <div className={serviceOrderStyles.cloudProviderSelectHover}>
-                        <Image
-                            width={200}
-                            height={56}
-                            src={cspMap.get(selectCsp as unknown as CloudServiceProvider.name)?.logo}
-                            alt={selectCsp}
-                            preview={false}
-                            fallback={
-                                'https://img.shields.io/badge/-' +
-                                (selectCsp.length === 0 ? '' : selectCsp.toString()) +
-                                '-gray'
-                            }
-                        />
-                        <div className={serviceOrderStyles.serviceTypeOptionInfo} />
+            <Form
+                layout='inline'
+                initialValues={{ region, selectFlavor }}
+                className={serviceOrderStyles.orderFormInlineDisplay}
+            >
+                <div className={tableStyles.genericTableContainer}>
+                    <div className={serviceOrderStyles.orderFormGroupItems}>
+                        <div className={serviceOrderStyles.orderFormFlexElements}>
+                            <div
+                                className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
+                            >
+                                Cloud Service Provider:
+                            </div>
+                            <div className={serviceOrderStyles.servicesContentBody}>
+                                <div className={serviceOrderStyles.cloudProviderSelectHover}>
+                                    <Image
+                                        width={200}
+                                        height={56}
+                                        src={cspMap.get(selectCsp as unknown as CloudServiceProvider.name)?.logo}
+                                        alt={selectCsp}
+                                        preview={false}
+                                        fallback={
+                                            'https://img.shields.io/badge/-' +
+                                            (selectCsp.length === 0 ? '' : selectCsp.toString()) +
+                                            '-gray'
+                                        }
+                                    />
+                                    <div className={serviceOrderStyles.serviceTypeOptionInfo} />
+                                </div>
+                            </div>
+                        </div>
+                        <br />
+                        <ServiceHostingSelection
+                            serviceHostingTypes={[selectServiceHostingType]}
+                            disabledAlways={true}
+                            previousSelection={undefined}
+                        ></ServiceHostingSelection>
+                    </div>
+                    <div className={serviceOrderStyles.orderFormGroupItems}>
+                        <div
+                            className={`${serviceOrderStyles.orderFormSelectionStyle} ${appStyles.contentTitle}  ${serviceOrderStyles.orderFormSelectionFirstInGroup}`}
+                        >
+                            <Tabs
+                                type='card'
+                                size='middle'
+                                activeKey={region.area}
+                                tabPosition={'top'}
+                                items={areaList}
+                            />
+                        </div>
+                        <RegionSelection selectRegion={region.name} disabled={true} />
+                        {Object.keys(availabilityZones).length > 0 ? (
+                            <MigrateServiceSubmitAvailabilityZoneInfo
+                                availabilityZoneConfigs={getAvailabilityZoneRequirementsForAService(
+                                    selectCsp,
+                                    userOrderableServiceVoList
+                                )}
+                                availabilityZones={availabilityZones}
+                            />
+                        ) : undefined}
+                    </div>
+                    <div className={serviceOrderStyles.orderFormGroupItems}>
+                        <MigrateServiceSubmitBillingMode selectBillMode={selectBillingMode} />
+                        <FlavorSelection selectFlavor={selectFlavor} flavorList={currentFlavorList} />
                     </div>
                 </div>
-                <br />
-                <ServiceHostingSelection
-                    serviceHostingTypes={[selectServiceHostingType]}
-                    disabledAlways={true}
-                    previousSelection={undefined}
-                ></ServiceHostingSelection>
-                <br />
-                <br />
-                <div className={`${serviceOrderStyles.orderFormSelectionStyle} ${appStyles.contentTitle}`}>
-                    <Tabs type='card' size='middle' activeKey={region.area} tabPosition={'top'} items={areaList} />
-                </div>
-                <RegionInfo selectRegion={region.name} disabled={true} />
-                {Object.keys(availabilityZones).length > 0 ? (
-                    <MigrateServiceSubmitAvailabilityZoneInfo
-                        availabilityZoneConfigs={getAvailabilityZoneRequirementsForAService(
-                            selectCsp,
-                            userOrderableServiceVoList
-                        )}
-                        availabilityZones={availabilityZones}
-                    />
-                ) : undefined}
-                <MigrateServiceSubmitBillingMode selectBillMode={selectBillingMode} />
-                <FlavorInfo selectFlavor={selectFlavor} flavorList={currentFlavorList} />
                 <div className={serviceOrderStyles.migrateStepButtonInnerClass}>
                     <Space size={'large'}>
                         <Button
diff --git a/src/components/content/order/migrate/SelectDestination.tsx b/src/components/content/order/migrate/SelectDestination.tsx
index edcfecec..785948ac 100644
--- a/src/components/content/order/migrate/SelectDestination.tsx
+++ b/src/components/content/order/migrate/SelectDestination.tsx
@@ -8,6 +8,7 @@ import { Tab } from 'rc-tabs/lib/interface';
 import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import appStyles from '../../../../styles/app.module.css';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
+import tableStyles from '../../../../styles/table.module.css';
 import {
     AvailabilityZoneConfig,
     MigrateRequest,
@@ -15,8 +16,8 @@ import {
     UserOrderableServiceVo,
 } from '../../../../xpanse-api/generated';
 import { BillingModeSelection } from '../common/BillingModeSelection';
-import { FlavorInfo } from '../common/FlavorInfo';
-import { RegionInfo } from '../common/RegionInfo';
+import { FlavorSelection } from '../common/FlavorSelection.tsx';
+import { RegionSelection } from '../common/RegionSelection.tsx';
 import { ServiceHostingSelection } from '../common/ServiceHostingSelection';
 import { AvailabilityZoneFormItem } from '../common/availabilityzone/AvailabilityZoneFormItem';
 import useGetAvailabilityZonesForRegionQuery from '../common/utils/useGetAvailabilityZonesForRegionQuery';
@@ -255,85 +256,99 @@ export const SelectDestination = ({
     return (
         <Form
             form={form}
-            layout='vertical'
+            layout='inline'
             autoComplete='off'
             initialValues={{ selectRegion, selectFlavor }}
             onFinish={next}
             validateTrigger={['next']}
+            className={serviceOrderStyles.orderFormInlineDisplay}
         >
-            <div>
-                <CspSelect
-                    selectCsp={selectCsp}
-                    cspList={cspList}
-                    onChangeHandler={(csp) => {
-                        onChangeCloudProvider(csp);
-                    }}
-                />
-                <br />
-                <ServiceHostingSelection
-                    serviceHostingTypes={serviceHostTypes}
-                    updateServiceHostingType={onChangeServiceHostingType}
-                    disabledAlways={false}
-                    previousSelection={selectServiceHostType}
-                ></ServiceHostingSelection>
-                <br />
-                <br />
-                <div className={`${serviceOrderStyles.orderFormSelectionStyle} ${appStyles.contentTitle}`}>
-                    <Tabs
-                        type='card'
-                        size='middle'
-                        activeKey={selectArea}
-                        tabPosition={'top'}
-                        items={areaList}
-                        onChange={(area) => {
-                            onChangeAreaValue(area);
+            <div className={tableStyles.genericTableContainer}>
+                <div className={serviceOrderStyles.orderFormGroupItems}>
+                    <CspSelect
+                        selectCsp={selectCsp}
+                        cspList={cspList}
+                        onChangeHandler={(csp) => {
+                            onChangeCloudProvider(csp);
                         }}
                     />
+                    <ServiceHostingSelection
+                        serviceHostingTypes={serviceHostTypes}
+                        updateServiceHostingType={onChangeServiceHostingType}
+                        disabledAlways={false}
+                        previousSelection={selectServiceHostType}
+                    ></ServiceHostingSelection>
                 </div>
-                <RegionInfo selectRegion={selectRegion} onChangeRegion={onChangeRegion} regionList={regionList} />
-                {availabilityZoneConfigs.map((availabilityZoneConfig) => {
-                    return (
-                        <AvailabilityZoneFormItem
-                            availabilityZoneConfig={availabilityZoneConfig}
-                            selectRegion={selectRegion}
-                            onAvailabilityZoneChange={onAvailabilityZoneChange}
-                            selectAvailabilityZones={selectAvailabilityZones}
-                            selectCsp={selectCsp}
-                            key={availabilityZoneConfig.varName}
-                        />
-                    );
-                })}
-                <BillingModeSelection
-                    selectBillingMode={selectBillingMode}
-                    setSelectBillingMode={setSelectBillingMode}
-                    billingModes={billingModes}
-                />
-                <FlavorInfo selectFlavor={selectFlavor} flavorList={flavorList} onChangeFlavor={onChangeFlavor} />
-                <div className={serviceOrderStyles.migrateStepButtonInnerClass}>
-                    <Space size={'large'}>
-                        <Button
-                            type='primary'
-                            className={'migrate-steps-operation-button-clas'}
-                            onClick={() => {
-                                prev();
+                <div className={serviceOrderStyles.orderFormGroupItems}>
+                    <div
+                        className={`${serviceOrderStyles.orderFormSelectionStyle} ${appStyles.contentTitle} ${serviceOrderStyles.orderFormSelectionFirstInGroup}`}
+                    >
+                        <Tabs
+                            type='card'
+                            size='middle'
+                            activeKey={selectArea}
+                            tabPosition={'top'}
+                            items={areaList}
+                            onChange={(area) => {
+                                onChangeAreaValue(area);
                             }}
-                            disabled={isPreviousDisabled}
-                        >
-                            Previous
-                        </Button>
-                        <Button
-                            type='primary'
-                            disabled={
-                                getAvailabilityZonesForRegionQuery.isError ||
-                                (isAvailabilityZoneRequired() && getAvailabilityZonesForRegionQuery.data?.length === 0)
-                            }
-                            htmlType='submit'
-                        >
-                            Next
-                        </Button>
-                    </Space>
+                        />
+                    </div>
+                    <RegionSelection
+                        selectRegion={selectRegion}
+                        onChangeRegion={onChangeRegion}
+                        regionList={regionList}
+                    />
+                    {availabilityZoneConfigs.map((availabilityZoneConfig) => {
+                        return (
+                            <AvailabilityZoneFormItem
+                                availabilityZoneConfig={availabilityZoneConfig}
+                                selectRegion={selectRegion}
+                                onAvailabilityZoneChange={onAvailabilityZoneChange}
+                                selectAvailabilityZones={selectAvailabilityZones}
+                                selectCsp={selectCsp}
+                                key={availabilityZoneConfig.varName}
+                            />
+                        );
+                    })}
+                </div>
+                <div className={serviceOrderStyles.orderFormGroupItems}>
+                    <BillingModeSelection
+                        selectBillingMode={selectBillingMode}
+                        setSelectBillingMode={setSelectBillingMode}
+                        billingModes={billingModes}
+                    />
+                    <FlavorSelection
+                        selectFlavor={selectFlavor}
+                        flavorList={flavorList}
+                        onChangeFlavor={onChangeFlavor}
+                    />
                 </div>
             </div>
+            <div className={serviceOrderStyles.migrateStepButtonInnerClass}>
+                <Space size={'large'}>
+                    <Button
+                        type='primary'
+                        className={'migrate-steps-operation-button-clas'}
+                        onClick={() => {
+                            prev();
+                        }}
+                        disabled={isPreviousDisabled}
+                    >
+                        Previous
+                    </Button>
+                    <Button
+                        type='primary'
+                        disabled={
+                            getAvailabilityZonesForRegionQuery.isError ||
+                            (isAvailabilityZoneRequired() && getAvailabilityZonesForRegionQuery.data?.length === 0)
+                        }
+                        htmlType='submit'
+                    >
+                        Next
+                    </Button>
+                </Space>
+            </div>
         </Form>
     );
 };
diff --git a/src/styles/app.module.css b/src/styles/app.module.css
index 12b82fcb..50f216b7 100644
--- a/src/styles/app.module.css
+++ b/src/styles/app.module.css
@@ -75,7 +75,6 @@
 .content-title {
     font-size: 20px;
     font-weight: bold;
-    width: 400px;
 }
 
 .menu-loading {
diff --git a/src/styles/flavor.module.css b/src/styles/flavor.module.css
index b25f228f..5f5f3736 100644
--- a/src/styles/flavor.module.css
+++ b/src/styles/flavor.module.css
@@ -70,7 +70,6 @@
     flex-wrap: wrap;
     gap: 10px;
     margin: 0 0 20px 0;
-    font-weight: bold;
     font-size: 14px;
 }
 
@@ -103,3 +102,7 @@
 .ant-radio-button-wrapper-checked.ant-radio-button-wrapper-disabled {
     background-color: transparent !important;
 }
+
+.flavor-feature-item-name {
+    font-weight: lighter;
+}
diff --git a/src/styles/service-order.module.css b/src/styles/service-order.module.css
index 7f76a6da..3a90a79b 100644
--- a/src/styles/service-order.module.css
+++ b/src/styles/service-order.module.css
@@ -3,28 +3,13 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-.order-navigate {
-    display: flex;
-    border: 1px solid transparent;
-    color: rgb(24, 120, 255);
-    font-weight: bold;
-    padding: 10px;
-    width: 80px;
-}
-
-.order-navigate:hover {
-    cursor: pointer;
-    font-weight: bold;
-    text-shadow: 0 0 1px rgb(24, 120, 255);
-    width: 80px;
-}
-
 .Line {
     height: 1px;
     border: 0 solid transparent;
     color: black;
     padding: 0;
     background: #f2f2f2;
+    width: 100%;
 }
 
 .order-select-migrate-target {
@@ -72,16 +57,18 @@
 }
 
 .order-param-submit {
-    float: left;
-    width: 450px;
+    text-align: right;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+.order-navigate {
     text-align: right;
     margin-top: 15px;
     margin-bottom: 15px;
 }
 
 .order-param-deploy {
-    float: left;
-    width: 600px;
     text-align: right;
     margin-top: 15px;
     margin-bottom: 15px;
@@ -220,12 +207,22 @@
 
 .order-form-selection-style {
     margin: 0 0 20px 0;
-    font-weight: bold;
     font-size: 14px;
+    padding-right: 20px;
+    place-content: center;
+}
+
+.order-form-item-name {
+    font-weight: bold;
+}
+
+.order-form-selection-first-in-group {
+    padding-top: 20px;
 }
 
 .select-box-class {
     box-sizing: border-box;
+    width: 450px;
 }
 
 .select-cloud-provider-class {
@@ -238,6 +235,7 @@
 
 .version-drop-down {
     width: fit-content;
+    margin-top: 15px;
 }
 
 .content-title-api {
@@ -248,8 +246,8 @@
     cursor: pointer;
     display: inline;
     padding: 0;
-    margin-left: 155px;
     margin-top: 10px;
+    float: right;
 }
 
 .services-loading-error {
@@ -348,3 +346,24 @@
     font-size: 14px;
     font-weight: normal;
 }
+
+.order-form-flex-elements {
+    display: flex;
+}
+
+.order-form-group-items {
+    box-shadow:
+        0 1px 1px 0 rgba(0, 0, 0, 0),
+        0 6px 20px 0 rgba(0, 0, 0, 0.1);
+    padding-left: 50px;
+    margin-top: 20px;
+    padding-bottom: 20px;
+}
+
+.order-params-first-param {
+    padding-top: 20px;
+}
+
+.order-form-inline-display {
+    display: block;
+}
diff --git a/src/styles/table.module.css b/src/styles/table.module.css
index 240a41bf..9e2299f1 100644
--- a/src/styles/table.module.css
+++ b/src/styles/table.module.css
@@ -5,6 +5,7 @@
 
 .generic-table-container {
     padding: 24px;
+    display: grid;
 }
 
 .table-load-failure-alert {