diff --git a/x-pack/legacy/plugins/ml/common/constants/validation.ts b/x-pack/legacy/plugins/ml/common/constants/validation.ts
index 6ac63310d5d17c..e971baf769c1a4 100644
--- a/x-pack/legacy/plugins/ml/common/constants/validation.ts
+++ b/x-pack/legacy/plugins/ml/common/constants/validation.ts
@@ -21,4 +21,4 @@ export const JOB_ID_MAX_LENGTH = 64;
  * Job ID must contain lowercase alphanumeric (a-z and 0-9), hyphens or underscores.
  * It must also start and end with an alphanumeric character.
  */
-export const JOB_ID_PATTERN = /^(?![\-_])[a-z0-9\-_]*(?<![\-_])$/;
+export const JOB_ID_PATTERN = /^([a-z0-9]+[a-z0-9\-_]*(?<![\-_]))?$/;
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/module_jobs.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/module_jobs.tsx
index e225e3ccc016aa..7baa2688249312 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/module_jobs.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/module_jobs.tsx
@@ -7,14 +7,14 @@
 import React, { FC } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
-  EuiBadge,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiListGroup,
-  EuiListGroupItem,
+  EuiIcon,
   EuiLoadingSpinner,
   EuiText,
   EuiTitle,
+  EuiSpacer,
+  EuiFlexGrid,
 } from '@elastic/eui';
 
 interface ModuleJobsProps {
@@ -32,71 +32,94 @@ export const ModuleJobs: FC<ModuleJobsProps> = ({ jobs, jobPrefix, isSaving }) =
         </h4>
       </EuiTitle>
 
-      <EuiListGroup bordered={false} flush={true} wrapText={true} maxWidth={true}>
+      <ul>
         {jobs.map(({ id, config: { description }, setupResult, datafeedResult }) => (
-          <EuiListGroupItem
-            key={id}
-            label={
-              <EuiFlexGroup alignItems="center" gutterSize="s">
-                <EuiFlexItem>
-                  <EuiFlexGroup>
-                    <EuiFlexItem grow={false}>
-                      <EuiText size="s" color="secondary">
-                        {jobPrefix}
-                        {id}
+          <li key={id}>
+            <EuiFlexGroup alignItems="center" gutterSize="s" justifyContent="spaceBetween">
+              <EuiFlexItem>
+                <EuiText size="s" color="secondary">
+                  {jobPrefix}
+                  {id}
+                </EuiText>
+
+                <EuiText size="s" color="subdued">
+                  {description}
+                </EuiText>
+
+                {setupResult && setupResult.error && (
+                  <EuiText size="xs" color="danger">
+                    {setupResult.error.msg}
+                  </EuiText>
+                )}
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                {isSaving && <EuiLoadingSpinner size="m" />}
+                {setupResult && datafeedResult && (
+                  <EuiFlexGrid gutterSize="s" style={{ width: '200px' }}>
+                    <EuiFlexItem>
+                      <EuiText
+                        color={setupResult.success ? 'secondary' : 'danger'}
+                        size="xs"
+                        className="eui-textNoWrap"
+                        textAlign="center"
+                      >
+                        <EuiIcon
+                          type={setupResult.success ? 'check' : 'cross'}
+                          color={setupResult.success ? 'secondary' : 'danger'}
+                          size="s"
+                        />
+                        <FormattedMessage
+                          id="xpack.ml.newJob.simple.recognize.jobLabel"
+                          defaultMessage="Job"
+                        />
                       </EuiText>
                     </EuiFlexItem>
+
                     <EuiFlexItem>
-                      {setupResult && datafeedResult && (
-                        <EuiFlexGroup gutterSize="none">
-                          <EuiBadge
-                            color={setupResult.success ? 'secondary' : 'danger'}
-                            iconType={setupResult.success ? 'check' : 'cross'}
-                          >
-                            <FormattedMessage
-                              id="xpack.ml.newJob.simple.recognize.jobLabel"
-                              defaultMessage="Job"
-                            />
-                          </EuiBadge>
-                          <EuiBadge
-                            color={datafeedResult.success ? 'secondary' : 'danger'}
-                            iconType={datafeedResult.success ? 'check' : 'cross'}
-                          >
-                            <FormattedMessage
-                              id="xpack.ml.newJob.simple.recognize.datafeedLabel"
-                              defaultMessage="Datafeed"
-                            />
-                          </EuiBadge>
-                          <EuiBadge
-                            color={datafeedResult.started ? 'secondary' : 'danger'}
-                            iconType={datafeedResult.started ? 'check' : 'cross'}
-                          >
-                            <FormattedMessage
-                              id="xpack.ml.newJob.simple.recognize.runningLabel"
-                              defaultMessage="Running"
-                            />
-                          </EuiBadge>
-                        </EuiFlexGroup>
-                      )}
+                      <EuiText
+                        color={datafeedResult.success ? 'secondary' : 'danger'}
+                        size="xs"
+                        className="eui-textNoWrap"
+                        textAlign="center"
+                      >
+                        <EuiIcon
+                          type={datafeedResult.success ? 'check' : 'cross'}
+                          color={datafeedResult.success ? 'secondary' : 'danger'}
+                          size="s"
+                        />
+                        <FormattedMessage
+                          id="xpack.ml.newJob.simple.recognize.datafeedLabel"
+                          defaultMessage="Datafeed"
+                        />
+                      </EuiText>
                     </EuiFlexItem>
-                  </EuiFlexGroup>
 
-                  <EuiText size="s" color="subdued">
-                    {description}
-                  </EuiText>
-
-                  {setupResult && setupResult.error && (
-                    <EuiText size="xs" color="danger">
-                      {setupResult.error.msg}
-                    </EuiText>
-                  )}
-                </EuiFlexItem>
-                <EuiFlexItem>{isSaving && <EuiLoadingSpinner size="m" />}</EuiFlexItem>
-              </EuiFlexGroup>
-            }
-          />
+                    <EuiFlexItem>
+                      <EuiText
+                        color={datafeedResult.started ? 'secondary' : 'danger'}
+                        size="xs"
+                        className="eui-textNoWrap"
+                        textAlign="center"
+                      >
+                        <EuiIcon
+                          type={datafeedResult.started ? 'check' : 'cross'}
+                          color={datafeedResult.started ? 'secondary' : 'danger'}
+                          size="s"
+                        />
+                        <FormattedMessage
+                          id="xpack.ml.newJob.simple.recognize.runningLabel"
+                          defaultMessage="Running"
+                        />
+                      </EuiText>
+                    </EuiFlexItem>
+                  </EuiFlexGrid>
+                )}
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer size="m" />
+          </li>
         ))}
-      </EuiListGroup>
+      </ul>
     </>
   );
 };
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/page.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/page.tsx
index 2fb4f1a852693b..f3714516db4f0e 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/page.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/page.tsx
@@ -143,7 +143,7 @@ export const Page: FC<PageProps> = ({ moduleId, existingGroupIds }) => {
   }, []);
 
   const jobPrefixValidator = composeValidators(
-    patternValidator(/^(?![\-_])[a-z0-9\-_]*/),
+    patternValidator(/^([a-z0-9]+[a-z0-9\-_]*)?$/),
     maxLengthValidator(JOB_ID_MAX_LENGTH - Math.max(...jobs.map(({ id }) => id.length)))
   );
   const groupValidator = composeValidators(
@@ -259,8 +259,8 @@ export const Page: FC<PageProps> = ({ moduleId, existingGroupIds }) => {
           </>
         )}
 
