diff --git a/src/components/content/deployedServices/myServices/MyServices.tsx b/src/components/content/deployedServices/myServices/MyServices.tsx
index 62273836b..cdf1321b0 100644
--- a/src/components/content/deployedServices/myServices/MyServices.tsx
+++ b/src/components/content/deployedServices/myServices/MyServices.tsx
@@ -1420,7 +1420,7 @@ function MyServices(): React.JSX.Element {
                     destroyOnClose={true}
                     footer={null}
                     onCancel={handleCancelMigrateModel}
-                    width={2140}
+                    width={1400}
                     mask={true}
                 >
                     <Migrate currentSelectedService={activeRecord} />
diff --git a/src/components/content/order/common/BillingModeSelection.tsx b/src/components/content/order/common/BillingModeSelection.tsx
index 44ff10c0d..191476cb1 100644
--- a/src/components/content/order/common/BillingModeSelection.tsx
+++ b/src/components/content/order/common/BillingModeSelection.tsx
@@ -3,7 +3,7 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { Alert, Flex, Form, Radio } from 'antd';
+import { Alert, Col, Flex, Form, Radio, Row } from 'antd';
 import React, { Dispatch, SetStateAction } from 'react';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
 import { billingMode } from '../../../../xpanse-api/generated';
@@ -22,26 +22,29 @@ export const BillingModeSelection = ({
     }
 
     return (
-        <div className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
-            <Form.Item
-                key={'BillingMode'}
-                label={
-                    <p
-                        className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
-                    >
-                        {'Billing Mode'}
-                    </p>
-                }
-                labelCol={{ span: 2, style: { textAlign: 'left' } }}
-                required={true}
-                rules={[
-                    {
-                        required: true,
-                        message: 'billingMode is required',
-                    },
-                    { type: 'string' },
-                ]}
-            >
+        <Row className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
+            <Col className={serviceOrderStyles.orderFormLabel}>
+                <Form.Item
+                    key={'BillingMode'}
+                    label={
+                        <p
+                            className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
+                        >
+                            {'Billing Mode'}
+                        </p>
+                    }
+                    labelCol={{ style: { textAlign: 'left' } }}
+                    required={true}
+                    rules={[
+                        {
+                            required: true,
+                            message: 'billingMode is required',
+                        },
+                        { type: 'string' },
+                    ]}
+                ></Form.Item>
+            </Col>
+            <Col>
                 {billingModes && billingModes.length > 0 ? (
                     <Flex vertical gap='middle'>
                         <Radio.Group
@@ -66,7 +69,7 @@ export const BillingModeSelection = ({
                         closable={false}
                     />
                 )}
-            </Form.Item>
-        </div>
+            </Col>
+        </Row>
     );
 };
diff --git a/src/components/content/order/common/FlavorSelection.tsx b/src/components/content/order/common/FlavorSelection.tsx
index cd0a76aad..86243ecea 100644
--- a/src/components/content/order/common/FlavorSelection.tsx
+++ b/src/components/content/order/common/FlavorSelection.tsx
@@ -5,7 +5,7 @@
 
 import { LoadingOutlined } from '@ant-design/icons';
 import { UseQueryResult } from '@tanstack/react-query';
-import { Flex, Form, Radio, Spin } from 'antd';
+import { Col, Flex, Form, Radio, Row, Spin } from 'antd';
 import React from 'react';
 import flavorStyles from '../../../../styles/flavor.module.css';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
@@ -33,19 +33,22 @@ export const FlavorSelection = ({
     };
 
     return (
-        <div className={`${serviceOrderStyles.orderFormSelectionFirstInGroup} ${flavorStyles.regionFlavorContent}`}>
-            <Form.Item
-                name='selectFlavor'
-                label={
-                    <p
-                        className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
-                    >
-                        {'Flavor'}
-                    </p>
-                }
-                labelCol={{ span: 2, style: { textAlign: 'left' } }}
-                rules={[{ required: true, message: 'Flavor is required' }]}
-            >
+        <Row className={`${serviceOrderStyles.orderFormSelectionFirstInGroup} ${flavorStyles.regionFlavorContent}`}>
+            <Col className={serviceOrderStyles.orderFormLabel}>
+                <Form.Item
+                    name='selectFlavor'
+                    label={
+                        <p
+                            className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
+                        >
+                            {'Flavor'}
+                        </p>
+                    }
+                    labelCol={{ style: { textAlign: 'left' } }}
+                    rules={[{ required: true, message: 'Flavor is required' }]}
+                ></Form.Item>
+            </Col>
+            <Col>
                 {flavorList && flavorList.length > 0 ? (
                     <Flex vertical gap='middle'>
                         <Radio.Group
@@ -97,7 +100,7 @@ export const FlavorSelection = ({
                         </Radio.Group>
                     </Flex>
                 ) : null}
-            </Form.Item>
-        </div>
+            </Col>
+        </Row>
     );
 };
diff --git a/src/components/content/order/common/MigrateServiceSubmitAvailabilityZoneInfo.tsx b/src/components/content/order/common/MigrateServiceSubmitAvailabilityZoneInfo.tsx
index a9a5256c4..ad5da79c5 100644
--- a/src/components/content/order/common/MigrateServiceSubmitAvailabilityZoneInfo.tsx
+++ b/src/components/content/order/common/MigrateServiceSubmitAvailabilityZoneInfo.tsx
@@ -3,7 +3,7 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { Flex, Form, Radio } from 'antd';
+import { Col, Flex, Form, Radio, Row } from 'antd';
 import React from 'react';
 import '../../../../styles/service-order.module.css';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
@@ -17,41 +17,46 @@ export const MigrateServiceSubmitAvailabilityZoneInfo = ({
     availabilityZones: Record<string, string>;
 }): React.JSX.Element => {
     return (
-        <div className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
+        <Row className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
             {availabilityZoneConfigs
                 ? availabilityZoneConfigs.map((availabilityZone) => (
-                      <Form.Item
-                          key={availabilityZone.varName}
-                          name={availabilityZone.displayName}
-                          label={
-                              <p
-                                  className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
-                              >
-                                  {availabilityZone.displayName}
-                              </p>
-                          }
-                          labelCol={{ span: 2, style: { textAlign: 'left' } }}
-                      >
-                          <Flex vertical gap='middle'>
-                              <Radio.Group buttonStyle='solid' disabled={true}>
-                                  <Radio.Button
-                                      name={availabilityZone.displayName}
-                                      key={availabilityZone.varName}
-                                      value={
-                                          Object.keys(availabilityZones).length > 0
+                      <>
+                          <Col className={serviceOrderStyles.orderFormLabel}>
+                              <Form.Item
+                                  key={availabilityZone.varName}
+                                  name={availabilityZone.displayName}
+                                  label={
+                                      <p
+                                          className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
+                                      >
+                                          {availabilityZone.displayName}
+                                      </p>
+                                  }
+                                  labelCol={{ style: { textAlign: 'left' } }}
+                              ></Form.Item>
+                          </Col>
+                          <Col>
+                              <Flex vertical gap='middle'>
+                                  <Radio.Group buttonStyle='solid' disabled={true}>
+                                      <Radio.Button
+                                          name={availabilityZone.displayName}
+                                          key={availabilityZone.varName}
+                                          value={
+                                              Object.keys(availabilityZones).length > 0
+                                                  ? availabilityZones[availabilityZone.varName]
+                                                  : {}
+                                          }
+                                      >
+                                          {availabilityZones[availabilityZone.varName]
                                               ? availabilityZones[availabilityZone.varName]
-                                              : {}
-                                      }
-                                  >
-                                      {availabilityZones[availabilityZone.varName]
-                                          ? availabilityZones[availabilityZone.varName]
-                                          : 'Not Selected'}
-                                  </Radio.Button>
-                              </Radio.Group>
-                          </Flex>
-                      </Form.Item>
+                                              : 'Not Selected'}
+                                      </Radio.Button>
+                                  </Radio.Group>
+                              </Flex>
+                          </Col>
+                      </>
                   ))
                 : undefined}
-        </div>
+        </Row>
     );
 };
diff --git a/src/components/content/order/common/MigrateServiceSubmitBillingMode.tsx b/src/components/content/order/common/MigrateServiceSubmitBillingMode.tsx
index 61c4de27b..c8d6c1525 100644
--- a/src/components/content/order/common/MigrateServiceSubmitBillingMode.tsx
+++ b/src/components/content/order/common/MigrateServiceSubmitBillingMode.tsx
@@ -3,25 +3,28 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { Flex, Form, Radio } from 'antd';
+import { Col, Flex, Form, Radio, Row } from 'antd';
 import React from 'react';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
 
 export const MigrateServiceSubmitBillingMode = ({ selectBillMode }: { selectBillMode: string }): React.JSX.Element => {
     return (
-        <div className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
-            <Form.Item
-                key={'BillingMode'}
-                label={
-                    <p
-                        className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
-                    >
-                        {'Billing Mode'}
-                    </p>
-                }
-                labelCol={{ span: 2, style: { textAlign: 'left' } }}
-                required={true}
-            >
+        <Row className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
+            <Col className={serviceOrderStyles.orderFormLabel}>
+                <Form.Item
+                    key={'BillingMode'}
+                    label={
+                        <p
+                            className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
+                        >
+                            {'Billing Mode'}
+                        </p>
+                    }
+                    labelCol={{ style: { textAlign: 'left' } }}
+                    required={true}
+                ></Form.Item>
+            </Col>
+            <Col>
                 <Flex vertical gap='middle'>
                     <Radio.Group disabled={true} buttonStyle='solid'>
                         <Radio.Button key={selectBillMode} value={selectBillMode}>
@@ -29,7 +32,7 @@ export const MigrateServiceSubmitBillingMode = ({ selectBillMode }: { selectBill
                         </Radio.Button>
                     </Radio.Group>
                 </Flex>
-            </Form.Item>
-        </div>
+            </Col>
+        </Row>
     );
 };
diff --git a/src/components/content/order/common/RegionSelection.tsx b/src/components/content/order/common/RegionSelection.tsx
index a3580a567..98d23d5a0 100644
--- a/src/components/content/order/common/RegionSelection.tsx
+++ b/src/components/content/order/common/RegionSelection.tsx
@@ -3,7 +3,7 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { Form, Select, Space } from 'antd';
+import { Col, Form, Row, Select, Space } from 'antd';
 import React from 'react';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
 import { RegionDropDownInfo } from '../types/RegionDropDownInfo';
@@ -20,19 +20,22 @@ export const RegionSelection = ({
     disabled?: boolean;
 }): React.JSX.Element => {
     return (
-        <div className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
-            <Form.Item
-                name='selectRegion'
-                label={
-                    <p
-                        className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
-                    >
-                        {'Region'}
-                    </p>
-                }
-                labelCol={{ span: 2, style: { textAlign: 'left' } }}
-                rules={[{ required: true, message: 'Region is required' }]}
-            >
+        <Row className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
+            <Col className={serviceOrderStyles.orderFormLabel}>
+                <Form.Item
+                    name='selectRegion'
+                    label={
+                        <p
+                            className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
+                        >
+                            {'Region'}
+                        </p>
+                    }
+                    labelCol={{ style: { textAlign: 'left' } }}
+                    rules={[{ required: true, message: 'Region is required' }]}
+                ></Form.Item>
+            </Col>
+            <Col>
                 <Space wrap>
                     <Select
                         className={serviceOrderStyles.selectBoxClass}
@@ -47,7 +50,7 @@ export const RegionSelection = ({
                         disabled={disabled !== undefined}
                     />
                 </Space>
-            </Form.Item>
-        </div>
+            </Col>
+        </Row>
     );
 };
diff --git a/src/components/content/order/common/ServiceHostingSelection.tsx b/src/components/content/order/common/ServiceHostingSelection.tsx
index ff9415220..58b93aa81 100644
--- a/src/components/content/order/common/ServiceHostingSelection.tsx
+++ b/src/components/content/order/common/ServiceHostingSelection.tsx
@@ -3,7 +3,7 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { Form, Radio, RadioChangeEvent, Space } from 'antd';
+import { Col, Form, Radio, RadioChangeEvent, Row, Space } from 'antd';
 import React from 'react';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
 import { serviceHostingType } from '../../../../xpanse-api/generated';
@@ -32,18 +32,21 @@ export function ServiceHostingSelection({
           : undefined;
 
     return (
-        <div className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
-            <Form.Item
-                name='Service Hosted By'
-                label={
-                    <p
-                        className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
-                    >
-                        {'Service Hosted By'}
-                    </p>
-                }
-                labelCol={{ span: 2, style: { textAlign: 'left' } }}
-            >
+        <Row className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
+            <Col className={serviceOrderStyles.orderFormLabel}>
+                <Form.Item
+                    name='Service Hosted By'
+                    label={
+                        <p
+                            className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
+                        >
+                            {'Service Hosted By'}
+                        </p>
+                    }
+                    labelCol={{ style: { textAlign: 'left' } }}
+                ></Form.Item>
+            </Col>
+            <Col className={serviceOrderStyles.orderFormServiceHost}>
                 <Space wrap>
                     <Radio.Group
                         onChange={onChange}
@@ -55,7 +58,7 @@ export function ServiceHostingSelection({
                         <Radio value={serviceHostingType.SERVICE_VENDOR}>service-vendor</Radio>
                     </Radio.Group>
                 </Space>
-            </Form.Item>
-        </div>
+            </Col>
+        </Row>
     );
 }
diff --git a/src/components/content/order/common/availabilityzone/AvailabilityZoneFormItem.tsx b/src/components/content/order/common/availabilityzone/AvailabilityZoneFormItem.tsx
index 72c91fc0c..db56fd559 100644
--- a/src/components/content/order/common/availabilityzone/AvailabilityZoneFormItem.tsx
+++ b/src/components/content/order/common/availabilityzone/AvailabilityZoneFormItem.tsx
@@ -3,7 +3,7 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { Form } from 'antd';
+import { Col, Form, Row } from 'antd';
 import React from 'react';
 import serviceOrderStyles from '../../../../../styles/service-order.module.css';
 import { AvailabilityZoneConfig, csp } from '../../../../../xpanse-api/generated';
@@ -60,28 +60,29 @@ export function AvailabilityZoneFormItem({
     }
 
     return (
-        <div className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
-            <Form.Item
-                key={availabilityZoneConfig.varName}
-                label={
-                    <p
-                        className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
-                    >
-                        {availabilityZoneConfig.displayName}
-                    </p>
-                }
-                labelCol={{ span: 2, style: { textAlign: 'left' } }}
-                required={availabilityZoneConfig.mandatory}
-                rules={[
-                    {
-                        required: availabilityZoneConfig.mandatory,
-                        message: availabilityZoneConfig.displayName + 'is required',
-                    },
-                    { type: 'string' },
-                ]}
-            >
-                {getFormContent()}
-            </Form.Item>
-        </div>
+        <Row className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
+            <Col className={serviceOrderStyles.orderFormLabel}>
+                <Form.Item
+                    key={availabilityZoneConfig.varName}
+                    label={
+                        <p
+                            className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
+                        >
+                            {availabilityZoneConfig.displayName}
+                        </p>
+                    }
+                    labelCol={{ style: { textAlign: 'left' } }}
+                    required={availabilityZoneConfig.mandatory}
+                    rules={[
+                        {
+                            required: availabilityZoneConfig.mandatory,
+                            message: availabilityZoneConfig.displayName + 'is required',
+                        },
+                        { type: 'string' },
+                    ]}
+                ></Form.Item>
+            </Col>
+            <Col>{getFormContent()}</Col>
+        </Row>
     );
 }
diff --git a/src/components/content/order/formElements/CspSelect.tsx b/src/components/content/order/formElements/CspSelect.tsx
index 805bd2163..ab5e6f81a 100644
--- a/src/components/content/order/formElements/CspSelect.tsx
+++ b/src/components/content/order/formElements/CspSelect.tsx
@@ -3,7 +3,7 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { Form, Image } from 'antd';
+import { Col, Form, Image, Row } from 'antd';
 import React from 'react';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
 import { csp, name } from '../../../../xpanse-api/generated';
@@ -19,64 +19,69 @@ export default function CspSelect({
     onChangeHandler: undefined | ((csp: csp) => void);
 }): React.JSX.Element {
     return (
-        <div className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
-            <Form.Item
-                name='Cloud Service Provider'
-                label={
-                    <p
-                        className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
-                    >
-                        {'Cloud Service Provider'}
-                    </p>
-                }
-                labelCol={{ span: 2, style: { textAlign: 'left' } }}
-            >
-                {onChangeHandler && cspList.length > 0 ? (
-                    cspList.map((item, index) => {
-                        return (
-                            <div
-                                onClick={() => {
-                                    onChangeHandler(item);
-                                }}
-                                key={index}
-                                className={
-                                    selectCsp.valueOf() === item.valueOf()
-                                        ? serviceOrderStyles.cloudProviderSelectHover
-                                        : serviceOrderStyles.cloudProviderSelect
-                                }
-                            >
+        <Row className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
+            <Col className={serviceOrderStyles.orderFormLabel}>
+                <Form.Item
+                    name='Cloud Service Provider'
+                    label={
+                        <p
+                            className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
+                        >
+                            {'Cloud Service Provider'}
+                        </p>
+                    }
+                    labelCol={{ style: { textAlign: 'left' } }}
+                ></Form.Item>
+            </Col>
+            <Col>
+                <Row>
+                    {onChangeHandler && cspList.length > 0 ? (
+                        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 name)?.logo}
+                                        alt={item}
+                                        preview={false}
+                                        fallback={'https://img.shields.io/badge/-' + item + '-gray'}
+                                    />
+                                    <div className={serviceOrderStyles.serviceTypeOptionInfo} />
+                                </div>
+                            );
+                        })
+                    ) : (
+                        <div className={serviceOrderStyles.servicesContentBody}>
+                            <div className={serviceOrderStyles.cloudProviderSelectHover}>
                                 <Image
                                     width={200}
                                     height={56}
-                                    src={cspMap.get(item as unknown as name)?.logo}
-                                    alt={item}
+                                    src={cspMap.get(selectCsp as unknown as name)?.logo}
+                                    alt={selectCsp}
                                     preview={false}
-                                    fallback={'https://img.shields.io/badge/-' + item + '-gray'}
+                                    fallback={
+                                        'https://img.shields.io/badge/-' +
+                                        (selectCsp.length === 0 ? '' : selectCsp.toString()) +
+                                        '-gray'
+                                    }
                                 />
                                 <div className={serviceOrderStyles.serviceTypeOptionInfo} />
                             </div>
-                        );
-                    })
-                ) : (
-                    <div className={serviceOrderStyles.servicesContentBody}>
-                        <div className={serviceOrderStyles.cloudProviderSelectHover}>
-                            <Image
-                                width={200}
-                                height={56}
-                                src={cspMap.get(selectCsp as unknown as name)?.logo}
-                                alt={selectCsp}
-                                preview={false}
-                                fallback={
-                                    'https://img.shields.io/badge/-' +
-                                    (selectCsp.length === 0 ? '' : selectCsp.toString()) +
-                                    '-gray'
-                                }
-                            />
-                            <div className={serviceOrderStyles.serviceTypeOptionInfo} />
                         </div>
-                    </div>
-                )}
-            </Form.Item>
-        </div>
+                    )}
+                </Row>
+            </Col>
+        </Row>
     );
 }
diff --git a/src/components/content/order/formElements/VersionSelect.tsx b/src/components/content/order/formElements/VersionSelect.tsx
index 2f4e4a799..9a69d250a 100644
--- a/src/components/content/order/formElements/VersionSelect.tsx
+++ b/src/components/content/order/formElements/VersionSelect.tsx
@@ -3,7 +3,7 @@
  * SPDX-FileCopyrightText: Huawei Inc.
  */
 
-import { Form, Select, Space } from 'antd';
+import { Col, Form, Row, Select, Space } from 'antd';
 import React from 'react';
 import serviceOrderStyles from '../../../../styles/service-order.module.css';
 
@@ -17,18 +17,21 @@ export default function VersionSelect({
     onChangeVersion: (version: string) => void;
 }): React.JSX.Element {
     return (
-        <div className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
-            <Form.Item
-                name='Version'
-                label={
-                    <p
-                        className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
-                    >
-                        {'Version'}
-                    </p>
-                }
-                labelCol={{ span: 2, style: { textAlign: 'left' } }}
-            >
+        <Row className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
+            <Col className={serviceOrderStyles.orderFormLabel}>
+                <Form.Item
+                    name='Version'
+                    label={
+                        <p
+                            className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
+                        >
+                            {'Version'}
+                        </p>
+                    }
+                    labelCol={{ style: { textAlign: 'left' } }}
+                ></Form.Item>
+            </Col>
+            <Col>
                 <Space wrap>
                     <Select
                         value={selectVersion}
@@ -37,7 +40,7 @@ export default function VersionSelect({
                         options={versionList}
                     />
                 </Space>
-            </Form.Item>
-        </div>
+            </Col>
+        </Row>
     );
 }
diff --git a/src/styles/service-order.module.css b/src/styles/service-order.module.css
index 5a8650cce..d0308c137 100644
--- a/src/styles/service-order.module.css
+++ b/src/styles/service-order.module.css
@@ -115,44 +115,33 @@
 }
 
 .cloud-provider-select {
-    display: flex;
-    flex-flow: nowrap row;
-    padding: 0;
-    width: 200px;
-    height: 60px;
-    margin: 10px;
-    border: 1px solid #b5b5b5;
-    border-radius: 10px;
-    box-shadow: 0 0 0 2px #b5b5b5;
-}
-
-.cloud-provider-select-hover {
     cursor: pointer;
     display: flex;
     flex-flow: nowrap row;
-    padding: 0;
     width: 200px;
-    height: 62px;
-    border: 3px solid transparent;
+    height: 60px;
+    margin-top: 5px;
+    margin-right: 1em;
+    border: 1px solid transparent;
     outline: 1px transparent dashed;
     outline-offset: -5px;
-    border-radius: 10px;
-    box-shadow: 0 0 0 2px #b5b5b5;
+    border-radius: 5px;
+    box-shadow: 0 0 0 1px #b5b5b5;
 }
 
-.cloud-provider-select:hover {
+.cloud-provider-select-hover {
     cursor: pointer;
     display: flex;
     flex-flow: nowrap row;
-    padding: 0;
     width: 200px;
     height: 60px;
-    margin: 10px;
-    border: 3px solid #b5b5b5;
+    margin-top: 5px;
+    margin-right: 1em;
+    border: 1px solid transparent;
     outline: 1px transparent dashed;
-    outline-offset: -10px;
-    border-radius: 10px;
-    box-shadow: 0 0 0 2px #b5b5b5;
+    outline-offset: -5px;
+    border-radius: 5px;
+    box-shadow: 0 0 0 2px #1677ff;
 }
 
 .service-type-option-image {
@@ -223,12 +212,12 @@
 }
 
 .order-form-selection-first-in-group {
-    padding-top: 20px;
+    margin-top: 1em;
 }
 
 .select-box-class {
     box-sizing: border-box;
-    width: 450px;
+    width: 100%;
 }
 
 .select-cloud-provider-class {
@@ -381,3 +370,55 @@
     position: relative;
     top: -10px;
 }
+
+.order-form-service-host {
+    margin-top: 6px;
+}
+
+@media screen and (max-width: 3840px) {
+    .order-form-label {
+        width: 10%;
+    }
+}
+
+@media screen and (max-width: 1920px) {
+    .order-form-label {
+        width: 12%;
+    }
+}
+
+@media screen and (max-width: 1680px) {
+    .order-form-label {
+        width: 18%;
+    }
+}
+
+@media screen and (max-width: 1440px) {
+    .order-form-label {
+        width: 24%;
+    }
+}
+
+@media screen and (max-width: 1366px) {
+    .order-form-label {
+        width: 28%;
+    }
+}
+
+@media screen and (max-width: 1280px) {
+    .order-form-label {
+        width: 30%;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .order-form-label {
+        width: 40%;
+    }
+}
+
+@media screen and (max-width: 720px) {
+    .order-form-label {
+        width: 50%;
+    }
+}