diff --git a/packages/cp-frontend/.eslintrc b/packages/cp-frontend/.eslintrc
index a847796a..2390a96a 100644
--- a/packages/cp-frontend/.eslintrc
+++ b/packages/cp-frontend/.eslintrc
@@ -6,6 +6,7 @@
     // temp
     "no-undef": 1,
     "no-debugger": 1,
-    "no-negated-condition": 0
+    "no-negated-condition": 0,
+    "jsx-a11y/href-no-hash": 0
   }
 }
diff --git a/packages/cp-frontend/package.json b/packages/cp-frontend/package.json
index 597fb116..2a1dc770 100644
--- a/packages/cp-frontend/package.json
+++ b/packages/cp-frontend/package.json
@@ -6,6 +6,7 @@
   "main": "build/",
   "scripts": {
     "dev": "REACT_APP_GQL_PORT=3000 PORT=3069 REACT_APP_GQL_PROTOCOL=http react-scripts start",
+    "start-now": "REACT_APP_GQL_PORT=8080 PORT=3069 REACT_APP_GQL_HOSTNAME=joyent-cp-gql-mock-server-sxcvsebikv.now.sh react-scripts start",
     "start": "PORT=3069 react-scripts start",
     "build": "NODE_ENV=production react-scripts build",
     "lint:css": "echo 0",
diff --git a/packages/cp-frontend/src/assets/Import.svg b/packages/cp-frontend/src/assets/Import.svg
new file mode 100644
index 00000000..5fa71f93
--- /dev/null
+++ b/packages/cp-frontend/src/assets/Import.svg
@@ -0,0 +1,26 @@
+<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>Import</title>
+<desc>Created using Figma</desc>
+<g id="Canvas" transform="translate(-2061 2768)">
+<clipPath id="clip-0" clip-rule="evenodd">
+<path d="M 2061 -2768L 2085 -2768L 2085 -2744L 2061 -2744L 2061 -2768Z" fill="#FFFFFF"/>
+</clipPath>
+<g id="Import" clip-path="url(#clip-0)">
+<path d="M 2061 -2768L 2085 -2768L 2085 -2744L 2061 -2744L 2061 -2768Z" fill="#FFFFFF"/>
+<g id="Bottom">
+<use xlink:href="#path0_fill" transform="translate(2061 -2754)" fill="#464646"/>
+</g>
+<g id="Line">
+<use xlink:href="#path1_fill" transform="matrix(1 0 0 1 2072 -2768)" fill="#464646"/>
+</g>
+<g id="Arrow">
+<use xlink:href="#path2_fill" transform="translate(2067.29 -2755)" fill="#464646"/>
+</g>
+</g>
+</g>
+<defs>
+<path id="path0_fill" fill-rule="evenodd" d="M 0 0L 2 0L 2 8L 22 8L 22 0L 24 0L 24 10L 22 10L 2 10L 0 10L 0 0Z"/>
+<path id="path1_fill" fill-rule="evenodd" d="M 0 0L 2 0L 2 18L 0 18L 0 0Z"/>
+<path id="path2_fill" fill-rule="evenodd" d="M 1.41431 0L 0 1.41431L 4.29468 5.70557L 4.94971 6.36401L 5.70874 7.11987L 11.4143 1.41455L 10 0.000244141L 5.70728 4.29297L 1.41431 0Z"/>
+</defs>
+</svg>
diff --git a/packages/cp-frontend/src/components/manifest/environment.js b/packages/cp-frontend/src/components/manifest/environment.js
index abfe3230..a5e49964 100644
--- a/packages/cp-frontend/src/components/manifest/environment.js
+++ b/packages/cp-frontend/src/components/manifest/environment.js
@@ -49,7 +49,7 @@ export const Environment = ({
         loading={loading}
         type="submit"
       >
-        Continue
+        Next
       </Button>
     </ButtonsRow>
   ) : null;
diff --git a/packages/cp-frontend/src/components/manifest/label.js b/packages/cp-frontend/src/components/manifest/label.js
new file mode 100644
index 00000000..c96d568c
--- /dev/null
+++ b/packages/cp-frontend/src/components/manifest/label.js
@@ -0,0 +1,10 @@
+import { FormLabel } from 'joyent-ui-toolkit';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+const StyledFormLabel = styled(FormLabel)`
+  margin-top: ${remcalc(24)};
+  margin-bottom: ${props => props.bottomSpace ? remcalc(16) : remcalc(6)};
+`;
+
+export default StyledFormLabel;
diff --git a/packages/cp-frontend/src/components/manifest/manifest.js b/packages/cp-frontend/src/components/manifest/manifest.js
index ef0eabfd..f02726b5 100644
--- a/packages/cp-frontend/src/components/manifest/manifest.js
+++ b/packages/cp-frontend/src/components/manifest/manifest.js
@@ -1,13 +1,12 @@
 import React from 'react';
-import { FormGroup, FormMeta, Button, FormLabel } from 'joyent-ui-toolkit';
+import { FormGroup, FormMeta, Button } from 'joyent-ui-toolkit';
 import { Row } from 'react-styled-flexboxgrid';
 import remcalc from 'remcalc';
 import { Field } from 'redux-form';
 import { MEditor } from './editors';
+import StyledFormLabel from './label';
 
-const ButtonsRow = Row.extend`
-  margin: ${remcalc(29)} 0 ${remcalc(60)} 0;
-`;
+const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`;
 
 export const Manifest = ({
   handleSubmit,
@@ -19,7 +18,7 @@ export const Manifest = ({
   <form onSubmit={handleSubmit}>
     <FormGroup reduxForm>
       <FormMeta left>
-        <FormLabel>Project manifest</FormLabel>
+        <StyledFormLabel bottomSpace>Project manifest</StyledFormLabel>
       </FormMeta>
       <Field name="manifest" defaultValue={defaultValue} component={MEditor} />
     </FormGroup>
@@ -32,7 +31,7 @@ export const Manifest = ({
         loading={loading}
         type="submit"
       >
-        Environment
+        Next
       </Button>
     </ButtonsRow>
   </form>
diff --git a/packages/cp-frontend/src/components/manifest/name.js b/packages/cp-frontend/src/components/manifest/name.js
index 35e7168d..feeef3a6 100644
--- a/packages/cp-frontend/src/components/manifest/name.js
+++ b/packages/cp-frontend/src/components/manifest/name.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Row, Col } from 'react-styled-flexboxgrid';
 import remcalc from 'remcalc';
+import StyledFormLabel from './label';
 
 import {
   FormMeta,
   Button,
-  FormLabel,
   Input,
   Small,
   FormGroup
@@ -19,7 +19,7 @@ export const Name = ({ handleSubmit, onCancel, dirty }) => (
       <Col xs={12} md={4} lg={4}>
         <FormGroup name="name" reduxForm>
           <FormMeta left>
-            <FormLabel>Name the new deployment group</FormLabel>
+            <StyledFormLabel>Name the new deployment group</StyledFormLabel>
             <Small>
               Your services will be deployed to eu-east-1 data center.
             </Small>
diff --git a/packages/cp-frontend/src/components/manifest/progress.js b/packages/cp-frontend/src/components/manifest/progress.js
index 4a10856b..32745ad2 100644
--- a/packages/cp-frontend/src/components/manifest/progress.js
+++ b/packages/cp-frontend/src/components/manifest/progress.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import {
   Progressbar,
@@ -6,20 +7,27 @@ import {
   ProgressbarButton
 } from 'joyent-ui-toolkit';
 
+const StyledProgressbarButton = styled(ProgressbarButton)`
+  svg {
+    margin-top: 1px;
+    margin-left: 1px;
+  }
+`;
+
 const Progress = ({ stage, create, edit }) => {
   const _nameCompleted = stage !== 'name';
   const _nameActive = stage === 'name';
 
   const _name = !create ? null : (
     <ProgressbarItem>
-      <ProgressbarButton
+      <StyledProgressbarButton
         zIndex="10"
         completed={_nameCompleted}
         active={_nameActive}
         first
       >
         Name the group
-      </ProgressbarButton>
+      </StyledProgressbarButton>
     </ProgressbarItem>
   );
 
@@ -28,14 +36,14 @@ const Progress = ({ stage, create, edit }) => {
 
   const _manifest = (
     <ProgressbarItem>
-      <ProgressbarButton
+      <StyledProgressbarButton
         zIndex="9"
         completed={_manifestCompleted}
         active={_manifestActive}
         first={edit}
       >
-        Define Services
-      </ProgressbarButton>
+        Define services
+      </StyledProgressbarButton>
     </ProgressbarItem>
   );
 
@@ -44,13 +52,13 @@ const Progress = ({ stage, create, edit }) => {
 
   const _environment = (
     <ProgressbarItem>
-      <ProgressbarButton
+      <StyledProgressbarButton
         zIndex="8"
         completed={_environmentCompleted}
         active={_environmentActive}
       >
-        Define Environment
-      </ProgressbarButton>
+        Define environment
+      </StyledProgressbarButton>
     </ProgressbarItem>
   );
 
@@ -58,9 +66,9 @@ const Progress = ({ stage, create, edit }) => {
 
   const _review = (
     <ProgressbarItem>
-      <ProgressbarButton zIndex="7" active={_reviewActive} last>
+      <StyledProgressbarButton zIndex="7" active={_reviewActive} last>
         Review and deploy
-      </ProgressbarButton>
+      </StyledProgressbarButton>
     </ProgressbarItem>
   );
 
diff --git a/packages/cp-frontend/src/components/manifest/review.js b/packages/cp-frontend/src/components/manifest/review.js
index 9f43d9bf..cc9266e6 100644
--- a/packages/cp-frontend/src/components/manifest/review.js
+++ b/packages/cp-frontend/src/components/manifest/review.js
@@ -7,9 +7,9 @@ import {
   Divider,
   H3,
   P,
-  Chevron,
   typography,
-  Card
+  Card,
+  Message
 } from 'joyent-ui-toolkit';
 import forceArray from 'force-array';
 import styled from 'styled-components';
@@ -54,14 +54,21 @@ const ServiceCard = Card.extend`
 
 const Dl = styled.dl`margin: 0;`;
 
-const EnvironmentChevron = styled(Chevron)`float: right;`;
+const Chevron = styled.svg`
+  transform: ;
+  float: right;
+  position: relative;
+  margin-top: 16px;
+  transform: ${props =>
+    props.down ? 'rotate(90deg) scale(3)' : 'rotate(270deg) scale(3)'};
+`;
 
 const EnvironmentReview = ({ environment }) => {
   const value = environment
     .map(({ name, value }) => `${name}=${value}`)
     .join('\n');
 
-  return <EEditor input={{ value }} />;
+  return <EEditor readOnly input={{ value }} />;
 };
 
 export const Review = ({
@@ -71,6 +78,7 @@ export const Review = ({
   dirty,
   loading,
   environmentToggles,
+  datacenter,
   ...state
 }) => {
   const serviceList = forceArray(state.services).map(({ name, config }) => (
@@ -90,10 +98,18 @@ export const Review = ({
           onClick={() => onEnvironmentToggle(name)}
         >
           Environment variables{' '}
-          <EnvironmentChevron
+          { /* I'M SORRY */ }
+          <Chevron
+            width="20"
+            height="7"
+            viewBox="0 0 10 20"
             down={!environmentToggles[name]}
-            up={environmentToggles[name]}
-          />
+          >
+            <path
+              fill="#464646"
+              d="M 1.1206 0L 0 1.36044L 3.49581 4.8L 0 8.23956L 1.1206 9.6L 6 4.8L 1.1206 0Z"
+            />
+          </Chevron>
         </ServiceEnvironmentTitle>
       ) : null}
       {config.environment &&
@@ -106,12 +122,18 @@ export const Review = ({
 
   return (
     <form onSubmit={handleSubmit}>
+      <Message
+        title="Reviewing"
+        message="Review names of services, images being used and packages you chose or that have been recommended to you"
+        type="EDUCATIONAL"
+      />
       {serviceList}
+      <P>A single instance of each service will be deployed.</P>
       <ButtonsRow>
         <Button type="button" onClick={onCancel} disabled={loading} secondary>
           Cancel
         </Button>
-        <Button disabled={loading} loading={loading} type="submit">
+        <Button loading={loading} type="submit">
           Confirm and Deploy
         </Button>
       </ButtonsRow>
@@ -119,5 +141,4 @@ export const Review = ({
   );
 };
 
-
-export default Review
\ No newline at end of file
+export default Review;
diff --git a/packages/cp-frontend/src/containers/deployment-groups/list.js b/packages/cp-frontend/src/containers/deployment-groups/list.js
index 33f33fb9..ab511521 100644
--- a/packages/cp-frontend/src/containers/deployment-groups/list.js
+++ b/packages/cp-frontend/src/containers/deployment-groups/list.js
@@ -14,10 +14,9 @@ import DeploymentGroupsQuery from '@graphql/DeploymentGroups.gql';
 import DeploymentGroupsImportableQuery from '@graphql/DeploymentGroupsImportable.gql';
 import { H3, Small, IconButton, BinIcon } from 'joyent-ui-toolkit';
 import { withNotFound, GqlPaths } from '@containers/navigation';
+import ImportIcon from '../../assets/Import.svg';
 
-const DGsRows = Row.extend`
-  margin-top: ${remcalc(-7)};
-`;
+const DGsRows = Row.extend`margin-top: ${remcalc(-7)};`;
 
 const Box = styled.div`
   position: relative;
@@ -162,7 +161,9 @@ export const DeploymentGroupList = ({
       <Col xs={12} sm={4} md={3} lg={3} key={slug}>
         <BoxCreate>
           <StyledCreateLink to={`${match.path}/~import/${slug}`}>
-            <Oval>&#10549;</Oval>
+            <Oval>
+              <ImportIcon />
+            </Oval>
             <CreateTitle>{name}</CreateTitle>
           </StyledCreateLink>
         </BoxCreate>
diff --git a/packages/cp-frontend/test/unit/components/manifest/__snapshots__/environment.js.snap b/packages/cp-frontend/test/unit/components/manifest/__snapshots__/environment.js.snap
index 90703498..8e824786 100644
--- a/packages/cp-frontend/test/unit/components/manifest/__snapshots__/environment.js.snap
+++ b/packages/cp-frontend/test/unit/components/manifest/__snapshots__/environment.js.snap
@@ -505,7 +505,7 @@ exports[`renders <TestEnvironmentForm /> without throwing 1`] = `
           >
             <input
               className="c13 c14"
-              id="bVVQYi"
+              id="cCyMsz"
               placeholder="Filename including extension…"
               type="text"
               value={undefined}
diff --git a/packages/cp-frontend/test/unit/components/manifest/__snapshots__/files.js.snap b/packages/cp-frontend/test/unit/components/manifest/__snapshots__/files.js.snap
index 145adc6a..5c43e46a 100644
--- a/packages/cp-frontend/test/unit/components/manifest/__snapshots__/files.js.snap
+++ b/packages/cp-frontend/test/unit/components/manifest/__snapshots__/files.js.snap
@@ -192,7 +192,7 @@ exports[`renders <Files /> without throwing 1`] = `
         >
           <input
             className="c4 c5"
-            id="SlzVp"
+            id="bEqMUb"
             placeholder="Filename including extension…"
             type="text"
             value={undefined}
diff --git a/packages/cp-frontend/test/unit/components/manifest/__snapshots__/name.js.snap b/packages/cp-frontend/test/unit/components/manifest/__snapshots__/name.js.snap
index b319930f..b6f5c87a 100644
--- a/packages/cp-frontend/test/unit/components/manifest/__snapshots__/name.js.snap
+++ b/packages/cp-frontend/test/unit/components/manifest/__snapshots__/name.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Name /> without throwing 1`] = `
-.c8 {
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -46,47 +46,47 @@ exports[`renders <Name /> without throwing 1`] = `
   border: solid 0.0625rem;
 }
 
-.c8::-moz-focus-inner,
-.c8[type='button']::-moz-focus-inner,
-.c8[type='reset']::-moz-focus-inner,
-.c8[type='submit']::-moz-focus-inner {
+.c9::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
+.c9[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c8:-moz-focusring,
-.c8[type='button']:-moz-focusring,
-.c8[type='reset']:-moz-focusring,
-.c8[type='submit']:-moz-focusring {
+.c9:-moz-focusring,
+.c9[type='button']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
+.c9[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c8:hover {
+.c9:hover {
   border: solid 0.0625rem;
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8 + button {
+.c9 + button {
   margin-left: 1.25rem;
 }
 
-.c9 {
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -132,43 +132,43 @@ exports[`renders <Name /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9:focus {
+.c10:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c9:hover {
+.c10:hover {
   border: solid 0.0625rem;
 }
 
-.c9:active,
-.c9:active:hover,
-.c9:active:focus {
+.c10:active,
+.c10:active:hover,
+.c10:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c9[disabled] {
+.c10[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 1.25rem;
 }
 
@@ -200,7 +200,7 @@ exports[`renders <Name /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c5 {
+.c6 {
   font-size: 80%;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
@@ -225,7 +225,7 @@ exports[`renders <Name /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c6 {
+.c7 {
   box-sizing: border-box;
   width: 100%;
   height: 3rem;
@@ -245,11 +245,11 @@ exports[`renders <Name /> without throwing 1`] = `
   outline: 0;
 }
 
-.c6:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   font-size: 0.9375rem;
@@ -269,7 +269,12 @@ exports[`renders <Name /> without throwing 1`] = `
   display: block;
 }
 
-.c7 {
+.c4 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.375rem;
+}
+
+.c8 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -338,20 +343,20 @@ exports[`renders <Name /> without throwing 1`] = `
             form="testNameForm"
           >
             <label
-              className="c4"
-              htmlFor="bRpkHS"
+              className="c4 c5"
+              htmlFor="bOJfXP"
             >
               Name the new deployment group
             </label>
             <small
-              className="c5"
+              className="c6"
             >
               Your services will be deployed to eu-east-1 data center.
             </small>
           </label>
           <input
-            className="c6"
-            id="bRpkHS"
+            className="c7"
+            id="bOJfXP"
             name="name"
             onBlur={[Function]}
             onChange={[Function]}
@@ -366,17 +371,17 @@ exports[`renders <Name /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c7"
+    className="c8"
   >
     <button
-      className="c8"
+      className="c9"
       onClick={[Function]}
       type="button"
     >
       Cancel
     </button>
     <button
-      className="c9"
+      className="c10"
       disabled={true}
       type="submit"
     >
@@ -387,7 +392,7 @@ exports[`renders <Name /> without throwing 1`] = `
 `;
 
 exports[`renders <Name /> without throwing 2`] = `
-.c8 {
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -432,47 +437,47 @@ exports[`renders <Name /> without throwing 2`] = `
   border: solid 0.0625rem;
 }
 
-.c8::-moz-focus-inner,
-.c8[type='button']::-moz-focus-inner,
-.c8[type='reset']::-moz-focus-inner,
-.c8[type='submit']::-moz-focus-inner {
+.c9::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
+.c9[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c8:-moz-focusring,
-.c8[type='button']:-moz-focusring,
-.c8[type='reset']:-moz-focusring,
-.c8[type='submit']:-moz-focusring {
+.c9:-moz-focusring,
+.c9[type='button']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
+.c9[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c8:hover {
+.c9:hover {
   border: solid 0.0625rem;
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8 + button {
+.c9 + button {
   margin-left: 1.25rem;
 }
 
-.c9 {
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -518,43 +523,43 @@ exports[`renders <Name /> without throwing 2`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9:focus {
+.c10:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c9:hover {
+.c10:hover {
   border: solid 0.0625rem;
 }
 
-.c9:active,
-.c9:active:hover,
-.c9:active:focus {
+.c10:active,
+.c10:active:hover,
+.c10:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c9[disabled] {
+.c10[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 1.25rem;
 }
 
@@ -586,7 +591,7 @@ exports[`renders <Name /> without throwing 2`] = `
   padding-left: 0.5rem;
 }
 
-.c5 {
+.c6 {
   font-size: 80%;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
@@ -611,7 +616,7 @@ exports[`renders <Name /> without throwing 2`] = `
   -webkit-padding-after: 0;
 }
 
-.c6 {
+.c7 {
   box-sizing: border-box;
   width: 100%;
   height: 3rem;
@@ -631,11 +636,11 @@ exports[`renders <Name /> without throwing 2`] = `
   outline: 0;
 }
 
-.c6:focus {
+.c7:focus {
   outline: 0;
 }
 
-.c4 {
+.c5 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   font-size: 0.9375rem;
@@ -655,7 +660,12 @@ exports[`renders <Name /> without throwing 2`] = `
   display: block;
 }
 
-.c7 {
+.c4 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.375rem;
+}
+
+.c8 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -724,20 +734,20 @@ exports[`renders <Name /> without throwing 2`] = `
             form="testNameForm"
           >
             <label
-              className="c4"
-              htmlFor="cfPoqo"
+              className="c4 c5"
+              htmlFor="bWgdoT"
             >
               Name the new deployment group
             </label>
             <small
-              className="c5"
+              className="c6"
             >
               Your services will be deployed to eu-east-1 data center.
             </small>
           </label>
           <input
-            className="c6"
-            id="cfPoqo"
+            className="c7"
+            id="bWgdoT"
             name="name"
             onBlur={[Function]}
             onChange={[Function]}
@@ -752,17 +762,17 @@ exports[`renders <Name /> without throwing 2`] = `
     </div>
   </div>
   <div
-    className="c7"
+    className="c8"
   >
     <button
-      className="c8"
+      className="c9"
       onClick={[Function]}
       type="button"
     >
       Cancel
     </button>
     <button
-      className="c9"
+      className="c10"
       disabled={true}
       type="submit"
     >
diff --git a/packages/cp-frontend/test/unit/components/manifest/__snapshots__/progress.js.snap b/packages/cp-frontend/test/unit/components/manifest/__snapshots__/progress.js.snap
index 0ff216f1..e0e6cad1 100644
--- a/packages/cp-frontend/test/unit/components/manifest/__snapshots__/progress.js.snap
+++ b/packages/cp-frontend/test/unit/components/manifest/__snapshots__/progress.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Progress /> without throwing 1`] = `
-.c6 {
+.c7 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -46,43 +46,43 @@ exports[`renders <Progress /> without throwing 1`] = `
   border: solid 0.0625rem;
 }
 
-.c6::-moz-focus-inner,
-.c6[type='button']::-moz-focus-inner,
-.c6[type='reset']::-moz-focus-inner,
-.c6[type='submit']::-moz-focus-inner {
+.c7::-moz-focus-inner,
+.c7[type='button']::-moz-focus-inner,
+.c7[type='reset']::-moz-focus-inner,
+.c7[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c6:-moz-focusring,
-.c6[type='button']:-moz-focusring,
-.c6[type='reset']:-moz-focusring,
-.c6[type='submit']:-moz-focusring {
+.c7:-moz-focusring,
+.c7[type='button']:-moz-focusring,
+.c7[type='reset']:-moz-focusring,
+.c7[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c6:focus {
+.c7:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c6:hover {
+.c7:hover {
   border: solid 0.0625rem;
 }
 
-.c6:active,
-.c6:active:hover,
-.c6:active:focus {
+.c7:active,
+.c7:active:hover,
+.c7:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c6[disabled] {
+.c7[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c6 + button {
+.c7 + button {
   margin-left: 1.25rem;
 }
 
@@ -90,39 +90,39 @@ exports[`renders <Progress /> without throwing 1`] = `
   float: left;
 }
 
-.c4 {
+.c5 {
   -webkit-fill: none;
   fill: none;
 }
 
+.c11 {
+  -webkit-fill: none;
+  fill: none;
+}
+
+.c4 {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: inherit;
+  border: 0.0625rem solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0.0625rem solid;
+}
+
 .c10 {
-  -webkit-fill: none;
-  fill: none;
-}
-
-.c3 {
-  display: inline-block;
-  border-radius: 50%;
-  width: 1.125rem;
-  height: 1.125rem;
-  background: inherit;
-  border: 0.0625rem solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border: 0.0625rem solid;
-}
-
-.c9 {
   display: inline-block;
   border-radius: 50%;
   width: 1.125rem;
@@ -143,7 +143,7 @@ exports[`renders <Progress /> without throwing 1`] = `
   align-items: center;
 }
 
-.c5 {
+.c6 {
   padding: 0.75rem 1.125rem 0.75rem 0.75rem;
   background-color: #FFFFFF;
   color: #464646;
@@ -154,27 +154,27 @@ exports[`renders <Progress /> without throwing 1`] = `
   cursor: default;
 }
 
-.c5:focus {
+.c6:focus {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c5:hover {
+.c6:hover {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c5:active,
-.c5:active:hover,
-.c5:active:focus {
+.c6:active,
+.c6:active:hover,
+.c6:active:focus {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c2 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -200,7 +200,7 @@ exports[`renders <Progress /> without throwing 1`] = `
   border-right: none;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -222,7 +222,7 @@ exports[`renders <Progress /> without throwing 1`] = `
   border-right: none;
 }
 
-.c12 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -244,7 +244,7 @@ exports[`renders <Progress /> without throwing 1`] = `
   border-right: none;
 }
 
-.c13 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -265,7 +265,7 @@ exports[`renders <Progress /> without throwing 1`] = `
   border-right: 0.0625rem solid;
 }
 
-.c7 {
+.c8 {
   position: absolute;
   top: 0;
   right: -1.6875rem;
@@ -278,7 +278,7 @@ exports[`renders <Progress /> without throwing 1`] = `
   margin: 0.4rem 0.625rem 0.4rem 0.625rem;
 }
 
-.c11 {
+.c12 {
   position: absolute;
   top: 0;
   right: -1.6875rem;
@@ -291,7 +291,7 @@ exports[`renders <Progress /> without throwing 1`] = `
   margin: 0.4rem 0.625rem 0.4rem 0.625rem;
 }
 
-.c14 {
+.c15 {
   position: absolute;
   top: 0;
   right: -1.6875rem;
@@ -311,6 +311,11 @@ exports[`renders <Progress /> without throwing 1`] = `
   padding: 0;
 }
 
+.c2 svg {
+  margin-top: 1px;
+  margin-left: 1px;
+}
+
 <ul
   className="c0"
 >
@@ -318,14 +323,14 @@ exports[`renders <Progress /> without throwing 1`] = `
     className="c1"
   >
     <div
-      className="c2"
+      className="c2 c3"
     >
       <span
-        className="c3"
+        className="c4"
       >
         <svg
           active={true}
-          className="c4 "
+          className="c5 "
           completed={false}
           first={true}
           height="9"
@@ -344,12 +349,12 @@ exports[`renders <Progress /> without throwing 1`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
         Name the group
       </button>
       <span
-        className="c7"
+        className="c8"
       />
     </div>
   </li>
@@ -357,14 +362,14 @@ exports[`renders <Progress /> without throwing 1`] = `
     className="c1"
   >
     <div
-      className="c8"
+      className="c2 c9"
     >
       <span
-        className="c9"
+        className="c10"
       >
         <svg
           active={false}
-          className="c10 "
+          className="c11 "
           completed={false}
           first={undefined}
           height="9"
@@ -383,12 +388,12 @@ exports[`renders <Progress /> without throwing 1`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
-        Define Services
+        Define services
       </button>
       <span
-        className="c11"
+        className="c12"
       />
     </div>
   </li>
@@ -396,14 +401,14 @@ exports[`renders <Progress /> without throwing 1`] = `
     className="c1"
   >
     <div
-      className="c12"
+      className="c2 c13"
     >
       <span
-        className="c9"
+        className="c10"
       >
         <svg
           active={false}
-          className="c10 "
+          className="c11 "
           completed={false}
           first={undefined}
           height="9"
@@ -422,12 +427,12 @@ exports[`renders <Progress /> without throwing 1`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
-        Define Environment
+        Define environment
       </button>
       <span
-        className="c11"
+        className="c12"
       />
     </div>
   </li>
@@ -435,14 +440,14 @@ exports[`renders <Progress /> without throwing 1`] = `
     className="c1"
   >
     <div
-      className="c13"
+      className="c2 c14"
     >
       <span
-        className="c9"
+        className="c10"
       >
         <svg
           active={false}
-          className="c10 "
+          className="c11 "
           completed={undefined}
           first={undefined}
           height="9"
@@ -461,12 +466,12 @@ exports[`renders <Progress /> without throwing 1`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
         Review and deploy
       </button>
       <span
-        className="c14"
+        className="c15"
       />
     </div>
   </li>
@@ -474,7 +479,7 @@ exports[`renders <Progress /> without throwing 1`] = `
 `;
 
 exports[`renders <Progress /> without throwing 2`] = `
-.c6 {
+.c7 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -519,43 +524,43 @@ exports[`renders <Progress /> without throwing 2`] = `
   border: solid 0.0625rem;
 }
 
-.c6::-moz-focus-inner,
-.c6[type='button']::-moz-focus-inner,
-.c6[type='reset']::-moz-focus-inner,
-.c6[type='submit']::-moz-focus-inner {
+.c7::-moz-focus-inner,
+.c7[type='button']::-moz-focus-inner,
+.c7[type='reset']::-moz-focus-inner,
+.c7[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c6:-moz-focusring,
-.c6[type='button']:-moz-focusring,
-.c6[type='reset']:-moz-focusring,
-.c6[type='submit']:-moz-focusring {
+.c7:-moz-focusring,
+.c7[type='button']:-moz-focusring,
+.c7[type='reset']:-moz-focusring,
+.c7[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c6:focus {
+.c7:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c6:hover {
+.c7:hover {
   border: solid 0.0625rem;
 }
 
-.c6:active,
-.c6:active:hover,
-.c6:active:focus {
+.c7:active,
+.c7:active:hover,
+.c7:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c6[disabled] {
+.c7[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c6 + button {
+.c7 + button {
   margin-left: 1.25rem;
 }
 
@@ -563,12 +568,12 @@ exports[`renders <Progress /> without throwing 2`] = `
   float: left;
 }
 
-.c4 {
+.c5 {
   -webkit-fill: none;
   fill: none;
 }
 
-.c3 {
+.c4 {
   display: inline-block;
   border-radius: 50%;
   width: 1.125rem;
@@ -589,7 +594,7 @@ exports[`renders <Progress /> without throwing 2`] = `
   align-items: center;
 }
 
-.c5 {
+.c6 {
   padding: 0.75rem 1.125rem 0.75rem 0.75rem;
   background-color: #FFFFFF;
   color: #464646;
@@ -600,27 +605,27 @@ exports[`renders <Progress /> without throwing 2`] = `
   cursor: default;
 }
 
-.c5:focus {
+.c6:focus {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c5:hover {
+.c6:hover {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c5:active,
-.c5:active:hover,
-.c5:active:focus {
+.c6:active,
+.c6:active:hover,
+.c6:active:focus {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -642,7 +647,7 @@ exports[`renders <Progress /> without throwing 2`] = `
   border-right: none;
 }
 
-.c9 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -663,7 +668,7 @@ exports[`renders <Progress /> without throwing 2`] = `
   border-right: 0.0625rem solid;
 }
 
-.c2 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -686,7 +691,7 @@ exports[`renders <Progress /> without throwing 2`] = `
   border-right: none;
 }
 
-.c7 {
+.c8 {
   position: absolute;
   top: 0;
   right: -1.6875rem;
@@ -699,7 +704,7 @@ exports[`renders <Progress /> without throwing 2`] = `
   margin: 0.4rem 0.625rem 0.4rem 0.625rem;
 }
 
-.c10 {
+.c11 {
   position: absolute;
   top: 0;
   right: -1.6875rem;
@@ -719,6 +724,11 @@ exports[`renders <Progress /> without throwing 2`] = `
   padding: 0;
 }
 
+.c2 svg {
+  margin-top: 1px;
+  margin-left: 1px;
+}
+
 <ul
   className="c0"
 >
@@ -726,14 +736,14 @@ exports[`renders <Progress /> without throwing 2`] = `
     className="c1"
   >
     <div
-      className="c2"
+      className="c2 c3"
     >
       <span
-        className="c3"
+        className="c4"
       >
         <svg
           active={false}
-          className="c4 "
+          className="c5 "
           completed={false}
           first={true}
           height="9"
@@ -752,12 +762,12 @@ exports[`renders <Progress /> without throwing 2`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
-        Define Services
+        Define services
       </button>
       <span
-        className="c7"
+        className="c8"
       />
     </div>
   </li>
@@ -765,14 +775,14 @@ exports[`renders <Progress /> without throwing 2`] = `
     className="c1"
   >
     <div
-      className="c8"
+      className="c2 c9"
     >
       <span
-        className="c3"
+        className="c4"
       >
         <svg
           active={false}
-          className="c4 "
+          className="c5 "
           completed={false}
           first={undefined}
           height="9"
@@ -791,12 +801,12 @@ exports[`renders <Progress /> without throwing 2`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
-        Define Environment
+        Define environment
       </button>
       <span
-        className="c7"
+        className="c8"
       />
     </div>
   </li>
@@ -804,14 +814,14 @@ exports[`renders <Progress /> without throwing 2`] = `
     className="c1"
   >
     <div
-      className="c9"
+      className="c2 c10"
     >
       <span
-        className="c3"
+        className="c4"
       >
         <svg
           active={false}
-          className="c4 "
+          className="c5 "
           completed={undefined}
           first={undefined}
           height="9"
@@ -830,12 +840,12 @@ exports[`renders <Progress /> without throwing 2`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
         Review and deploy
       </button>
       <span
-        className="c10"
+        className="c11"
       />
     </div>
   </li>
@@ -843,7 +853,7 @@ exports[`renders <Progress /> without throwing 2`] = `
 `;
 
 exports[`renders <Progress /> without throwing 3`] = `
-.c6 {
+.c7 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -888,43 +898,43 @@ exports[`renders <Progress /> without throwing 3`] = `
   border: solid 0.0625rem;
 }
 
-.c6::-moz-focus-inner,
-.c6[type='button']::-moz-focus-inner,
-.c6[type='reset']::-moz-focus-inner,
-.c6[type='submit']::-moz-focus-inner {
+.c7::-moz-focus-inner,
+.c7[type='button']::-moz-focus-inner,
+.c7[type='reset']::-moz-focus-inner,
+.c7[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c6:-moz-focusring,
-.c6[type='button']:-moz-focusring,
-.c6[type='reset']:-moz-focusring,
-.c6[type='submit']:-moz-focusring {
+.c7:-moz-focusring,
+.c7[type='button']:-moz-focusring,
+.c7[type='reset']:-moz-focusring,
+.c7[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c6:focus {
+.c7:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c6:hover {
+.c7:hover {
   border: solid 0.0625rem;
 }
 
-.c6:active,
-.c6:active:hover,
-.c6:active:focus {
+.c7:active,
+.c7:active:hover,
+.c7:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c6[disabled] {
+.c7[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c6 + button {
+.c7 + button {
   margin-left: 1.25rem;
 }
 
@@ -932,87 +942,87 @@ exports[`renders <Progress /> without throwing 3`] = `
   float: left;
 }
 
-.c10 {
+.c11 {
   -webkit-fill: none;
   fill: none;
 }
 
-.c13 {
+.c14 {
   -webkit-fill: none;
   fill: none;
 }
 
-.c4 {
-  -webkit-fill: none;
-  fill: none;
-}
-
-.c9 {
-  display: inline-block;
-  border-radius: 50%;
-  width: 1.125rem;
-  height: 1.125rem;
-  background: inherit;
-  border: 0.0625rem solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border: 0.0625rem solid;
-}
-
-.c12 {
-  display: inline-block;
-  border-radius: 50%;
-  width: 1.125rem;
-  height: 1.125rem;
-  background: inherit;
-  border: 0.0625rem solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c3 {
-  display: inline-block;
-  border-radius: 50%;
-  width: 1.125rem;
-  height: 1.125rem;
-  background: inherit;
-  border: 0.0625rem solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border: 0.0625rem solid;
-}
-
 .c5 {
+  -webkit-fill: none;
+  fill: none;
+}
+
+.c10 {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: inherit;
+  border: 0.0625rem solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0.0625rem solid;
+}
+
+.c13 {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: inherit;
+  border: 0.0625rem solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c4 {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: inherit;
+  border: 0.0625rem solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0.0625rem solid;
+}
+
+.c6 {
   padding: 0.75rem 1.125rem 0.75rem 0.75rem;
   background-color: #FFFFFF;
   color: #464646;
@@ -1023,27 +1033,27 @@ exports[`renders <Progress /> without throwing 3`] = `
   cursor: default;
 }
 
-.c5:focus {
+.c6:focus {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c5:hover {
+.c6:hover {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c5:active,
-.c5:active:hover,
-.c5:active:focus {
+.c6:active,
+.c6:active:hover,
+.c6:active:focus {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c2 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1069,7 +1079,7 @@ exports[`renders <Progress /> without throwing 3`] = `
   border-right: none;
 }
 
-.c11 {
+.c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1091,7 +1101,7 @@ exports[`renders <Progress /> without throwing 3`] = `
   border-right: none;
 }
 
-.c15 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1112,7 +1122,7 @@ exports[`renders <Progress /> without throwing 3`] = `
   border-right: 0.0625rem solid;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1136,7 +1146,7 @@ exports[`renders <Progress /> without throwing 3`] = `
   border-right: none;
 }
 
-.c7 {
+.c8 {
   position: absolute;
   top: 0;
   right: -1.6875rem;
@@ -1149,7 +1159,503 @@ exports[`renders <Progress /> without throwing 3`] = `
   margin: 0.4rem 0.625rem 0.4rem 0.625rem;
 }
 
+.c15 {
+  position: absolute;
+  top: 0;
+  right: -1.6875rem;
+  border: solid;
+  border-width: 0 0.0625rem 0.0625rem 0;
+  padding: 1.06875rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
+}
+
+.c17 {
+  position: absolute;
+  top: 0;
+  right: -1.6875rem;
+  border: solid;
+  border-width: 0 0.0625rem 0.0625rem 0;
+  padding: 1.06875rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
+  display: none;
+}
+
+.c0 {
+  display: table;
+  list-style-type: none;
+  padding: 0;
+}
+
+.c2 svg {
+  margin-top: 1px;
+  margin-left: 1px;
+}
+
+<ul
+  className="c0"
+>
+  <li
+    className="c1"
+  >
+    <div
+      className="c2 c3"
+    >
+      <span
+        className="c4"
+      >
+        <svg
+          active={false}
+          className="c5 "
+          completed={true}
+          first={true}
+          height="9"
+          last={undefined}
+          viewBox="0 0 9 9"
+          width="9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            tick
+          </title>
+          <path
+            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </span>
+      <button
+        className="c6 c7"
+      >
+        Name the group
+      </button>
+      <span
+        className="c8"
+      />
+    </div>
+  </li>
+  <li
+    className="c1"
+  >
+    <div
+      className="c2 c9"
+    >
+      <span
+        className="c10"
+      >
+        <svg
+          active={true}
+          className="c11 "
+          completed={false}
+          first={undefined}
+          height="9"
+          last={undefined}
+          viewBox="0 0 9 9"
+          width="9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            tick
+          </title>
+          <path
+            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </span>
+      <button
+        className="c6 c7"
+      >
+        Define services
+      </button>
+      <span
+        className="c8"
+      />
+    </div>
+  </li>
+  <li
+    className="c1"
+  >
+    <div
+      className="c2 c12"
+    >
+      <span
+        className="c13"
+      >
+        <svg
+          active={false}
+          className="c14 "
+          completed={false}
+          first={undefined}
+          height="9"
+          last={undefined}
+          viewBox="0 0 9 9"
+          width="9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            tick
+          </title>
+          <path
+            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </span>
+      <button
+        className="c6 c7"
+      >
+        Define environment
+      </button>
+      <span
+        className="c15"
+      />
+    </div>
+  </li>
+  <li
+    className="c1"
+  >
+    <div
+      className="c2 c16"
+    >
+      <span
+        className="c13"
+      >
+        <svg
+          active={false}
+          className="c14 "
+          completed={undefined}
+          first={undefined}
+          height="9"
+          last={true}
+          viewBox="0 0 9 9"
+          width="9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            tick
+          </title>
+          <path
+            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </span>
+      <button
+        className="c6 c7"
+      >
+        Review and deploy
+      </button>
+      <span
+        className="c17"
+      />
+    </div>
+  </li>
+</ul>
+`;
+
+exports[`renders <Progress /> without throwing 4`] = `
+.c7 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c7::-moz-focus-inner,
+.c7[type='button']::-moz-focus-inner,
+.c7[type='reset']::-moz-focus-inner,
+.c7[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c7:-moz-focusring,
+.c7[type='button']:-moz-focusring,
+.c7[type='reset']:-moz-focusring,
+.c7[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c7:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c7:hover {
+  border: solid 0.0625rem;
+}
+
+.c7:active,
+.c7:active:hover,
+.c7:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c7[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c7 + button {
+  margin-left: 1.25rem;
+}
+
+.c1 {
+  float: left;
+}
+
+.c12 {
+  -webkit-fill: none;
+  fill: none;
+}
+
+.c15 {
+  -webkit-fill: none;
+  fill: none;
+}
+
+.c5 {
+  -webkit-fill: none;
+  fill: none;
+}
+
+.c11 {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: inherit;
+  border: 0.0625rem solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0.0625rem solid;
+}
+
 .c14 {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: inherit;
+  border: 0.0625rem solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c4 {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: inherit;
+  border: 0.0625rem solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0.0625rem solid;
+}
+
+.c6 {
+  padding: 0.75rem 1.125rem 0.75rem 0.75rem;
+  background-color: #FFFFFF;
+  color: #464646;
+  text-align: left;
+  border: none;
+  box-shadow: none;
+  line-height: 1.6;
+  cursor: default;
+}
+
+.c6:focus {
+  background-color: #FFFFFF;
+  border: none;
+  color: #464646;
+}
+
+.c6:hover {
+  background-color: #FFFFFF;
+  border: none;
+  color: #464646;
+}
+
+.c6:active,
+.c6:active:hover,
+.c6:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  color: #464646;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 10;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-left: 0.0625rem solid;
+  padding-left: 0.8125rem;
+  border-right: 0.0625rem solid;
+  border-right: none;
+}
+
+.c13 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 7;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-right: 0.0625rem solid;
+}
+
+.c9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 9;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-right: 0.0625rem solid;
+  border-right: none;
+}
+
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 8;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-right: 0.0625rem solid;
+  border-right: none;
+}
+
+.c8 {
   position: absolute;
   top: 0;
   right: -1.6875rem;
@@ -1182,6 +1688,11 @@ exports[`renders <Progress /> without throwing 3`] = `
   padding: 0;
 }
 
+.c2 svg {
+  margin-top: 1px;
+  margin-left: 1px;
+}
+
 <ul
   className="c0"
 >
@@ -1189,14 +1700,14 @@ exports[`renders <Progress /> without throwing 3`] = `
     className="c1"
   >
     <div
-      className="c2"
+      className="c2 c3"
     >
       <span
-        className="c3"
+        className="c4"
       >
         <svg
           active={false}
-          className="c4 "
+          className="c5 "
           completed={true}
           first={true}
           height="9"
@@ -1215,12 +1726,12 @@ exports[`renders <Progress /> without throwing 3`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
         Name the group
       </button>
       <span
-        className="c7"
+        className="c8"
       />
     </div>
   </li>
@@ -1228,14 +1739,53 @@ exports[`renders <Progress /> without throwing 3`] = `
     className="c1"
   >
     <div
-      className="c8"
+      className="c2 c9"
     >
       <span
-        className="c9"
+        className="c4"
+      >
+        <svg
+          active={false}
+          className="c5 "
+          completed={true}
+          first={undefined}
+          height="9"
+          last={undefined}
+          viewBox="0 0 9 9"
+          width="9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            tick
+          </title>
+          <path
+            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </span>
+      <button
+        className="c6 c7"
+      >
+        Define services
+      </button>
+      <span
+        className="c8"
+      />
+    </div>
+  </li>
+  <li
+    className="c1"
+  >
+    <div
+      className="c2 c10"
+    >
+      <span
+        className="c11"
       >
         <svg
           active={true}
-          className="c10 "
+          className="c12 "
           completed={false}
           first={undefined}
           height="9"
@@ -1254,12 +1804,12 @@ exports[`renders <Progress /> without throwing 3`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
-        Define Services
+        Define environment
       </button>
       <span
-        className="c7"
+        className="c8"
       />
     </div>
   </li>
@@ -1267,53 +1817,14 @@ exports[`renders <Progress /> without throwing 3`] = `
     className="c1"
   >
     <div
-      className="c11"
+      className="c2 c13"
     >
-      <span
-        className="c12"
-      >
-        <svg
-          active={false}
-          className="c13 "
-          completed={false}
-          first={undefined}
-          height="9"
-          last={undefined}
-          viewBox="0 0 9 9"
-          width="9"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            tick
-          </title>
-          <path
-            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </span>
-      <button
-        className="c5 c6"
-      >
-        Define Environment
-      </button>
       <span
         className="c14"
-      />
-    </div>
-  </li>
-  <li
-    className="c1"
-  >
-    <div
-      className="c15"
-    >
-      <span
-        className="c12"
       >
         <svg
           active={false}
-          className="c13 "
+          className="c15 "
           completed={undefined}
           first={undefined}
           height="9"
@@ -1332,7 +1843,7 @@ exports[`renders <Progress /> without throwing 3`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
         Review and deploy
       </button>
@@ -1344,8 +1855,8 @@ exports[`renders <Progress /> without throwing 3`] = `
 </ul>
 `;
 
-exports[`renders <Progress /> without throwing 4`] = `
-.c6 {
+exports[`renders <Progress /> without throwing 5`] = `
+.c7 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1390,43 +1901,889 @@ exports[`renders <Progress /> without throwing 4`] = `
   border: solid 0.0625rem;
 }
 
-.c6::-moz-focus-inner,
-.c6[type='button']::-moz-focus-inner,
-.c6[type='reset']::-moz-focus-inner,
-.c6[type='submit']::-moz-focus-inner {
+.c7::-moz-focus-inner,
+.c7[type='button']::-moz-focus-inner,
+.c7[type='reset']::-moz-focus-inner,
+.c7[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c6:-moz-focusring,
-.c6[type='button']:-moz-focusring,
-.c6[type='reset']:-moz-focusring,
-.c6[type='submit']:-moz-focusring {
+.c7:-moz-focusring,
+.c7[type='button']:-moz-focusring,
+.c7[type='reset']:-moz-focusring,
+.c7[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c6:focus {
+.c7:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c6:hover {
+.c7:hover {
   border: solid 0.0625rem;
 }
 
+.c7:active,
+.c7:active:hover,
+.c7:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c7[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c7 + button {
+  margin-left: 1.25rem;
+}
+
+.c1 {
+  float: left;
+}
+
+.c13 {
+  -webkit-fill: none;
+  fill: none;
+}
+
+.c5 {
+  -webkit-fill: none;
+  fill: none;
+}
+
+.c12 {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: inherit;
+  border: 0.0625rem solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0.0625rem solid;
+}
+
+.c4 {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: inherit;
+  border: 0.0625rem solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0.0625rem solid;
+}
+
+.c6 {
+  padding: 0.75rem 1.125rem 0.75rem 0.75rem;
+  background-color: #FFFFFF;
+  color: #464646;
+  text-align: left;
+  border: none;
+  box-shadow: none;
+  line-height: 1.6;
+  cursor: default;
+}
+
+.c6:focus {
+  background-color: #FFFFFF;
+  border: none;
+  color: #464646;
+}
+
+.c6:hover {
+  background-color: #FFFFFF;
+  border: none;
+  color: #464646;
+}
+
 .c6:active,
 .c6:active:hover,
 .c6:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  color: #464646;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 10;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-left: 0.0625rem solid;
+  padding-left: 0.8125rem;
+  border-right: 0.0625rem solid;
+  border-right: none;
+}
+
+.c9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 9;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-right: 0.0625rem solid;
+  border-right: none;
+}
+
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 8;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-right: 0.0625rem solid;
+  border-right: none;
+}
+
+.c11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 7;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-right: 0.0625rem solid;
+}
+
+.c8 {
+  position: absolute;
+  top: 0;
+  right: -1.6875rem;
+  border: solid;
+  border-width: 0 0.0625rem 0.0625rem 0;
+  padding: 1.06875rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
+}
+
+.c14 {
+  position: absolute;
+  top: 0;
+  right: -1.6875rem;
+  border: solid;
+  border-width: 0 0.0625rem 0.0625rem 0;
+  padding: 1.06875rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
+  display: none;
+}
+
+.c0 {
+  display: table;
+  list-style-type: none;
+  padding: 0;
+}
+
+.c2 svg {
+  margin-top: 1px;
+  margin-left: 1px;
+}
+
+<ul
+  className="c0"
+>
+  <li
+    className="c1"
+  >
+    <div
+      className="c2 c3"
+    >
+      <span
+        className="c4"
+      >
+        <svg
+          active={false}
+          className="c5 "
+          completed={true}
+          first={true}
+          height="9"
+          last={undefined}
+          viewBox="0 0 9 9"
+          width="9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            tick
+          </title>
+          <path
+            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </span>
+      <button
+        className="c6 c7"
+      >
+        Name the group
+      </button>
+      <span
+        className="c8"
+      />
+    </div>
+  </li>
+  <li
+    className="c1"
+  >
+    <div
+      className="c2 c9"
+    >
+      <span
+        className="c4"
+      >
+        <svg
+          active={false}
+          className="c5 "
+          completed={true}
+          first={undefined}
+          height="9"
+          last={undefined}
+          viewBox="0 0 9 9"
+          width="9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            tick
+          </title>
+          <path
+            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </span>
+      <button
+        className="c6 c7"
+      >
+        Define services
+      </button>
+      <span
+        className="c8"
+      />
+    </div>
+  </li>
+  <li
+    className="c1"
+  >
+    <div
+      className="c2 c10"
+    >
+      <span
+        className="c4"
+      >
+        <svg
+          active={false}
+          className="c5 "
+          completed={true}
+          first={undefined}
+          height="9"
+          last={undefined}
+          viewBox="0 0 9 9"
+          width="9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            tick
+          </title>
+          <path
+            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </span>
+      <button
+        className="c6 c7"
+      >
+        Define environment
+      </button>
+      <span
+        className="c8"
+      />
+    </div>
+  </li>
+  <li
+    className="c1"
+  >
+    <div
+      className="c2 c11"
+    >
+      <span
+        className="c12"
+      >
+        <svg
+          active={true}
+          className="c13 "
+          completed={undefined}
+          first={undefined}
+          height="9"
+          last={true}
+          viewBox="0 0 9 9"
+          width="9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            tick
+          </title>
+          <path
+            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </span>
+      <button
+        className="c6 c7"
+      >
+        Review and deploy
+      </button>
+      <span
+        className="c14"
+      />
+    </div>
+  </li>
+</ul>
+`;
+
+exports[`renders <Progress /> without throwing 6`] = `
+.c7 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c7::-moz-focus-inner,
+.c7[type='button']::-moz-focus-inner,
+.c7[type='reset']::-moz-focus-inner,
+.c7[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c7:-moz-focusring,
+.c7[type='button']:-moz-focusring,
+.c7[type='reset']:-moz-focusring,
+.c7[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c7:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c7:hover {
+  border: solid 0.0625rem;
+}
+
+.c7:active,
+.c7:active:hover,
+.c7:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c6[disabled] {
+.c7[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c6 + button {
+.c7 + button {
+  margin-left: 1.25rem;
+}
+
+.c1 {
+  float: left;
+}
+
+.c5 {
+  -webkit-fill: none;
+  fill: none;
+}
+
+.c4 {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: inherit;
+  border: 0.0625rem solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c6 {
+  padding: 0.75rem 1.125rem 0.75rem 0.75rem;
+  background-color: #FFFFFF;
+  color: #464646;
+  text-align: left;
+  border: none;
+  box-shadow: none;
+  line-height: 1.6;
+  cursor: default;
+}
+
+.c6:focus {
+  background-color: #FFFFFF;
+  border: none;
+  color: #464646;
+}
+
+.c6:hover {
+  background-color: #FFFFFF;
+  border: none;
+  color: #464646;
+}
+
+.c6:active,
+.c6:active:hover,
+.c6:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  color: #464646;
+}
+
+.c9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 8;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-right: 0.0625rem solid;
+  border-right: none;
+}
+
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 7;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-right: 0.0625rem solid;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 9;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-left: 0.0625rem solid;
+  padding-left: 0.8125rem;
+  border-right: none;
+}
+
+.c8 {
+  position: absolute;
+  top: 0;
+  right: -1.6875rem;
+  border: solid;
+  border-width: 0 0.0625rem 0.0625rem 0;
+  padding: 1.06875rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
+}
+
+.c11 {
+  position: absolute;
+  top: 0;
+  right: -1.6875rem;
+  border: solid;
+  border-width: 0 0.0625rem 0.0625rem 0;
+  padding: 1.06875rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
+  display: none;
+}
+
+.c0 {
+  display: table;
+  list-style-type: none;
+  padding: 0;
+}
+
+.c2 svg {
+  margin-top: 1px;
+  margin-left: 1px;
+}
+
+<ul
+  className="c0"
+>
+  <li
+    className="c1"
+  >
+    <div
+      className="c2 c3"
+    >
+      <span
+        className="c4"
+      >
+        <svg
+          active={false}
+          className="c5 "
+          completed={false}
+          first={true}
+          height="9"
+          last={undefined}
+          viewBox="0 0 9 9"
+          width="9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            tick
+          </title>
+          <path
+            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </span>
+      <button
+        className="c6 c7"
+      >
+        Define services
+      </button>
+      <span
+        className="c8"
+      />
+    </div>
+  </li>
+  <li
+    className="c1"
+  >
+    <div
+      className="c2 c9"
+    >
+      <span
+        className="c4"
+      >
+        <svg
+          active={false}
+          className="c5 "
+          completed={false}
+          first={undefined}
+          height="9"
+          last={undefined}
+          viewBox="0 0 9 9"
+          width="9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            tick
+          </title>
+          <path
+            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </span>
+      <button
+        className="c6 c7"
+      >
+        Define environment
+      </button>
+      <span
+        className="c8"
+      />
+    </div>
+  </li>
+  <li
+    className="c1"
+  >
+    <div
+      className="c2 c10"
+    >
+      <span
+        className="c4"
+      >
+        <svg
+          active={false}
+          className="c5 "
+          completed={undefined}
+          first={undefined}
+          height="9"
+          last={true}
+          viewBox="0 0 9 9"
+          width="9"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            tick
+          </title>
+          <path
+            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </span>
+      <button
+        className="c6 c7"
+      >
+        Review and deploy
+      </button>
+      <span
+        className="c11"
+      />
+    </div>
+  </li>
+</ul>
+`;
+
+exports[`renders <Progress /> without throwing 7`] = `
+.c7 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c7::-moz-focus-inner,
+.c7[type='button']::-moz-focus-inner,
+.c7[type='reset']::-moz-focus-inner,
+.c7[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c7:-moz-focusring,
+.c7[type='button']:-moz-focusring,
+.c7[type='reset']:-moz-focusring,
+.c7[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c7:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c7:hover {
+  border: solid 0.0625rem;
+}
+
+.c7:active,
+.c7:active:hover,
+.c7:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c7[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c7 + button {
   margin-left: 1.25rem;
 }
 
@@ -1444,7 +2801,7 @@ exports[`renders <Progress /> without throwing 4`] = `
   fill: none;
 }
 
-.c4 {
+.c5 {
   -webkit-fill: none;
   fill: none;
 }
@@ -1492,7 +2849,7 @@ exports[`renders <Progress /> without throwing 4`] = `
   align-items: center;
 }
 
-.c3 {
+.c4 {
   display: inline-block;
   border-radius: 50%;
   width: 1.125rem;
@@ -1514,7 +2871,7 @@ exports[`renders <Progress /> without throwing 4`] = `
   border: 0.0625rem solid;
 }
 
-.c5 {
+.c6 {
   padding: 0.75rem 1.125rem 0.75rem 0.75rem;
   background-color: #FFFFFF;
   color: #464646;
@@ -1525,52 +2882,26 @@ exports[`renders <Progress /> without throwing 4`] = `
   cursor: default;
 }
 
-.c5:focus {
+.c6:focus {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c5:hover {
+.c6:hover {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c5:active,
-.c5:active:hover,
-.c5:active:focus {
+.c6:active,
+.c6:active:hover,
+.c6:active:focus {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  z-index: 10;
-  padding-left: 2.5rem;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-left: 0.0625rem solid;
-  padding-left: 0.8125rem;
-  border-right: 0.0625rem solid;
-  border-right: none;
-}
-
 .c12 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1592,30 +2923,6 @@ exports[`renders <Progress /> without throwing 4`] = `
   border-right: 0.0625rem solid;
 }
 
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  z-index: 9;
-  padding-left: 2.5rem;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-right: 0.0625rem solid;
-  border-right: none;
-}
-
 .c9 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1640,7 +2947,33 @@ exports[`renders <Progress /> without throwing 4`] = `
   border-right: none;
 }
 
-.c7 {
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 9;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-left: 0.0625rem solid;
+  padding-left: 0.8125rem;
+  border-right: 0.0625rem solid;
+  border-right: none;
+}
+
+.c8 {
   position: absolute;
   top: 0;
   right: -1.6875rem;
@@ -1673,6 +3006,11 @@ exports[`renders <Progress /> without throwing 4`] = `
   padding: 0;
 }
 
+.c2 svg {
+  margin-top: 1px;
+  margin-left: 1px;
+}
+
 <ul
   className="c0"
 >
@@ -1680,14 +3018,14 @@ exports[`renders <Progress /> without throwing 4`] = `
     className="c1"
   >
     <div
-      className="c2"
+      className="c2 c3"
     >
       <span
-        className="c3"
+        className="c4"
       >
         <svg
           active={false}
-          className="c4 "
+          className="c5 "
           completed={true}
           first={true}
           height="9"
@@ -1706,12 +3044,12 @@ exports[`renders <Progress /> without throwing 4`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
-        Name the group
+        Define services
       </button>
       <span
-        className="c7"
+        className="c8"
       />
     </div>
   </li>
@@ -1719,46 +3057,7 @@ exports[`renders <Progress /> without throwing 4`] = `
     className="c1"
   >
     <div
-      className="c8"
-    >
-      <span
-        className="c3"
-      >
-        <svg
-          active={false}
-          className="c4 "
-          completed={true}
-          first={undefined}
-          height="9"
-          last={undefined}
-          viewBox="0 0 9 9"
-          width="9"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            tick
-          </title>
-          <path
-            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </span>
-      <button
-        className="c5 c6"
-      >
-        Define Services
-      </button>
-      <span
-        className="c7"
-      />
-    </div>
-  </li>
-  <li
-    className="c1"
-  >
-    <div
-      className="c9"
+      className="c2 c9"
     >
       <span
         className="c10"
@@ -1784,12 +3083,12 @@ exports[`renders <Progress /> without throwing 4`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
-        Define Environment
+        Define environment
       </button>
       <span
-        className="c7"
+        className="c8"
       />
     </div>
   </li>
@@ -1797,7 +3096,7 @@ exports[`renders <Progress /> without throwing 4`] = `
     className="c1"
   >
     <div
-      className="c12"
+      className="c2 c12"
     >
       <span
         className="c13"
@@ -1823,7 +3122,7 @@ exports[`renders <Progress /> without throwing 4`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
         Review and deploy
       </button>
@@ -1835,8 +3134,8 @@ exports[`renders <Progress /> without throwing 4`] = `
 </ul>
 `;
 
-exports[`renders <Progress /> without throwing 5`] = `
-.c6 {
+exports[`renders <Progress /> without throwing 8`] = `
+.c7 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1881,43 +3180,43 @@ exports[`renders <Progress /> without throwing 5`] = `
   border: solid 0.0625rem;
 }
 
-.c6::-moz-focus-inner,
-.c6[type='button']::-moz-focus-inner,
-.c6[type='reset']::-moz-focus-inner,
-.c6[type='submit']::-moz-focus-inner {
+.c7::-moz-focus-inner,
+.c7[type='button']::-moz-focus-inner,
+.c7[type='reset']::-moz-focus-inner,
+.c7[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c6:-moz-focusring,
-.c6[type='button']:-moz-focusring,
-.c6[type='reset']:-moz-focusring,
-.c6[type='submit']:-moz-focusring {
+.c7:-moz-focusring,
+.c7[type='button']:-moz-focusring,
+.c7[type='reset']:-moz-focusring,
+.c7[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c6:focus {
+.c7:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c6:hover {
+.c7:hover {
   border: solid 0.0625rem;
 }
 
-.c6:active,
-.c6:active:hover,
-.c6:active:focus {
+.c7:active,
+.c7:active:hover,
+.c7:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c6[disabled] {
+.c7[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c6 + button {
+.c7 + button {
   margin-left: 1.25rem;
 }
 
@@ -1930,7 +3229,7 @@ exports[`renders <Progress /> without throwing 5`] = `
   fill: none;
 }
 
-.c4 {
+.c5 {
   -webkit-fill: none;
   fill: none;
 }
@@ -1957,7 +3256,7 @@ exports[`renders <Progress /> without throwing 5`] = `
   border: 0.0625rem solid;
 }
 
-.c3 {
+.c4 {
   display: inline-block;
   border-radius: 50%;
   width: 1.125rem;
@@ -1979,7 +3278,7 @@ exports[`renders <Progress /> without throwing 5`] = `
   border: 0.0625rem solid;
 }
 
-.c5 {
+.c6 {
   padding: 0.75rem 1.125rem 0.75rem 0.75rem;
   background-color: #FFFFFF;
   color: #464646;
@@ -1990,76 +3289,26 @@ exports[`renders <Progress /> without throwing 5`] = `
   cursor: default;
 }
 
-.c5:focus {
+.c6:focus {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c5:hover {
+.c6:hover {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c5:active,
-.c5:active:hover,
-.c5:active:focus {
+.c6:active,
+.c6:active:hover,
+.c6:active:focus {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  z-index: 10;
-  padding-left: 2.5rem;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-left: 0.0625rem solid;
-  padding-left: 0.8125rem;
-  border-right: 0.0625rem solid;
-  border-right: none;
-}
-
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  z-index: 9;
-  padding-left: 2.5rem;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-right: 0.0625rem solid;
-  border-right: none;
-}
-
 .c9 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2107,7 +3356,33 @@ exports[`renders <Progress /> without throwing 5`] = `
   border-right: 0.0625rem solid;
 }
 
-.c7 {
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  z-index: 9;
+  padding-left: 2.5rem;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-top: 0.0625rem solid;
+  border-bottom: 0.0625rem solid;
+  border-left: 0.0625rem solid;
+  padding-left: 0.8125rem;
+  border-right: 0.0625rem solid;
+  border-right: none;
+}
+
+.c8 {
   position: absolute;
   top: 0;
   right: -1.6875rem;
@@ -2140,6 +3415,11 @@ exports[`renders <Progress /> without throwing 5`] = `
   padding: 0;
 }
 
+.c2 svg {
+  margin-top: 1px;
+  margin-left: 1px;
+}
+
 <ul
   className="c0"
 >
@@ -2147,14 +3427,14 @@ exports[`renders <Progress /> without throwing 5`] = `
     className="c1"
   >
     <div
-      className="c2"
+      className="c2 c3"
     >
       <span
-        className="c3"
+        className="c4"
       >
         <svg
           active={false}
-          className="c4 "
+          className="c5 "
           completed={true}
           first={true}
           height="9"
@@ -2173,12 +3453,12 @@ exports[`renders <Progress /> without throwing 5`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
-        Name the group
+        Define services
       </button>
       <span
-        className="c7"
+        className="c8"
       />
     </div>
   </li>
@@ -2186,14 +3466,14 @@ exports[`renders <Progress /> without throwing 5`] = `
     className="c1"
   >
     <div
-      className="c8"
+      className="c2 c9"
     >
       <span
-        className="c3"
+        className="c4"
       >
         <svg
           active={false}
-          className="c4 "
+          className="c5 "
           completed={true}
           first={undefined}
           height="9"
@@ -2212,12 +3492,12 @@ exports[`renders <Progress /> without throwing 5`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
-        Define Services
+        Define environment
       </button>
       <span
-        className="c7"
+        className="c8"
       />
     </div>
   </li>
@@ -2225,46 +3505,7 @@ exports[`renders <Progress /> without throwing 5`] = `
     className="c1"
   >
     <div
-      className="c9"
-    >
-      <span
-        className="c3"
-      >
-        <svg
-          active={false}
-          className="c4 "
-          completed={true}
-          first={undefined}
-          height="9"
-          last={undefined}
-          viewBox="0 0 9 9"
-          width="9"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            tick
-          </title>
-          <path
-            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </span>
-      <button
-        className="c5 c6"
-      >
-        Define Environment
-      </button>
-      <span
-        className="c7"
-      />
-    </div>
-  </li>
-  <li
-    className="c1"
-  >
-    <div
-      className="c10"
+      className="c2 c10"
     >
       <span
         className="c11"
@@ -2290,7 +3531,7 @@ exports[`renders <Progress /> without throwing 5`] = `
         </svg>
       </span>
       <button
-        className="c5 c6"
+        className="c6 c7"
       >
         Review and deploy
       </button>
@@ -2301,1204 +3542,3 @@ exports[`renders <Progress /> without throwing 5`] = `
   </li>
 </ul>
 `;
-
-exports[`renders <Progress /> without throwing 6`] = `
-.c6 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  min-width: 7.5rem;
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border-radius: 0.25rem;
-  border: solid 0.0625rem;
-}
-
-.c6::-moz-focus-inner,
-.c6[type='button']::-moz-focus-inner,
-.c6[type='reset']::-moz-focus-inner,
-.c6[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c6:-moz-focusring,
-.c6[type='button']:-moz-focusring,
-.c6[type='reset']:-moz-focusring,
-.c6[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c6:focus {
-  outline: 0;
-  text-decoration: none;
-}
-
-.c6:hover {
-  border: solid 0.0625rem;
-}
-
-.c6:active,
-.c6:active:hover,
-.c6:active:focus {
-  background-image: none;
-  outline: 0;
-}
-
-.c6[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c6 + button {
-  margin-left: 1.25rem;
-}
-
-.c1 {
-  float: left;
-}
-
-.c4 {
-  -webkit-fill: none;
-  fill: none;
-}
-
-.c3 {
-  display: inline-block;
-  border-radius: 50%;
-  width: 1.125rem;
-  height: 1.125rem;
-  background: inherit;
-  border: 0.0625rem solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c5 {
-  padding: 0.75rem 1.125rem 0.75rem 0.75rem;
-  background-color: #FFFFFF;
-  color: #464646;
-  text-align: left;
-  border: none;
-  box-shadow: none;
-  line-height: 1.6;
-  cursor: default;
-}
-
-.c5:focus {
-  background-color: #FFFFFF;
-  border: none;
-  color: #464646;
-}
-
-.c5:hover {
-  background-color: #FFFFFF;
-  border: none;
-  color: #464646;
-}
-
-.c5:active,
-.c5:active:hover,
-.c5:active:focus {
-  background-color: #FFFFFF;
-  border: none;
-  color: #464646;
-}
-
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  z-index: 8;
-  padding-left: 2.5rem;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-right: 0.0625rem solid;
-  border-right: none;
-}
-
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  z-index: 7;
-  padding-left: 2.5rem;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-right: 0.0625rem solid;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  z-index: 9;
-  padding-left: 2.5rem;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-left: 0.0625rem solid;
-  padding-left: 0.8125rem;
-  border-right: none;
-}
-
-.c7 {
-  position: absolute;
-  top: 0;
-  right: -1.6875rem;
-  border: solid;
-  border-width: 0 0.0625rem 0.0625rem 0;
-  padding: 1.06875rem;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
-}
-
-.c10 {
-  position: absolute;
-  top: 0;
-  right: -1.6875rem;
-  border: solid;
-  border-width: 0 0.0625rem 0.0625rem 0;
-  padding: 1.06875rem;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
-  display: none;
-}
-
-.c0 {
-  display: table;
-  list-style-type: none;
-  padding: 0;
-}
-
-<ul
-  className="c0"
->
-  <li
-    className="c1"
-  >
-    <div
-      className="c2"
-    >
-      <span
-        className="c3"
-      >
-        <svg
-          active={false}
-          className="c4 "
-          completed={false}
-          first={true}
-          height="9"
-          last={undefined}
-          viewBox="0 0 9 9"
-          width="9"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            tick
-          </title>
-          <path
-            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </span>
-      <button
-        className="c5 c6"
-      >
-        Define Services
-      </button>
-      <span
-        className="c7"
-      />
-    </div>
-  </li>
-  <li
-    className="c1"
-  >
-    <div
-      className="c8"
-    >
-      <span
-        className="c3"
-      >
-        <svg
-          active={false}
-          className="c4 "
-          completed={false}
-          first={undefined}
-          height="9"
-          last={undefined}
-          viewBox="0 0 9 9"
-          width="9"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            tick
-          </title>
-          <path
-            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </span>
-      <button
-        className="c5 c6"
-      >
-        Define Environment
-      </button>
-      <span
-        className="c7"
-      />
-    </div>
-  </li>
-  <li
-    className="c1"
-  >
-    <div
-      className="c9"
-    >
-      <span
-        className="c3"
-      >
-        <svg
-          active={false}
-          className="c4 "
-          completed={undefined}
-          first={undefined}
-          height="9"
-          last={true}
-          viewBox="0 0 9 9"
-          width="9"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            tick
-          </title>
-          <path
-            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </span>
-      <button
-        className="c5 c6"
-      >
-        Review and deploy
-      </button>
-      <span
-        className="c10"
-      />
-    </div>
-  </li>
-</ul>
-`;
-
-exports[`renders <Progress /> without throwing 7`] = `
-.c6 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  min-width: 7.5rem;
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border-radius: 0.25rem;
-  border: solid 0.0625rem;
-}
-
-.c6::-moz-focus-inner,
-.c6[type='button']::-moz-focus-inner,
-.c6[type='reset']::-moz-focus-inner,
-.c6[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c6:-moz-focusring,
-.c6[type='button']:-moz-focusring,
-.c6[type='reset']:-moz-focusring,
-.c6[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c6:focus {
-  outline: 0;
-  text-decoration: none;
-}
-
-.c6:hover {
-  border: solid 0.0625rem;
-}
-
-.c6:active,
-.c6:active:hover,
-.c6:active:focus {
-  background-image: none;
-  outline: 0;
-}
-
-.c6[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c6 + button {
-  margin-left: 1.25rem;
-}
-
-.c1 {
-  float: left;
-}
-
-.c10 {
-  -webkit-fill: none;
-  fill: none;
-}
-
-.c13 {
-  -webkit-fill: none;
-  fill: none;
-}
-
-.c4 {
-  -webkit-fill: none;
-  fill: none;
-}
-
-.c9 {
-  display: inline-block;
-  border-radius: 50%;
-  width: 1.125rem;
-  height: 1.125rem;
-  background: inherit;
-  border: 0.0625rem solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border: 0.0625rem solid;
-}
-
-.c12 {
-  display: inline-block;
-  border-radius: 50%;
-  width: 1.125rem;
-  height: 1.125rem;
-  background: inherit;
-  border: 0.0625rem solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c3 {
-  display: inline-block;
-  border-radius: 50%;
-  width: 1.125rem;
-  height: 1.125rem;
-  background: inherit;
-  border: 0.0625rem solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border: 0.0625rem solid;
-}
-
-.c5 {
-  padding: 0.75rem 1.125rem 0.75rem 0.75rem;
-  background-color: #FFFFFF;
-  color: #464646;
-  text-align: left;
-  border: none;
-  box-shadow: none;
-  line-height: 1.6;
-  cursor: default;
-}
-
-.c5:focus {
-  background-color: #FFFFFF;
-  border: none;
-  color: #464646;
-}
-
-.c5:hover {
-  background-color: #FFFFFF;
-  border: none;
-  color: #464646;
-}
-
-.c5:active,
-.c5:active:hover,
-.c5:active:focus {
-  background-color: #FFFFFF;
-  border: none;
-  color: #464646;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  z-index: 7;
-  padding-left: 2.5rem;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-right: 0.0625rem solid;
-}
-
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  z-index: 8;
-  padding-left: 2.5rem;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-right: 0.0625rem solid;
-  border-right: none;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  z-index: 9;
-  padding-left: 2.5rem;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-left: 0.0625rem solid;
-  padding-left: 0.8125rem;
-  border-right: 0.0625rem solid;
-  border-right: none;
-}
-
-.c7 {
-  position: absolute;
-  top: 0;
-  right: -1.6875rem;
-  border: solid;
-  border-width: 0 0.0625rem 0.0625rem 0;
-  padding: 1.06875rem;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
-}
-
-.c14 {
-  position: absolute;
-  top: 0;
-  right: -1.6875rem;
-  border: solid;
-  border-width: 0 0.0625rem 0.0625rem 0;
-  padding: 1.06875rem;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
-  display: none;
-}
-
-.c0 {
-  display: table;
-  list-style-type: none;
-  padding: 0;
-}
-
-<ul
-  className="c0"
->
-  <li
-    className="c1"
-  >
-    <div
-      className="c2"
-    >
-      <span
-        className="c3"
-      >
-        <svg
-          active={false}
-          className="c4 "
-          completed={true}
-          first={true}
-          height="9"
-          last={undefined}
-          viewBox="0 0 9 9"
-          width="9"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            tick
-          </title>
-          <path
-            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </span>
-      <button
-        className="c5 c6"
-      >
-        Define Services
-      </button>
-      <span
-        className="c7"
-      />
-    </div>
-  </li>
-  <li
-    className="c1"
-  >
-    <div
-      className="c8"
-    >
-      <span
-        className="c9"
-      >
-        <svg
-          active={true}
-          className="c10 "
-          completed={false}
-          first={undefined}
-          height="9"
-          last={undefined}
-          viewBox="0 0 9 9"
-          width="9"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            tick
-          </title>
-          <path
-            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </span>
-      <button
-        className="c5 c6"
-      >
-        Define Environment
-      </button>
-      <span
-        className="c7"
-      />
-    </div>
-  </li>
-  <li
-    className="c1"
-  >
-    <div
-      className="c11"
-    >
-      <span
-        className="c12"
-      >
-        <svg
-          active={false}
-          className="c13 "
-          completed={undefined}
-          first={undefined}
-          height="9"
-          last={true}
-          viewBox="0 0 9 9"
-          width="9"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            tick
-          </title>
-          <path
-            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </span>
-      <button
-        className="c5 c6"
-      >
-        Review and deploy
-      </button>
-      <span
-        className="c14"
-      />
-    </div>
-  </li>
-</ul>
-`;
-
-exports[`renders <Progress /> without throwing 8`] = `
-.c6 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  min-width: 7.5rem;
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border-radius: 0.25rem;
-  border: solid 0.0625rem;
-}
-
-.c6::-moz-focus-inner,
-.c6[type='button']::-moz-focus-inner,
-.c6[type='reset']::-moz-focus-inner,
-.c6[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c6:-moz-focusring,
-.c6[type='button']:-moz-focusring,
-.c6[type='reset']:-moz-focusring,
-.c6[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c6:focus {
-  outline: 0;
-  text-decoration: none;
-}
-
-.c6:hover {
-  border: solid 0.0625rem;
-}
-
-.c6:active,
-.c6:active:hover,
-.c6:active:focus {
-  background-image: none;
-  outline: 0;
-}
-
-.c6[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c6 + button {
-  margin-left: 1.25rem;
-}
-
-.c1 {
-  float: left;
-}
-
-.c11 {
-  -webkit-fill: none;
-  fill: none;
-}
-
-.c4 {
-  -webkit-fill: none;
-  fill: none;
-}
-
-.c10 {
-  display: inline-block;
-  border-radius: 50%;
-  width: 1.125rem;
-  height: 1.125rem;
-  background: inherit;
-  border: 0.0625rem solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border: 0.0625rem solid;
-}
-
-.c3 {
-  display: inline-block;
-  border-radius: 50%;
-  width: 1.125rem;
-  height: 1.125rem;
-  background: inherit;
-  border: 0.0625rem solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border: 0.0625rem solid;
-}
-
-.c5 {
-  padding: 0.75rem 1.125rem 0.75rem 0.75rem;
-  background-color: #FFFFFF;
-  color: #464646;
-  text-align: left;
-  border: none;
-  box-shadow: none;
-  line-height: 1.6;
-  cursor: default;
-}
-
-.c5:focus {
-  background-color: #FFFFFF;
-  border: none;
-  color: #464646;
-}
-
-.c5:hover {
-  background-color: #FFFFFF;
-  border: none;
-  color: #464646;
-}
-
-.c5:active,
-.c5:active:hover,
-.c5:active:focus {
-  background-color: #FFFFFF;
-  border: none;
-  color: #464646;
-}
-
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  z-index: 8;
-  padding-left: 2.5rem;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-right: 0.0625rem solid;
-  border-right: none;
-}
-
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  z-index: 7;
-  padding-left: 2.5rem;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-right: 0.0625rem solid;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  z-index: 9;
-  padding-left: 2.5rem;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-top: 0.0625rem solid;
-  border-bottom: 0.0625rem solid;
-  border-left: 0.0625rem solid;
-  padding-left: 0.8125rem;
-  border-right: 0.0625rem solid;
-  border-right: none;
-}
-
-.c7 {
-  position: absolute;
-  top: 0;
-  right: -1.6875rem;
-  border: solid;
-  border-width: 0 0.0625rem 0.0625rem 0;
-  padding: 1.06875rem;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
-}
-
-.c12 {
-  position: absolute;
-  top: 0;
-  right: -1.6875rem;
-  border: solid;
-  border-width: 0 0.0625rem 0.0625rem 0;
-  padding: 1.06875rem;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
-  display: none;
-}
-
-.c0 {
-  display: table;
-  list-style-type: none;
-  padding: 0;
-}
-
-<ul
-  className="c0"
->
-  <li
-    className="c1"
-  >
-    <div
-      className="c2"
-    >
-      <span
-        className="c3"
-      >
-        <svg
-          active={false}
-          className="c4 "
-          completed={true}
-          first={true}
-          height="9"
-          last={undefined}
-          viewBox="0 0 9 9"
-          width="9"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            tick
-          </title>
-          <path
-            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </span>
-      <button
-        className="c5 c6"
-      >
-        Define Services
-      </button>
-      <span
-        className="c7"
-      />
-    </div>
-  </li>
-  <li
-    className="c1"
-  >
-    <div
-      className="c8"
-    >
-      <span
-        className="c3"
-      >
-        <svg
-          active={false}
-          className="c4 "
-          completed={true}
-          first={undefined}
-          height="9"
-          last={undefined}
-          viewBox="0 0 9 9"
-          width="9"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            tick
-          </title>
-          <path
-            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </span>
-      <button
-        className="c5 c6"
-      >
-        Define Environment
-      </button>
-      <span
-        className="c7"
-      />
-    </div>
-  </li>
-  <li
-    className="c1"
-  >
-    <div
-      className="c9"
-    >
-      <span
-        className="c10"
-      >
-        <svg
-          active={true}
-          className="c11 "
-          completed={undefined}
-          first={undefined}
-          height="9"
-          last={true}
-          viewBox="0 0 9 9"
-          width="9"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>
-            tick
-          </title>
-          <path
-            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </span>
-      <button
-        className="c5 c6"
-      >
-        Review and deploy
-      </button>
-      <span
-        className="c12"
-      />
-    </div>
-  </li>
-</ul>
-`;
diff --git a/packages/cp-frontend/test/unit/components/manifest/__snapshots__/review.js.snap b/packages/cp-frontend/test/unit/components/manifest/__snapshots__/review.js.snap
index 7a9582db..8b25ad90 100644
--- a/packages/cp-frontend/test/unit/components/manifest/__snapshots__/review.js.snap
+++ b/packages/cp-frontend/test/unit/components/manifest/__snapshots__/review.js.snap
@@ -1,26 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Review /> without throwing 1`] = `
-.c3 {
+.c10 {
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
 }
 
-.c4 {
+.c11 {
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
 }
 
-.c5 {
+.c12 {
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
 }
 
-.c1 {
+.c8 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -66,47 +66,47 @@ exports[`renders <Review /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c1::-moz-focus-inner,
-.c1[type='button']::-moz-focus-inner,
-.c1[type='reset']::-moz-focus-inner,
-.c1[type='submit']::-moz-focus-inner {
+.c8::-moz-focus-inner,
+.c8[type='button']::-moz-focus-inner,
+.c8[type='reset']::-moz-focus-inner,
+.c8[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c1:-moz-focusring,
-.c1[type='button']:-moz-focusring,
-.c1[type='reset']:-moz-focusring,
-.c1[type='submit']:-moz-focusring {
+.c8:-moz-focusring,
+.c8[type='button']:-moz-focusring,
+.c8[type='reset']:-moz-focusring,
+.c8[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c1:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c1:hover {
+.c8:hover {
   border: solid 0.0625rem;
 }
 
-.c1:active,
-.c1:active:hover,
-.c1:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c1[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c1 + button {
+.c8 + button {
   margin-left: 1.25rem;
 }
 
-.c2 {
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -149,50 +149,90 @@ exports[`renders <Review /> without throwing 1`] = `
   background-image: none;
   border-radius: 0.25rem;
   border: solid 0.0625rem;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c2::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
+.c9::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
+.c9[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c2:-moz-focusring,
-.c2[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
+.c9:-moz-focusring,
+.c9[type='button']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
+.c9[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c2:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c2:hover {
+.c9:hover {
   border: solid 0.0625rem;
 }
 
-.c2:active,
-.c2:active:hover,
-.c2:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c2[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c2 + button {
+.c9 + button {
   margin-left: 1.25rem;
 }
 
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c6 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
 .c0 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid;
+}
+
+.c1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+}
+
+.c2 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c3 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+.c5 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+.c7 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -218,8 +258,35 @@ exports[`renders <Review /> without throwing 1`] = `
   <div
     className="c0"
   >
-    <button
+    <div
       className="c1"
+      type="EDUCATIONAL"
+    />
+    <div
+      className="c2"
+    >
+      <h3
+        className="c3 c4"
+      >
+        Reviewing
+      </h3>
+      <p
+        className="c5 c6"
+      >
+        Review names of services, images being used and packages you chose or that have been recommended to you
+      </p>
+    </div>
+  </div>
+  <p
+    className="c6"
+  >
+    A single instance of each service will be deployed.
+  </p>
+  <div
+    className="c7"
+  >
+    <button
+      className="c8"
       disabled={true}
       onClick={[Function]}
       type="button"
@@ -227,8 +294,7 @@ exports[`renders <Review /> without throwing 1`] = `
       Cancel
     </button>
     <button
-      className="c2"
-      disabled={true}
+      className="c9"
       type="submit"
     >
       <svg
@@ -236,21 +302,21 @@ exports[`renders <Review /> without throwing 1`] = `
         width="28"
       >
         <rect
-          className="c3"
+          className="c10"
           height="6"
           width="6"
           x="2"
           y="2"
         />
         <rect
-          className="c4"
+          className="c11"
           height="6"
           width="6"
           x="11"
           y="2"
         />
         <rect
-          className="c5"
+          className="c12"
           height="6"
           width="6"
           x="20"
@@ -263,7 +329,7 @@ exports[`renders <Review /> without throwing 1`] = `
 `;
 
 exports[`renders <Review /> without throwing 2`] = `
-.c1 {
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -308,47 +374,47 @@ exports[`renders <Review /> without throwing 2`] = `
   border: solid 0.0625rem;
 }
 
-.c1::-moz-focus-inner,
-.c1[type='button']::-moz-focus-inner,
-.c1[type='reset']::-moz-focus-inner,
-.c1[type='submit']::-moz-focus-inner {
+.c9::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
+.c9[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c1:-moz-focusring,
-.c1[type='button']:-moz-focusring,
-.c1[type='reset']:-moz-focusring,
-.c1[type='submit']:-moz-focusring {
+.c9:-moz-focusring,
+.c9[type='button']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
+.c9[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c1:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c1:hover {
+.c9:hover {
   border: solid 0.0625rem;
 }
 
-.c1:active,
-.c1:active:hover,
-.c1:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c1[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c1 + button {
+.c9 + button {
   margin-left: 1.25rem;
 }
 
-.c2 {
+.c8 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -393,47 +459,88 @@ exports[`renders <Review /> without throwing 2`] = `
   border: solid 0.0625rem;
 }
 
-.c2::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
+.c8::-moz-focus-inner,
+.c8[type='button']::-moz-focus-inner,
+.c8[type='reset']::-moz-focus-inner,
+.c8[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c2:-moz-focusring,
-.c2[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
+.c8:-moz-focusring,
+.c8[type='button']:-moz-focusring,
+.c8[type='reset']:-moz-focusring,
+.c8[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c2:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c2:hover {
+.c8:hover {
   border: solid 0.0625rem;
 }
 
-.c2:active,
-.c2:active:hover,
-.c2:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c2[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c2 + button {
+.c8 + button {
   margin-left: 1.25rem;
 }
 
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c6 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
 .c0 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid;
+}
+
+.c1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+}
+
+.c2 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c3 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+.c5 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+.c7 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -459,8 +566,35 @@ exports[`renders <Review /> without throwing 2`] = `
   <div
     className="c0"
   >
-    <button
+    <div
       className="c1"
+      type="EDUCATIONAL"
+    />
+    <div
+      className="c2"
+    >
+      <h3
+        className="c3 c4"
+      >
+        Reviewing
+      </h3>
+      <p
+        className="c5 c6"
+      >
+        Review names of services, images being used and packages you chose or that have been recommended to you
+      </p>
+    </div>
+  </div>
+  <p
+    className="c6"
+  >
+    A single instance of each service will be deployed.
+  </p>
+  <div
+    className="c7"
+  >
+    <button
+      className="c8"
       disabled={undefined}
       onClick={[Function]}
       type="button"
@@ -468,8 +602,7 @@ exports[`renders <Review /> without throwing 2`] = `
       Cancel
     </button>
     <button
-      className="c2"
-      disabled={undefined}
+      className="c9"
       type="submit"
     >
       Confirm and Deploy
@@ -479,7 +612,7 @@ exports[`renders <Review /> without throwing 2`] = `
 `;
 
 exports[`renders <Review /> without throwing 3`] = `
-.c1 {
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -524,47 +657,47 @@ exports[`renders <Review /> without throwing 3`] = `
   border: solid 0.0625rem;
 }
 
-.c1::-moz-focus-inner,
-.c1[type='button']::-moz-focus-inner,
-.c1[type='reset']::-moz-focus-inner,
-.c1[type='submit']::-moz-focus-inner {
+.c9::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
+.c9[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c1:-moz-focusring,
-.c1[type='button']:-moz-focusring,
-.c1[type='reset']:-moz-focusring,
-.c1[type='submit']:-moz-focusring {
+.c9:-moz-focusring,
+.c9[type='button']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
+.c9[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c1:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c1:hover {
+.c9:hover {
   border: solid 0.0625rem;
 }
 
-.c1:active,
-.c1:active:hover,
-.c1:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c1[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c1 + button {
+.c9 + button {
   margin-left: 1.25rem;
 }
 
-.c2 {
+.c8 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -609,47 +742,88 @@ exports[`renders <Review /> without throwing 3`] = `
   border: solid 0.0625rem;
 }
 
-.c2::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
+.c8::-moz-focus-inner,
+.c8[type='button']::-moz-focus-inner,
+.c8[type='reset']::-moz-focus-inner,
+.c8[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c2:-moz-focusring,
-.c2[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
+.c8:-moz-focusring,
+.c8[type='button']:-moz-focusring,
+.c8[type='reset']:-moz-focusring,
+.c8[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c2:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c2:hover {
+.c8:hover {
   border: solid 0.0625rem;
 }
 
-.c2:active,
-.c2:active:hover,
-.c2:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c2[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c2 + button {
+.c8 + button {
   margin-left: 1.25rem;
 }
 
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c6 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
 .c0 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid;
+}
+
+.c1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+}
+
+.c2 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c3 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+.c5 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+.c7 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -675,8 +849,35 @@ exports[`renders <Review /> without throwing 3`] = `
   <div
     className="c0"
   >
-    <button
+    <div
       className="c1"
+      type="EDUCATIONAL"
+    />
+    <div
+      className="c2"
+    >
+      <h3
+        className="c3 c4"
+      >
+        Reviewing
+      </h3>
+      <p
+        className="c5 c6"
+      >
+        Review names of services, images being used and packages you chose or that have been recommended to you
+      </p>
+    </div>
+  </div>
+  <p
+    className="c6"
+  >
+    A single instance of each service will be deployed.
+  </p>
+  <div
+    className="c7"
+  >
+    <button
+      className="c8"
       disabled={undefined}
       onClick={[Function]}
       type="button"
@@ -684,8 +885,7 @@ exports[`renders <Review /> without throwing 3`] = `
       Cancel
     </button>
     <button
-      className="c2"
-      disabled={undefined}
+      className="c9"
       type="submit"
     >
       Confirm and Deploy
diff --git a/packages/cp-frontend/test/unit/components/service/__snapshots__/scale.js.snap b/packages/cp-frontend/test/unit/components/service/__snapshots__/scale.js.snap
index ed9a0ce8..c88d2732 100644
--- a/packages/cp-frontend/test/unit/components/service/__snapshots__/scale.js.snap
+++ b/packages/cp-frontend/test/unit/components/service/__snapshots__/scale.js.snap
@@ -358,7 +358,7 @@ exports[`renders <Scale /> without throwing 1`] = `
       >
         <input
           className="c7 c8"
-          id="bZKUCn"
+          id="cwNinu"
           name="replicas"
           onBlur={[Function]}
           onChange={[Function]}
diff --git a/packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/create.js.snap b/packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/create.js.snap
index 1fca4cd7..d537a1fe 100644
--- a/packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/create.js.snap
+++ b/packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/create.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
-.c8 {
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -46,43 +46,43 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
   border: solid 0.0625rem;
 }
 
-.c8::-moz-focus-inner,
-.c8[type='button']::-moz-focus-inner,
-.c8[type='reset']::-moz-focus-inner,
-.c8[type='submit']::-moz-focus-inner {
+.c9::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
+.c9[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c8:-moz-focusring,
-.c8[type='button']:-moz-focusring,
-.c8[type='reset']:-moz-focusring,
-.c8[type='submit']:-moz-focusring {
+.c9:-moz-focusring,
+.c9[type='button']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
+.c9[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c8:hover {
+.c9:hover {
   border: solid 0.0625rem;
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8 + button {
+.c9 + button {
   margin-left: 1.25rem;
 }
 
@@ -90,39 +90,39 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
   float: left;
 }
 
-.c6 {
+.c7 {
   -webkit-fill: none;
   fill: none;
 }
 
+.c13 {
+  -webkit-fill: none;
+  fill: none;
+}
+
+.c6 {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: inherit;
+  border: 0.0625rem solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0.0625rem solid;
+}
+
 .c12 {
-  -webkit-fill: none;
-  fill: none;
-}
-
-.c5 {
-  display: inline-block;
-  border-radius: 50%;
-  width: 1.125rem;
-  height: 1.125rem;
-  background: inherit;
-  border: 0.0625rem solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border: 0.0625rem solid;
-}
-
-.c11 {
   display: inline-block;
   border-radius: 50%;
   width: 1.125rem;
@@ -143,7 +143,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
   align-items: center;
 }
 
-.c7 {
+.c8 {
   padding: 0.75rem 1.125rem 0.75rem 0.75rem;
   background-color: #FFFFFF;
   color: #464646;
@@ -154,27 +154,27 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
   cursor: default;
 }
 
-.c7:focus {
+.c8:focus {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c7:hover {
+.c8:hover {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-color: #FFFFFF;
   border: none;
   color: #464646;
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -200,7 +200,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
   border-right: none;
 }
 
-.c10 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -222,7 +222,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
   border-right: none;
 }
 
-.c14 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -244,7 +244,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
   border-right: none;
 }
 
-.c15 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -265,7 +265,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
   border-right: 0.0625rem solid;
 }
 
-.c9 {
+.c10 {
   position: absolute;
   top: 0;
   right: -1.6875rem;
@@ -278,7 +278,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
   margin: 0.4rem 0.625rem 0.4rem 0.625rem;
 }
 
-.c13 {
+.c14 {
   position: absolute;
   top: 0;
   right: -1.6875rem;
@@ -291,7 +291,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
   margin: 0.4rem 0.625rem 0.4rem 0.625rem;
 }
 
-.c16 {
+.c17 {
   position: absolute;
   top: 0;
   right: -1.6875rem;
@@ -311,6 +311,11 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
   padding: 0;
 }
 
+.c4 svg {
+  margin-top: 1px;
+  margin-left: 1px;
+}
+
 .c0 {
   margin-right: auto;
   margin-left: auto;
@@ -370,14 +375,14 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
       className="c3"
     >
       <div
-        className="c4"
+        className="c4 c5"
       >
         <span
-          className="c5"
+          className="c6"
         >
           <svg
             active={false}
-            className="c6 "
+            className="c7 "
             completed={true}
             first={true}
             height="9"
@@ -396,12 +401,12 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
           </svg>
         </span>
         <button
-          className="c7 c8"
+          className="c8 c9"
         >
           Name the group
         </button>
         <span
-          className="c9"
+          className="c10"
         />
       </div>
     </li>
@@ -409,14 +414,14 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
       className="c3"
     >
       <div
-        className="c10"
+        className="c4 c11"
       >
         <span
-          className="c11"
+          className="c12"
         >
           <svg
             active={false}
-            className="c12 "
+            className="c13 "
             completed={false}
             first={undefined}
             height="9"
@@ -435,12 +440,12 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
           </svg>
         </span>
         <button
-          className="c7 c8"
+          className="c8 c9"
         >
-          Define Services
+          Define services
         </button>
         <span
-          className="c13"
+          className="c14"
         />
       </div>
     </li>
@@ -448,14 +453,14 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
       className="c3"
     >
       <div
-        className="c14"
+        className="c4 c15"
       >
         <span
-          className="c11"
+          className="c12"
         >
           <svg
             active={false}
-            className="c12 "
+            className="c13 "
             completed={false}
             first={undefined}
             height="9"
@@ -474,12 +479,12 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
           </svg>
         </span>
         <button
-          className="c7 c8"
+          className="c8 c9"
         >
-          Define Environment
+          Define environment
         </button>
         <span
-          className="c13"
+          className="c14"
         />
       </div>
     </li>
@@ -487,14 +492,14 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
       className="c3"
     >
       <div
-        className="c15"
+        className="c4 c16"
       >
         <span
-          className="c11"
+          className="c12"
         >
           <svg
             active={false}
-            className="c12 "
+            className="c13 "
             completed={undefined}
             first={undefined}
             height="9"
@@ -513,12 +518,12 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
           </svg>
         </span>
         <button
-          className="c7 c8"
+          className="c8 c9"
         >
           Review and deploy
         </button>
         <span
-          className="c16"
+          className="c17"
         />
       </div>
     </li>
diff --git a/packages/cp-frontend/test/unit/containers/service/__snapshots__/scale.js.snap b/packages/cp-frontend/test/unit/containers/service/__snapshots__/scale.js.snap
index 2bf44d11..38763699 100644
--- a/packages/cp-frontend/test/unit/containers/service/__snapshots__/scale.js.snap
+++ b/packages/cp-frontend/test/unit/containers/service/__snapshots__/scale.js.snap
@@ -516,7 +516,7 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
           >
             <input
               className="c12 c13"
-              id="bIxZkW"
+              id="efBEr"
               name="replicas"
               onBlur={[Function]}
               onChange={[Function]}
diff --git a/packages/cp-frontend/test/unit/containers/services/__snapshots__/menu.js.snap b/packages/cp-frontend/test/unit/containers/services/__snapshots__/menu.js.snap
index 1247db02..aed25bd2 100644
--- a/packages/cp-frontend/test/unit/containers/services/__snapshots__/menu.js.snap
+++ b/packages/cp-frontend/test/unit/containers/services/__snapshots__/menu.js.snap
@@ -236,7 +236,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
           >
             <li
               className="c7"
-              id="bqlWiO"
+              id="cjxBsY"
             >
               <div
                 className="c8"
@@ -244,7 +244,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
                 <input
                   checked={false}
                   className="c9 c10"
-                  id="bYNDQU"
+                  id="bHuZdp"
                   name="service-view"
                   onChange={[Function]}
                   type="radio"
@@ -252,7 +252,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
                 />
                 <label
                   className="c11"
-                  htmlFor="bYNDQU"
+                  htmlFor="bHuZdp"
                 >
                   List
                 </label>
@@ -260,7 +260,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
             </li>
             <li
               className="c7"
-              id="bqlWiO"
+              id="cjxBsY"
             >
               <div
                 className="c8"
@@ -268,7 +268,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
                 <input
                   checked={false}
                   className="c9 c10"
-                  id="cpsYND"
+                  id="cCFuSG"
                   name="service-view"
                   onChange={[Function]}
                   type="radio"
@@ -276,7 +276,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
                 />
                 <label
                   className="c11"
-                  htmlFor="cpsYND"
+                  htmlFor="cCFuSG"
                 >
                   Topology
                 </label>
diff --git a/packages/cp-gql-mock-server/.yarnclean b/packages/cp-gql-mock-server/.yarnclean
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/cp-gql-mock-server/package.json b/packages/cp-gql-mock-server/package.json
index 90a0c6d8..70143cd2 100644
--- a/packages/cp-gql-mock-server/package.json
+++ b/packages/cp-gql-mock-server/package.json
@@ -10,7 +10,7 @@
     "lint-ci": "eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/cp-gql-mock-server.xml",
     "test": "NODE_ENV=test nyc --reporter=lcov --reporter=text ava --verbose",
     "test-ci": "NODE_ENV=test nyc --report-dir=$CIRCLE_ARTIFACTS/cp-gql-mock-server --reporter=lcov --reporter=text ava --verbose --tap | tap-xunit > $CIRCLE_TEST_REPORTS/test/cp-gql-mock-server.xml",
-    "start": "node src/index.js",
+    "start": "PORT=4000 node src/index.js",
     "dev": "PORT=3000 nodemon src/index.js",
     "prepublish": "echo 0"
   },
@@ -36,12 +36,14 @@
   },
   "devDependencies": {
     "apollo-client": "^1.9.2",
+    "apr-for-each": "^1.0.6",
     "ava": "^0.22.0",
     "delay": "^2.0.0",
     "eslint": "^4.5.0",
     "eslint-config-joyent-portal": "3.0.0",
     "execa": "^0.8.0",
     "lodash.sortby": "^4.7.0",
+    "lodash.uniq": "^4.5.0",
     "mz": "^2.6.0",
     "node-fetch": "^1.7.2",
     "nodemon": "^1.11.0",
@@ -49,8 +51,12 @@
     "tap-xunit": "^1.7.0"
   },
   "ava": {
-    "files": ["test/*.js"],
-    "source": ["src/*.js"],
+    "files": [
+      "test/*.js"
+    ],
+    "source": [
+      "src/*.js"
+    ],
     "failFast": true
   }
 }