-        <EuiFlexGroup wrap={true} gutterSize="s">
-          <EuiFlexItem>
+        <EuiFlexGroup wrap={true} gutterSize="m">
+          <EuiFlexItem grow={1}>
             <EuiPanel>
               <EuiTitle size="s">
                 <h4>
@@ -442,7 +442,7 @@ export const Page: FC<PageProps> = ({ moduleId, existingGroupIds }) => {
               />
             </EuiPanel>
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={2}>
             <EuiPanel>
               <ModuleJobs
                 jobs={jobs}
@@ -450,20 +450,19 @@ export const Page: FC<PageProps> = ({ moduleId, existingGroupIds }) => {
                 isSaving={saveState === SAVE_STATE.SAVING}
               />
             </EuiPanel>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            {Object.keys(kibanaObjects).map((objectType, i) => (
-              <Fragment key={objectType}>
-                <EuiPanel>
+            <EuiSpacer size="m" />
+            <EuiPanel>
+              {Object.keys(kibanaObjects).map((objectType, i) => (
+                <Fragment key={objectType}>
                   <KibanaObjects
                     objectType={objectType}
                     kibanaObjects={kibanaObjects[objectType]}
                     isSaving={saveState === SAVE_STATE.SAVING}
                   />
-                </EuiPanel>
-                {i < Object.keys(kibanaObjects).length - 1 && <EuiSpacer size="s" />}
-              </Fragment>
-            ))}
+                  {i < Object.keys(kibanaObjects).length - 1 && <EuiSpacer size="s" />}
+                </Fragment>
+              ))}
+            </EuiPanel>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="l" />