From 67f36a464be6bc3f084742ad5a6c6392157fbfbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Thu, 18 Jan 2018 14:46:49 +0000
Subject: [PATCH] fix(my-joy-beta): create instance deploy ux improvements

fixes #1015
---
 packages/my-joy-beta/package.json             |    2 +-
 .../__snapshots__/images.spec.js.snap         | 2637 ++++++++++++++++-
 .../__tests__/__snapshots__/name.spec.js.snap | 1560 +++++++++-
 .../__snapshots__/title.spec.js.snap          |  486 +--
 .../src/components/create-instance/image.js   |  162 +-
 .../src/components/create-instance/name.js    |   87 +-
 .../src/components/create-instance/title.js   |   15 +-
 .../__snapshots__/metadata.spec.js.snap       | 1165 ++++----
 .../__snapshots__/networks.spec.js.snap       | 1062 +++----
 .../__tests__/__snapshots__/tag.spec.js.snap  | 1035 +++----
 .../containers/create-instance/affinity.js    |    7 +-
 .../src/containers/create-instance/cns.js     |    4 +-
 .../containers/create-instance/firewall.js    |   10 +-
 .../src/containers/create-instance/image.js   |   71 +-
 .../src/containers/create-instance/index.js   |  162 +-
 .../containers/create-instance/metadata.js    |    7 +-
 .../src/containers/create-instance/name.js    |   62 +-
 .../containers/create-instance/networks.js    |    7 +-
 .../src/containers/create-instance/package.js |   29 +-
 .../src/containers/create-instance/tags.js    |    4 +-
 yarn.lock                                     |   10 +-
 21 files changed, 6264 insertions(+), 2320 deletions(-)

diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json
index c620540d..2dcb5c32 100644
--- a/packages/my-joy-beta/package.json
+++ b/packages/my-joy-beta/package.json
@@ -41,7 +41,7 @@
     "react-apollo": "^2.0.4",
     "react-dom": "^16.2.0",
     "react-redux": "^5.0.6",
-    "react-redux-values": "^1.0.2",
+    "react-redux-values": "^1.1.2",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "redux": "^3.7.2",
diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap
index ca285807..d73a312b 100644
--- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap
@@ -1,31 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Images /> without throwing 1`] = `
-<form
-  onSubmit={undefined}
-/>
-`;
-
-exports[`renders <Images Images="test" /> without throwing 1`] = `
-<form
-  onSubmit={undefined}
-/>
-`;
-
-exports[`renders <Images expanded /> without throwing 1`] = `
-.c2 {
-  margin-bottom: 1rem;
-}
-
-.c4 {
+.c0 {
   margin-bottom: 2rem;
 }
 
-.c11 {
+.c8 {
   margin-top: 2rem;
 }
 
-.c6 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -49,7 +33,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   align-items: center;
 }
 
-.c0 {
+.c7 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -68,16 +52,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c14 {
+.c11 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -90,50 +65,30 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c14::-moz-focus-inner,
-.c14[type='button']::-moz-focus-inner,
-.c14[type='reset']::-moz-focus-inner,
-.c14[type='submit']::-moz-focus-inner {
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c14:-moz-focusring,
-.c14[type='button']:-moz-focusring,
-.c14[type='reset']:-moz-focusring,
-.c14[type='submit']:-moz-focusring {
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c14 + button {
+.c11 + button {
   margin-left: 0.375rem;
 }
 
-.c3 {
-  color: rgba(73,73,73,1);
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
-}
-
-.c13 {
+.c10 {
   display: inline-block;
 }
 
-.c12 {
+.c9 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -178,50 +133,50 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c12:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c12:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c12:active,
-.c12:active:hover,
-.c12:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c12[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c12:focus {
+.c9:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c12:hover {
+.c9:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c12:active,
-.c12:active:hover,
-.c12:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c7 {
+.c3 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -234,7 +189,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c5 {
+.c1 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -249,7 +204,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c8 {
+.c4 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -262,27 +217,27 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   align-items: center;
 }
 
-.c9 {
+.c5 {
   display: none;
 }
 
-.c9:checked + label {
+.c5:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c9:checked + label:after {
+.c5:checked + label:after {
   -webkit-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c9:checked + label:active {
+.c5:checked + label:active {
   box-shadow: none;
 }
 
-.c10 {
+.c6 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -302,24 +257,24 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   margin-right: 0.375rem;
 }
 
-.c10::selection {
+.c6::selection {
   background: none;
 }
 
-.c10:active {
+.c6:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c10:hover {
+.c6:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c10:hover:after {
+.c6:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c10:after,
-.c10:before {
+.c6:after,
+.c6:before {
   position: relative;
   display: block;
   content: '';
@@ -327,7 +282,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   height: 100%;
 }
 
-.c10:after {
+.c6:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -339,34 +294,14 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c10:active {
+.c6:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c10:before {
+.c6:before {
   display: none;
 }
 
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c1 {
-    -webkit-flex-basis: 66.66666666666667%;
-    -ms-flex-preferred-size: 66.66666666666667%;
-    flex-basis: 66.66666666666667%;
-    max-width: 66.66666666666667%;
-    display: block;
-  }
-}
-
 <form
   onSubmit={undefined}
 >
@@ -374,63 +309,38 @@ exports[`renders <Images expanded /> without throwing 1`] = `
     className="c0"
   >
     <div
-      className="c1"
-    >
-      <div
-        className="c2"
-      >
-        <p
-          className="c3"
-        >
-          Hardware virtual machines are generally used for non-containerized applications. Infrastructure containers are generally for running any Linux image on secure, bare metal containers.
-           
-          <a
-            href="https://docs.joyent.com/private-cloud/images"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            Read the docs
-          </a>
-        </p>
-      </div>
-    </div>
-  </div>
-  <div
-    className="c4"
-  >
-    <div
-      className="baseline-jVaZNU kXgQxt c5"
+      className="baseline-jVaZNU kXgQxt c1"
       name="vms"
       role="group"
       style={undefined}
     >
       <div
-        className="c6"
+        className="c2"
       >
         <label
-          className="c7"
+          className="c3"
           htmlFor="Y"
         >
           Infrastructure Container 
         </label>
         <div
-          className="c8"
+          className="c4"
         >
           <input
             checked={undefined}
-            className="c9"
+            className="c5"
             id="Y"
             onBlur={null}
             type="checkbox"
           />
           <label
-            className="c10"
+            className="c6"
             htmlFor="Y"
             id="Y"
             onBlur={null}
           />
           <label
-            className="c7"
+            className="c3"
             htmlFor="Y"
             id="Y"
             onBlur={null}
@@ -443,13 +353,753 @@ exports[`renders <Images expanded /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c0"
+    className="c7"
   />
   <div
-    className="c11"
+    className="c8"
   >
     <button
-      className="c12 c13 c14"
+      className="c9 c10 c11"
+      disabled={true}
+      href=""
+      type="submit"
+    >
+      Next
+    </button>
+  </div>
+</form>
+`;
+
+exports[`renders <Images Images="test" /> without throwing 1`] = `
+.c0 {
+  margin-bottom: 2rem;
+}
+
+.c8 {
+  margin-top: 2rem;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c11 {
+  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;
+}
+
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c11 + button {
+  margin-left: 0.375rem;
+}
+
+.c10 {
+  display: inline-block;
+}
+
+.c9 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c9:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c9:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c9[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c9:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c9:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c3 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c1 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c4 {
+  position: relative;
+  vertical-align: text-bottom;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  display: none;
+}
+
+.c5:checked + label {
+  background: #3B46CC;
+  border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c5:checked + label:after {
+  -webkit-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c5:checked + label:active {
+  box-shadow: none;
+}
+
+.c6 {
+  outline: 0;
+  display: block;
+  width: 2.875rem;
+  height: 1.5rem;
+  position: relative;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  background: rgb(250,250,250);
+  border-radius: 1.4375rem;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  border: 0.0625rem solid rgb(216,216,216);
+  margin-right: 0.375rem;
+}
+
+.c6::selection {
+  background: none;
+}
+
+.c6:active {
+  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
+}
+
+.c6:hover {
+  border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c6:hover:after {
+  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c6:after,
+.c6:before {
+  position: relative;
+  display: block;
+  content: '';
+  width: 50%;
+  height: 100%;
+}
+
+.c6:after {
+  -webkit-transform: translateX(0%);
+  -ms-transform: translateX(0%);
+  transform: translateX(0%);
+  border-radius: 50%;
+  background: rgb(255,255,255);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
+}
+
+.c6:active {
+  box-shadow: inset 0 0 0 2em rgb(216,216,216);
+}
+
+.c6:before {
+  display: none;
+}
+
+<form
+  onSubmit={undefined}
+>
+  <div
+    className="c0"
+  >
+    <div
+      className="baseline-jVaZNU kXgQxt c1"
+      name="vms"
+      role="group"
+      style={undefined}
+    >
+      <div
+        className="c2"
+      >
+        <label
+          className="c3"
+          htmlFor="a"
+        >
+          Infrastructure Container 
+        </label>
+        <div
+          className="c4"
+        >
+          <input
+            checked={undefined}
+            className="c5"
+            id="a"
+            onBlur={null}
+            type="checkbox"
+          />
+          <label
+            className="c6"
+            htmlFor="a"
+            id="a"
+            onBlur={null}
+          />
+          <label
+            className="c3"
+            htmlFor="a"
+            id="a"
+            onBlur={null}
+          >
+             
+            Hardware Virtual Machine
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c7"
+  />
+  <div
+    className="c8"
+  >
+    <button
+      className="c9 c10 c11"
+      disabled={true}
+      href=""
+      type="submit"
+    >
+      Next
+    </button>
+  </div>
+</form>
+`;
+
+exports[`renders <Images expanded /> without throwing 1`] = `
+.c0 {
+  margin-bottom: 2rem;
+}
+
+.c8 {
+  margin-top: 2rem;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c11 {
+  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;
+}
+
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c11 + button {
+  margin-left: 0.375rem;
+}
+
+.c10 {
+  display: inline-block;
+}
+
+.c9 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c9:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c9:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c9[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c9:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c9:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c3 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c1 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c4 {
+  position: relative;
+  vertical-align: text-bottom;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  display: none;
+}
+
+.c5:checked + label {
+  background: #3B46CC;
+  border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c5:checked + label:after {
+  -webkit-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c5:checked + label:active {
+  box-shadow: none;
+}
+
+.c6 {
+  outline: 0;
+  display: block;
+  width: 2.875rem;
+  height: 1.5rem;
+  position: relative;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  background: rgb(250,250,250);
+  border-radius: 1.4375rem;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  border: 0.0625rem solid rgb(216,216,216);
+  margin-right: 0.375rem;
+}
+
+.c6::selection {
+  background: none;
+}
+
+.c6:active {
+  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
+}
+
+.c6:hover {
+  border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c6:hover:after {
+  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c6:after,
+.c6:before {
+  position: relative;
+  display: block;
+  content: '';
+  width: 50%;
+  height: 100%;
+}
+
+.c6:after {
+  -webkit-transform: translateX(0%);
+  -ms-transform: translateX(0%);
+  transform: translateX(0%);
+  border-radius: 50%;
+  background: rgb(255,255,255);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
+}
+
+.c6:active {
+  box-shadow: inset 0 0 0 2em rgb(216,216,216);
+}
+
+.c6:before {
+  display: none;
+}
+
+<form
+  onSubmit={undefined}
+>
+  <div
+    className="c0"
+  >
+    <div
+      className="baseline-jVaZNU kXgQxt c1"
+      name="vms"
+      role="group"
+      style={undefined}
+    >
+      <div
+        className="c2"
+      >
+        <label
+          className="c3"
+          htmlFor="Z"
+        >
+          Infrastructure Container 
+        </label>
+        <div
+          className="c4"
+        >
+          <input
+            checked={undefined}
+            className="c5"
+            id="Z"
+            onBlur={null}
+            type="checkbox"
+          />
+          <label
+            className="c6"
+            htmlFor="Z"
+            id="Z"
+            onBlur={null}
+          />
+          <label
+            className="c3"
+            htmlFor="Z"
+            id="Z"
+            onBlur={null}
+          >
+             
+            Hardware Virtual Machine
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c7"
+  />
+  <div
+    className="c8"
+  >
+    <button
+      className="c9 c10 c11"
       disabled={true}
       href=""
       type="submit"
@@ -461,25 +1111,1716 @@ exports[`renders <Images expanded /> without throwing 1`] = `
 `;
 
 exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without throwing 1`] = `
+.c0 {
+  margin-bottom: 2rem;
+}
+
+.c15 {
+  margin-top: 2rem;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c8 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c18 {
+  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;
+}
+
+.c18::-moz-focus-inner,
+.c18[type='button']::-moz-focus-inner,
+.c18[type='reset']::-moz-focus-inner,
+.c18[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c18:-moz-focusring,
+.c18[type='button']:-moz-focusring,
+.c18[type='reset']:-moz-focusring,
+.c18[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c18 + button {
+  margin-left: 0.375rem;
+}
+
+.c13 {
+  position: relative;
+  padding: 0.75rem;
+  padding-right: 1.5625rem;
+}
+
+.c17 {
+  display: inline-block;
+}
+
+.c16 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c16:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c16:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c16[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c16:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c16:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c3 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c10 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c10 + p,
+.c10 + small,
+.c10 + h1,
+.c10 + h2,
+.c10 + label,
+.c10 + h3,
+.c10 + h4,
+.c10 + h5,
+.c10 + div,
+.c10 + span {
+  margin-top: 0.75rem;
+}
+
+.c1 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c12 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+  min-width: 18.75rem;
+}
+
+.c12:after {
+  content: '';
+  width: 0.625rem;
+  height: 0.625rem;
+  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpbGw9IiM0OTQ5NDkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) center center no-repeat;
+  display: block;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 0.75rem;
+}
+
+.c14 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c14::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:invalid {
+  box-shadow: none;
+}
+
+.c14:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c14:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c4 {
+  position: relative;
+  vertical-align: text-bottom;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  display: none;
+}
+
+.c5:checked + label {
+  background: #3B46CC;
+  border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c5:checked + label:after {
+  -webkit-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c5:checked + label:active {
+  box-shadow: none;
+}
+
+.c6 {
+  outline: 0;
+  display: block;
+  width: 2.875rem;
+  height: 1.5rem;
+  position: relative;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  background: rgb(250,250,250);
+  border-radius: 1.4375rem;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  border: 0.0625rem solid rgb(216,216,216);
+  margin-right: 0.375rem;
+}
+
+.c6::selection {
+  background: none;
+}
+
+.c6:active {
+  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
+}
+
+.c6:hover {
+  border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c6:hover:after {
+  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c6:after,
+.c6:before {
+  position: relative;
+  display: block;
+  content: '';
+  width: 50%;
+  height: 100%;
+}
+
+.c6:after {
+  -webkit-transform: translateX(0%);
+  -ms-transform: translateX(0%);
+  transform: translateX(0%);
+  border-radius: 50%;
+  background: rgb(255,255,255);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
+}
+
+.c6:active {
+  box-shadow: inset 0 0 0 2em rgb(216,216,216);
+}
+
+.c6:before {
+  display: none;
+}
+
+.c9 {
+  width: 9rem;
+  height: 9rem;
+  background: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  padding-top: 0.75rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-bottom: 1.25rem;
+  -webkit-animation: eMLfYp 0.2s ease-in-out;
+  animation: eMLfYp 0.2s ease-in-out;
+}
+
+.c11 {
+  min-width: 100%;
+  width: 9rem;
+}
+
+.c11 select {
+  margin: 0;
+  border-bottom-width: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+@media only screen and (min-width:48em) {
+  .c8 {
+    -webkit-flex-basis: 25%;
+    -ms-flex-preferred-size: 25%;
+    flex-basis: 25%;
+    max-width: 25%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c8 {
+    -webkit-flex-basis: 16.666666666666668%;
+    -ms-flex-preferred-size: 16.666666666666668%;
+    flex-basis: 16.666666666666668%;
+    max-width: 16.666666666666668%;
+    display: block;
+  }
+}
+
 <form
   onSubmit={undefined}
-/>
+>
+  <div
+    className="c0"
+  >
+    <div
+      className="baseline-jVaZNU kXgQxt c1"
+      name="vms"
+      role="group"
+      style={undefined}
+    >
+      <div
+        className="c2"
+      >
+        <label
+          className="c3"
+          htmlFor="bc"
+        >
+          Infrastructure Container 
+        </label>
+        <div
+          className="c4"
+        >
+          <input
+            checked={undefined}
+            className="c5"
+            id="bc"
+            onBlur={null}
+            type="checkbox"
+          />
+          <label
+            className="c6"
+            htmlFor="bc"
+            id="bc"
+            onBlur={null}
+          />
+          <label
+            className="c3"
+            htmlFor="bc"
+            id="bc"
+            onBlur={null}
+          >
+             
+            Hardware Virtual Machine
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c7"
+  >
+    <div
+      className="c8"
+    >
+      <div
+        className="c9"
+        selected={false}
+      >
+        <img
+          alt="stuff"
+          height={36}
+          src="placeholder.svg"
+          style={
+            Object {
+              "marginBottom": 6,
+            }
+          }
+          width={36}
+        />
+        <h4
+          className="c10"
+        >
+          Stuff
+        </h4>
+        <div
+          className="baseline-jVaZNU kXgQxt c1"
+          name="image"
+          role="group"
+          style={undefined}
+        >
+          <div
+            className="c11 c12"
+            disabled={false}
+            onBlur={null}
+          >
+            <select
+              className="c11 c13 c14"
+              disabled={false}
+              id="bd"
+              onBlur={null}
+            >
+              <option
+                selected={true}
+              >
+                Version
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c15"
+  >
+    <button
+      className="c16 c17 c18"
+      disabled={true}
+      href=""
+      type="submit"
+    >
+      Next
+    </button>
+  </div>
+</form>
 `;
 
 exports[`renders <Images isVmSelected /> without throwing 1`] = `
+.c0 {
+  margin-bottom: 2rem;
+}
+
+.c8 {
+  margin-top: 2rem;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c11 {
+  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;
+}
+
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c11 + button {
+  margin-left: 0.375rem;
+}
+
+.c10 {
+  display: inline-block;
+}
+
+.c9 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c9:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c9:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c9[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c9:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c9:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c3 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c1 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c4 {
+  position: relative;
+  vertical-align: text-bottom;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  display: none;
+}
+
+.c5:checked + label {
+  background: #3B46CC;
+  border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c5:checked + label:after {
+  -webkit-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c5:checked + label:active {
+  box-shadow: none;
+}
+
+.c6 {
+  outline: 0;
+  display: block;
+  width: 2.875rem;
+  height: 1.5rem;
+  position: relative;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  background: rgb(250,250,250);
+  border-radius: 1.4375rem;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  border: 0.0625rem solid rgb(216,216,216);
+  margin-right: 0.375rem;
+}
+
+.c6::selection {
+  background: none;
+}
+
+.c6:active {
+  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
+}
+
+.c6:hover {
+  border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c6:hover:after {
+  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c6:after,
+.c6:before {
+  position: relative;
+  display: block;
+  content: '';
+  width: 50%;
+  height: 100%;
+}
+
+.c6:after {
+  -webkit-transform: translateX(0%);
+  -ms-transform: translateX(0%);
+  transform: translateX(0%);
+  border-radius: 50%;
+  background: rgb(255,255,255);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
+}
+
+.c6:active {
+  box-shadow: inset 0 0 0 2em rgb(216,216,216);
+}
+
+.c6:before {
+  display: none;
+}
+
 <form
   onSubmit={undefined}
-/>
+>
+  <div
+    className="c0"
+  >
+    <div
+      className="baseline-jVaZNU kXgQxt c1"
+      name="vms"
+      role="group"
+      style={undefined}
+    >
+      <div
+        className="c2"
+      >
+        <label
+          className="c3"
+          htmlFor="bf"
+        >
+          Infrastructure Container 
+        </label>
+        <div
+          className="c4"
+        >
+          <input
+            checked={undefined}
+            className="c5"
+            id="bf"
+            onBlur={null}
+            type="checkbox"
+          />
+          <label
+            className="c6"
+            htmlFor="bf"
+            id="bf"
+            onBlur={null}
+          />
+          <label
+            className="c3"
+            htmlFor="bf"
+            id="bf"
+            onBlur={null}
+          >
+             
+            Hardware Virtual Machine
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c7"
+  />
+  <div
+    className="c8"
+  >
+    <button
+      className="c9 c10 c11"
+      disabled={true}
+      href=""
+      type="submit"
+    >
+      Next
+    </button>
+  </div>
+</form>
 `;
 
 exports[`renders <Images loading /> without throwing 1`] = `
+.c0 {
+  margin-bottom: 2rem;
+}
+
+.c8 {
+  margin-top: 2rem;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c11 {
+  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;
+}
+
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c11 + button {
+  margin-left: 0.375rem;
+}
+
+.c10 {
+  display: inline-block;
+}
+
+.c9 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c9:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c9:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c9[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c9:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c9:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c3 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c1 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c4 {
+  position: relative;
+  vertical-align: text-bottom;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  display: none;
+}
+
+.c5:checked + label {
+  background: #3B46CC;
+  border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c5:checked + label:after {
+  -webkit-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c5:checked + label:active {
+  box-shadow: none;
+}
+
+.c6 {
+  outline: 0;
+  display: block;
+  width: 2.875rem;
+  height: 1.5rem;
+  position: relative;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  background: rgb(250,250,250);
+  border-radius: 1.4375rem;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  border: 0.0625rem solid rgb(216,216,216);
+  margin-right: 0.375rem;
+}
+
+.c6::selection {
+  background: none;
+}
+
+.c6:active {
+  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
+}
+
+.c6:hover {
+  border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c6:hover:after {
+  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c6:after,
+.c6:before {
+  position: relative;
+  display: block;
+  content: '';
+  width: 50%;
+  height: 100%;
+}
+
+.c6:after {
+  -webkit-transform: translateX(0%);
+  -ms-transform: translateX(0%);
+  transform: translateX(0%);
+  border-radius: 50%;
+  background: rgb(255,255,255);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
+}
+
+.c6:active {
+  box-shadow: inset 0 0 0 2em rgb(216,216,216);
+}
+
+.c6:before {
+  display: none;
+}
+
 <form
   onSubmit={undefined}
-/>
+>
+  <div
+    className="c0"
+  >
+    <div
+      className="baseline-jVaZNU kXgQxt c1"
+      name="vms"
+      role="group"
+      style={undefined}
+    >
+      <div
+        className="c2"
+      >
+        <label
+          className="c3"
+          htmlFor="be"
+        >
+          Infrastructure Container 
+        </label>
+        <div
+          className="c4"
+        >
+          <input
+            checked={undefined}
+            className="c5"
+            id="be"
+            onBlur={null}
+            type="checkbox"
+          />
+          <label
+            className="c6"
+            htmlFor="be"
+            id="be"
+            onBlur={null}
+          />
+          <label
+            className="c3"
+            htmlFor="be"
+            id="be"
+            onBlur={null}
+          >
+             
+            Hardware Virtual Machine
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c7"
+  />
+  <div
+    className="c8"
+  >
+    <button
+      className="c9 c10 c11"
+      disabled={true}
+      href=""
+      type="submit"
+    >
+      Next
+    </button>
+  </div>
+</form>
 `;
 
 exports[`renders <Images pristine={false} /> without throwing 1`] = `
+.c0 {
+  margin-bottom: 2rem;
+}
+
+.c8 {
+  margin-top: 2rem;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c11 {
+  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;
+}
+
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c11 + button {
+  margin-left: 0.375rem;
+}
+
+.c10 {
+  display: inline-block;
+}
+
+.c9 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c9:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c9:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c9[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c9:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c9:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c3 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c1 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c4 {
+  position: relative;
+  vertical-align: text-bottom;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  display: none;
+}
+
+.c5:checked + label {
+  background: #3B46CC;
+  border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c5:checked + label:after {
+  -webkit-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c5:checked + label:active {
+  box-shadow: none;
+}
+
+.c6 {
+  outline: 0;
+  display: block;
+  width: 2.875rem;
+  height: 1.5rem;
+  position: relative;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  background: rgb(250,250,250);
+  border-radius: 1.4375rem;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  border: 0.0625rem solid rgb(216,216,216);
+  margin-right: 0.375rem;
+}
+
+.c6::selection {
+  background: none;
+}
+
+.c6:active {
+  box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
+}
+
+.c6:hover {
+  border: 0.0625rem solid rgb(59,70,204);
+}
+
+.c6:hover:after {
+  box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
+}
+
+.c6:after,
+.c6:before {
+  position: relative;
+  display: block;
+  content: '';
+  width: 50%;
+  height: 100%;
+}
+
+.c6:after {
+  -webkit-transform: translateX(0%);
+  -ms-transform: translateX(0%);
+  transform: translateX(0%);
+  border-radius: 50%;
+  background: rgb(255,255,255);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
+  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
+}
+
+.c6:active {
+  box-shadow: inset 0 0 0 2em rgb(216,216,216);
+}
+
+.c6:before {
+  display: none;
+}
+
 <form
   onSubmit={undefined}
-/>
+>
+  <div
+    className="c0"
+  >
+    <div
+      className="baseline-jVaZNU kXgQxt c1"
+      name="vms"
+      role="group"
+      style={undefined}
+    >
+      <div
+        className="c2"
+      >
+        <label
+          className="c3"
+          htmlFor="bb"
+        >
+          Infrastructure Container 
+        </label>
+        <div
+          className="c4"
+        >
+          <input
+            checked={undefined}
+            className="c5"
+            id="bb"
+            onBlur={null}
+            type="checkbox"
+          />
+          <label
+            className="c6"
+            htmlFor="bb"
+            id="bb"
+            onBlur={null}
+          />
+          <label
+            className="c3"
+            htmlFor="bb"
+            id="bb"
+            onBlur={null}
+          >
+             
+            Hardware Virtual Machine
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c7"
+  />
+  <div
+    className="c8"
+  >
+    <button
+      className="c9 c10 c11"
+      disabled={true}
+      href=""
+      type="submit"
+    >
+      Next
+    </button>
+  </div>
+</form>
 `;
diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap
index 3a92aca6..02bd4a02 100644
--- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap
@@ -1,12 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Name /> without throwing 1`] = `
-<form
-  onSubmit={undefined}
-/>
-`;
-
-exports[`renders <Name expanded /> without throwing 1`] = `
 .c2 {
   margin-bottom: 1rem;
 }
@@ -548,13 +542,57 @@ exports[`renders <Name expanded /> without throwing 1`] = `
 </form>
 `;
 
-exports[`renders <Name name="test" /> without throwing 1`] = `
-.c0 {
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
+exports[`renders <Name expanded /> without throwing 1`] = `
+.c2 {
+  margin-bottom: 1rem;
+}
+
+.c10 {
+  margin-left: 0.25rem;
+}
+
+.c14 {
+  margin-top: 0.5rem;
+  margin-bottom: 2rem;
 }
 
 .c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c5 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+}
+
+.c13 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -567,30 +605,50 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c4::-moz-focus-inner,
-.c4[type='button']::-moz-focus-inner,
-.c4[type='reset']::-moz-focus-inner,
-.c4[type='submit']::-moz-focus-inner {
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c4:-moz-focusring,
-.c4[type='button']:-moz-focusring,
-.c4[type='reset']:-moz-focusring,
-.c4[type='submit']:-moz-focusring {
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c4 + button {
+.c13 + button {
   margin-left: 0.375rem;
 }
 
 .c3 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c12 {
   display: inline-block;
 }
 
-.c2 {
+.c11 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -632,71 +690,287 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  margin-top: 0.5rem;
 }
 
-.c2:focus {
+.c11:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c2:hover {
+.c11:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c2:active,
-.c2:active:hover,
-.c2:active:focus {
+.c11:active,
+.c11:active:hover,
+.c11:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c2[disabled] {
+.c11[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c2:focus {
+.c11:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c2:hover {
+.c11:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c2:active,
-.c2:active:hover,
-.c2:active:focus {
+.c11:active,
+.c11:active:hover,
+.c11:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c1 {
-  color: rgba(73,73,73,1);
-  font-weight: normal;
-  line-height: 1.625rem;
-  font-size: 1.3125rem;
-  margin: 0;
-  font-weight: 600;
+.c11 svg + span {
+  margin-left: 0.75rem;
 }
 
-.c1 + p,
-.c1 + small,
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
-  margin-top: 1.5rem;
+.c11 svg {
+  max-height: 1.125rem;
+}
+
+.c15 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c15:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c15:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c15[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c7 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c9 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
+  margin-left: 0;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c6 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c8 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c8::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:invalid {
+  box-shadow: none;
+}
+
+.c8:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c8:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
 }
 
 <form
@@ -705,25 +979,1191 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   <div
     className="c0"
   >
-    <h3
+    <div
       className="c1"
     >
-      test
-    </h3>
+      <div
+        className="c2"
+      >
+        <p
+          className="c3"
+        >
+          Your instance name will be used to identify this specific instance.
+        </p>
+      </div>
+    </div>
   </div>
-  <button
-    className="c2 c3 c4"
-    href=""
-    onClick={undefined}
-    type="button"
+  <div
+    className="c4"
   >
-    Edit
-  </button>
+    <div
+      className="c5"
+    >
+      <div
+        className="baseline-jVaZNU kXgQxt c6"
+        name="name"
+        role="group"
+        style={undefined}
+      >
+        <label
+          className="c7"
+          htmlFor="Z"
+        >
+          Instance Name
+        </label>
+        <input
+          className="c8"
+          disabled={false}
+          id="Z"
+          onBlur={null}
+          placeholder={undefined}
+        />
+        <label
+          className="c9"
+        />
+      </div>
+    </div>
+    <div
+      className="c5"
+    >
+      <label
+        className="c7"
+        htmlFor=""
+      >
+        ⁣
+      </label>
+      <div
+        className="c10"
+      >
+        <button
+          className="c11 c12 c13"
+          href=""
+          icon={true}
+          onClick={undefined}
+          type="button"
+        >
+          <svg
+            className=""
+            height="17"
+            innerRef={undefined}
+            style={
+              Object {
+                "transform": "rotate(0deg)",
+              }
+            }
+            version="1.1"
+            viewBox="0 0 18.22 18.22"
+            width="17"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+          >
+            <path
+              d="M6.32,1l4.55,5.31L5.56,10.87,1,5.56,6.32,1m0-1a1,1,0,0,0-.65.24L.35,4.8A1,1,0,0,0,.24,6.21L4.8,11.52a1,1,0,0,0,1.41.11l5.31-4.56a1,1,0,0,0,.11-1.4L7.07.35A1,1,0,0,0,6.32,0Zm4.14,8.65,6.76,1.81-1.8,6.76-6.77-1.8,1.81-6.77m0-1a1,1,0,0,0-1,.74l-1.8,6.77a1,1,0,0,0,.7,1.22l6.77,1.81a1.09,1.09,0,0,0,.26,0,1,1,0,0,0,1-.74l1.81-6.77a1,1,0,0,0-.71-1.22l-6.77-1.8a.73.73,0,0,0-.25,0ZM6.86,3.17a1,1,0,1,0-.11,1.41A1,1,0,0,0,6.86,3.17Zm2,2.28A1,1,0,1,0,8.7,6.86,1,1,0,0,0,8.81,5.45Zm-2.28,2a1,1,0,1,0-.11,1.41A1,1,0,0,0,6.53,7.4ZM4.58,5.12a1,1,0,1,0-.11,1.41A1,1,0,0,0,4.58,5.12Zm6.33,5.72a1,1,0,1,0,1.22-.71A1,1,0,0,0,10.91,10.84ZM13,14.51A1,1,0,1,0,15,15,1,1,0,0,0,13,14.51Z"
+              fill="rgba(73, 73, 73, 1)"
+            />
+          </svg>
+          <span>
+            Randomize
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c14"
+  >
+    <button
+      className="c15 c12 c13"
+      disabled={undefined}
+      href=""
+      type="submit"
+    >
+      Next
+    </button>
+  </div>
+</form>
+`;
+
+exports[`renders <Name name="test" /> without throwing 1`] = `
+.c2 {
+  margin-bottom: 1rem;
+}
+
+.c10 {
+  margin-left: 0.25rem;
+}
+
+.c14 {
+  margin-top: 0.5rem;
+  margin-bottom: 2rem;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c5 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+}
+
+.c13 {
+  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;
+}
+
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c13 + button {
+  margin-left: 0.375rem;
+}
+
+.c3 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c12 {
+  display: inline-block;
+}
+
+.c11 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  margin-top: 0.5rem;
+}
+
+.c11:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c11:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c11:active,
+.c11:active:hover,
+.c11:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c11[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c11:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c11:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c11:active,
+.c11:active:hover,
+.c11:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c11 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c11 svg {
+  max-height: 1.125rem;
+}
+
+.c15 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c15:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c15:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c15[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c7 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c9 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
+  margin-left: 0;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c6 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c8 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c8::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:invalid {
+  box-shadow: none;
+}
+
+.c8:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c8:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
+<form
+  onSubmit={undefined}
+>
+  <div
+    className="c0"
+  >
+    <div
+      className="c1"
+    >
+      <div
+        className="c2"
+      >
+        <p
+          className="c3"
+        >
+          Your instance name will be used to identify this specific instance.
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c4"
+  >
+    <div
+      className="c5"
+    >
+      <div
+        className="baseline-jVaZNU kXgQxt c6"
+        name="name"
+        role="group"
+        style={undefined}
+      >
+        <label
+          className="c7"
+          htmlFor="a"
+        >
+          Instance Name
+        </label>
+        <input
+          className="c8"
+          disabled={false}
+          id="a"
+          onBlur={null}
+          placeholder={undefined}
+        />
+        <label
+          className="c9"
+        />
+      </div>
+    </div>
+    <div
+      className="c5"
+    >
+      <label
+        className="c7"
+        htmlFor=""
+      >
+        ⁣
+      </label>
+      <div
+        className="c10"
+      >
+        <button
+          className="c11 c12 c13"
+          href=""
+          icon={true}
+          onClick={undefined}
+          type="button"
+        >
+          <svg
+            className=""
+            height="17"
+            innerRef={undefined}
+            style={
+              Object {
+                "transform": "rotate(0deg)",
+              }
+            }
+            version="1.1"
+            viewBox="0 0 18.22 18.22"
+            width="17"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+          >
+            <path
+              d="M6.32,1l4.55,5.31L5.56,10.87,1,5.56,6.32,1m0-1a1,1,0,0,0-.65.24L.35,4.8A1,1,0,0,0,.24,6.21L4.8,11.52a1,1,0,0,0,1.41.11l5.31-4.56a1,1,0,0,0,.11-1.4L7.07.35A1,1,0,0,0,6.32,0Zm4.14,8.65,6.76,1.81-1.8,6.76-6.77-1.8,1.81-6.77m0-1a1,1,0,0,0-1,.74l-1.8,6.77a1,1,0,0,0,.7,1.22l6.77,1.81a1.09,1.09,0,0,0,.26,0,1,1,0,0,0,1-.74l1.81-6.77a1,1,0,0,0-.71-1.22l-6.77-1.8a.73.73,0,0,0-.25,0ZM6.86,3.17a1,1,0,1,0-.11,1.41A1,1,0,0,0,6.86,3.17Zm2,2.28A1,1,0,1,0,8.7,6.86,1,1,0,0,0,8.81,5.45Zm-2.28,2a1,1,0,1,0-.11,1.41A1,1,0,0,0,6.53,7.4ZM4.58,5.12a1,1,0,1,0-.11,1.41A1,1,0,0,0,4.58,5.12Zm6.33,5.72a1,1,0,1,0,1.22-.71A1,1,0,0,0,10.91,10.84ZM13,14.51A1,1,0,1,0,15,15,1,1,0,0,0,13,14.51Z"
+              fill="rgba(73, 73, 73, 1)"
+            />
+          </svg>
+          <span>
+            Randomize
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c14"
+  >
+    <button
+      className="c15 c12 c13"
+      disabled={undefined}
+      href=""
+      type="submit"
+    >
+      Next
+    </button>
+  </div>
 </form>
 `;
 
 exports[`renders <Name pristine={false} /> without throwing 1`] = `
+.c2 {
+  margin-bottom: 1rem;
+}
+
+.c10 {
+  margin-left: 0.25rem;
+}
+
+.c14 {
+  margin-top: 0.5rem;
+  margin-bottom: 2rem;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c5 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+}
+
+.c13 {
+  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;
+}
+
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c13 + button {
+  margin-left: 0.375rem;
+}
+
+.c3 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c12 {
+  display: inline-block;
+}
+
+.c11 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  margin-top: 0.5rem;
+}
+
+.c11:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c11:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c11:active,
+.c11:active:hover,
+.c11:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c11[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c11:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c11:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c11:active,
+.c11:active:hover,
+.c11:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c11 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c11 svg {
+  max-height: 1.125rem;
+}
+
+.c15 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c15:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c15:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c15[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c7 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c9 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
+  margin-left: 0;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c6 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c8 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c8::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:invalid {
+  box-shadow: none;
+}
+
+.c8:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c8:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <form
   onSubmit={undefined}
-/>
+>
+  <div
+    className="c0"
+  >
+    <div
+      className="c1"
+    >
+      <div
+        className="c2"
+      >
+        <p
+          className="c3"
+        >
+          Your instance name will be used to identify this specific instance.
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c4"
+  >
+    <div
+      className="c5"
+    >
+      <div
+        className="baseline-jVaZNU kXgQxt c6"
+        name="name"
+        role="group"
+        style={undefined}
+      >
+        <label
+          className="c7"
+          htmlFor="bb"
+        >
+          Instance Name
+        </label>
+        <input
+          className="c8"
+          disabled={false}
+          id="bb"
+          onBlur={null}
+          placeholder={undefined}
+        />
+        <label
+          className="c9"
+        />
+      </div>
+    </div>
+    <div
+      className="c5"
+    >
+      <label
+        className="c7"
+        htmlFor=""
+      >
+        ⁣
+      </label>
+      <div
+        className="c10"
+      >
+        <button
+          className="c11 c12 c13"
+          href=""
+          icon={true}
+          onClick={undefined}
+          type="button"
+        >
+          <svg
+            className=""
+            height="17"
+            innerRef={undefined}
+            style={
+              Object {
+                "transform": "rotate(0deg)",
+              }
+            }
+            version="1.1"
+            viewBox="0 0 18.22 18.22"
+            width="17"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+          >
+            <path
+              d="M6.32,1l4.55,5.31L5.56,10.87,1,5.56,6.32,1m0-1a1,1,0,0,0-.65.24L.35,4.8A1,1,0,0,0,.24,6.21L4.8,11.52a1,1,0,0,0,1.41.11l5.31-4.56a1,1,0,0,0,.11-1.4L7.07.35A1,1,0,0,0,6.32,0Zm4.14,8.65,6.76,1.81-1.8,6.76-6.77-1.8,1.81-6.77m0-1a1,1,0,0,0-1,.74l-1.8,6.77a1,1,0,0,0,.7,1.22l6.77,1.81a1.09,1.09,0,0,0,.26,0,1,1,0,0,0,1-.74l1.81-6.77a1,1,0,0,0-.71-1.22l-6.77-1.8a.73.73,0,0,0-.25,0ZM6.86,3.17a1,1,0,1,0-.11,1.41A1,1,0,0,0,6.86,3.17Zm2,2.28A1,1,0,1,0,8.7,6.86,1,1,0,0,0,8.81,5.45Zm-2.28,2a1,1,0,1,0-.11,1.41A1,1,0,0,0,6.53,7.4ZM4.58,5.12a1,1,0,1,0-.11,1.41A1,1,0,0,0,4.58,5.12Zm6.33,5.72a1,1,0,1,0,1.22-.71A1,1,0,0,0,10.91,10.84ZM13,14.51A1,1,0,1,0,15,15,1,1,0,0,0,13,14.51Z"
+              fill="rgba(73, 73, 73, 1)"
+            />
+          </svg>
+          <span>
+            Randomize
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c14"
+  >
+    <button
+      className="c15 c12 c13"
+      disabled={false}
+      href=""
+      type="submit"
+    >
+      Next
+    </button>
+  </div>
+</form>
 `;
diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap
index e4f37b92..187a4d19 100644
--- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap
@@ -1,14 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Title /> without throwing 1`] = `
-Array [
-  .c3 {
+.c3 {
   font-size: 80%;
   color: rgba(73,73,73,1);
   line-height: 1.125rem;
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -62,75 +86,77 @@ Array [
   margin-right: 0.25rem;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        />
-    </div>
-    <small
-        className="c3"
-    />
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
+.c5 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+  className=""
 >
+  <div
+    className="c0"
+  >
     <div
-        className="c2 c3"
-        height="0.0625rem"
+      className="c1"
+    >
+      <div
+        className="c2"
+      />
+    </div>
+    <small
+      className="c3"
     />
-</div>,
-]
+  </div>
+  <div
+    className="c4 c5"
+  >
+    <div
+      className="c6 c7"
+      height="0.0625rem"
+    />
+  </div>
+</div>
 `;
 
 exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
-Array [
-  .c3 {
+.c3 {
   font-size: 80%;
   color: rgba(73,73,73,1);
   line-height: 1.125rem;
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -184,96 +210,98 @@ Array [
   margin-right: 0.25rem;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="17"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 16.24 13.55"
-                width="17"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <path
-                    d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
-                    fill="rgba(73, 73, 73, 1)"
-                />
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    />
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
+.c5 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+  className=""
 >
+  <div
+    className="c0"
+  >
     <div
-        className="c2 c3"
-        height="0.0625rem"
+      className="c1"
+    >
+      <div
+        className="c2"
+      >
+        <svg
+          className=""
+          height="17"
+          innerRef={undefined}
+          style={
+            Object {
+              "transform": "rotate(0deg)",
+            }
+          }
+          version="1.1"
+          viewBox="0 0 16.24 13.55"
+          width="17"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+        >
+          <path
+            d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
+            fill="rgba(73, 73, 73, 1)"
+          />
+        </svg>
+      </div>
+    </div>
+    <small
+      className="c3"
     />
-</div>,
-]
+  </div>
+  <div
+    className="c4 c5"
+  >
+    <div
+      className="c6 c7"
+      height="0.0625rem"
+    />
+  </div>
+</div>
 `;
 
 exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = `
-Array [
-  .c3 {
+.c3 {
   font-size: 80%;
   color: rgba(73,73,73,1);
   line-height: 1.125rem;
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -327,96 +355,99 @@ Array [
   margin-right: 0.25rem;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="17"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 16.24 13.55"
-                width="17"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <path
-                    d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
-                    fill="rgba(73, 73, 73, 1)"
-                />
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    />
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
+.c5 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+  className=""
+  label="Instance name"
 >
+  <div
+    className="c0"
+  >
     <div
-        className="c2 c3"
-        height="0.0625rem"
+      className="c1"
+    >
+      <div
+        className="c2"
+      >
+        <svg
+          className=""
+          height="17"
+          innerRef={undefined}
+          style={
+            Object {
+              "transform": "rotate(0deg)",
+            }
+          }
+          version="1.1"
+          viewBox="0 0 16.24 13.55"
+          width="17"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+        >
+          <path
+            d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
+            fill="rgba(73, 73, 73, 1)"
+          />
+        </svg>
+      </div>
+    </div>
+    <small
+      className="c3"
     />
-</div>,
-]
+  </div>
+  <div
+    className="c4 c5"
+  >
+    <div
+      className="c6 c7"
+      height="0.0625rem"
+    />
+  </div>
+</div>
 `;
 
 exports[`renders <Title label="Test"/> without throwing 1`] = `
-Array [
-  .c3 {
+.c3 {
   font-size: 80%;
   color: rgba(73,73,73,1);
   line-height: 1.125rem;
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -470,62 +501,41 @@ Array [
   margin-right: 0.25rem;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        />
-    </div>
-    <small
-        className="c3"
-    />
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
+.c5 {
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
 
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+  className=""
+  label="Test"
 >
+  <div
+    className="c0"
+  >
     <div
-        className="c2 c3"
-        height="0.0625rem"
+      className="c1"
+    >
+      <div
+        className="c2"
+      />
+    </div>
+    <small
+      className="c3"
     />
-</div>,
-]
+  </div>
+  <div
+    className="c4 c5"
+  >
+    <div
+      className="c6 c7"
+      height="0.0625rem"
+    />
+  </div>
+</div>
 `;
diff --git a/packages/my-joy-beta/src/components/create-instance/image.js b/packages/my-joy-beta/src/components/create-instance/image.js
index 7a55fd92..a18c49e2 100644
--- a/packages/my-joy-beta/src/components/create-instance/image.js
+++ b/packages/my-joy-beta/src/components/create-instance/image.js
@@ -16,10 +16,8 @@ import {
   Button,
   Toggle,
   H4,
-  Select,
-  StatusLoader
+  Select
 } from 'joyent-ui-toolkit';
-import Description from '@components/create-instance/description';
 
 const fadeIn = keyframes`
   from {
@@ -88,7 +86,7 @@ const getImageByID = (id, images) => {
   const image = images
     .map(image => ({
       ...image,
-      versions: image.versions.filter(version => version.id === id)
+      versions: (image.versions || []).filter(version => version.id === id)
     }))
     .filter(e => e.versions.length)[0];
   return image
@@ -100,105 +98,77 @@ const getImageByID = (id, images) => {
     : {};
 };
 
+export const Preview = ({ imageID, images, isVmSelected, onEdit }) => (
+  <Fragment>
+    <Margin bottom={2} top={3}>
+      <H3 bold>
+        {titleCase(getImageByID(imageID, images).name)} -{' '}
+        {getImageByID(imageID, images).version}
+      </H3>
+      <P>
+        {isVmSelected ? 'Hardware Virtual Machine' : 'Infrastructure Container'}{' '}
+      </P>
+    </Margin>
+    <Button type="button" secondary onClick={onEdit}>
+      Edit
+    </Button>
+  </Fragment>
+);
+
 export default ({
   handleSubmit,
   pristine,
-  expanded,
   imageID,
-  onCancel,
-  loading,
-  images,
+  images = [],
   isVmSelected
 }) => (
   <form onSubmit={handleSubmit}>
-    {expanded && (
-      <Fragment>
-        <Description>
-          Hardware virtual machines are generally used for non-containerized
-          applications. Infrastructure containers are generally for running any
-          Linux image on secure, bare metal containers.{' '}
-          <a
-            href="https://docs.joyent.com/private-cloud/images"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            Read the docs
-          </a>
-        </Description>
-        {loading ? (
-          <StatusLoader />
-        ) : (
-          <Fragment>
-            <Margin bottom={4}>
-              <FormGroup name="vms" field={Field}>
-                <Flex alignCenter>
-                  <FormLabel>Infrastructure Container </FormLabel>
-                  <Toggle onBlur={null}>Hardware Virtual Machine</Toggle>
-                </Flex>
+    <Margin bottom={4}>
+      <FormGroup name="vms" field={Field}>
+        <Flex alignCenter>
+          <FormLabel>Infrastructure Container </FormLabel>
+          <Toggle onBlur={null}>Hardware Virtual Machine</Toggle>
+        </Flex>
+      </FormGroup>
+    </Margin>
+    <Row>
+      {images &&
+        images.filter(i => i.isVm === isVmSelected).map(image => (
+          <Col md={2} sm={3}>
+            <Card
+              selected={
+                image.imageName === getImageByID(imageID, images).imageName
+              }
+            >
+              <img
+                src={getImage(image.imageName).url}
+                width={getImage(image.imageName).size}
+                height={getImage(image.imageName).size}
+                style={{
+                  marginBottom: getImage(image.imageName).bottom
+                }}
+                alt={image.imageName}
+              />
+              <H4>{titleCase(image.imageName)}</H4>
+              <FormGroup name="image" field={Field}>
+                <Version onBlur={null}>
+                  <option selected>Version</option>
+                  {image.versions && image.versions.map(version => (
+                    <option
+                      key={`${version.name} - ${version.version}`}
+                      value={version.id}
+                    >{`${version.name} - ${version.version}`}</option>
+                  ))}
+                </Version>
               </FormGroup>
-            </Margin>
-            <Row>
-              {images &&
-                images.filter(i => i.isVm === isVmSelected).map(image => (
-                  <Col md={2} sm={3}>
-                    <Card
-                      selected={
-                        image.imageName ===
-                        getImageByID(imageID, images).imageName
-                      }
-                    >
-                      <img
-                        src={getImage(image.imageName).url}
-                        width={getImage(image.imageName).size}
-                        height={getImage(image.imageName).size}
-                        style={{
-                          marginBottom: getImage(image.imageName).bottom
-                        }}
-                        alt={image.imageName}
-                      />
-                      <H4>{titleCase(image.imageName)}</H4>
-                      <FormGroup name="image" field={Field}>
-                        <Version onBlur={null}>
-                          <option selected>Version</option>
-                          {image.versions.map(version => (
-                            <option
-                              key={`${version.name} - ${version.version}`}
-                              value={version.id}
-                            >{`${version.name} - ${version.version}`}</option>
-                          ))}
-                        </Version>
-                      </FormGroup>
-                    </Card>
-                  </Col>
-                ))}
-            </Row>
-            <Margin top={4}>
-              <Button type="submit" disabled={pristine || !imageID}>
-                Next
-              </Button>
-            </Margin>
-          </Fragment>
-        )}
-      </Fragment>
-    )}
-    {!expanded &&
-      imageID && (
-        <Fragment>
-          <Margin bottom={2} top={3}>
-            <H3 bold>
-              {titleCase(getImageByID(imageID, images).name)} -{' '}
-              {getImageByID(imageID, images).version}
-            </H3>
-            <P>
-              {isVmSelected
-                ? 'Hardware Virtual Machine'
-                : 'Infrastructure Container'}{' '}
-            </P>
-          </Margin>
-          <Button type="button" secondary onClick={onCancel}>
-            Edit
-          </Button>
-        </Fragment>
-      )}
+            </Card>
+          </Col>
+        ))}
+    </Row>
+    <Margin top={4}>
+      <Button type="submit" disabled={pristine || !imageID}>
+        Next
+      </Button>
+    </Margin>
   </form>
 );
diff --git a/packages/my-joy-beta/src/components/create-instance/name.js b/packages/my-joy-beta/src/components/create-instance/name.js
index cd7f8057..51c8ded9 100644
--- a/packages/my-joy-beta/src/components/create-instance/name.js
+++ b/packages/my-joy-beta/src/components/create-instance/name.js
@@ -1,11 +1,10 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Field } from 'redux-form';
 import { Margin } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import remcalc from 'remcalc';
 
 import {
-  H3,
   FormGroup,
   FormLabel,
   Input,
@@ -20,64 +19,44 @@ export default ({
   handleSubmit,
   pristine,
   asyncValidating,
-  expanded,
-  name,
   placeholderName,
   randomizing,
-  onCancel,
   onRandomize
 }) => (
   <form onSubmit={handleSubmit}>
-    {expanded ? (
-      <Fragment>
-        <Description>
-          Your instance name will be used to identify this specific instance.
-        </Description>
-        <Flex>
-          <FlexItem>
-            <FormGroup name="name" fluid field={Field}>
-              <FormLabel>Instance Name</FormLabel>
-              <Input placeholder={placeholderName} onBlur={null} />
-              <FormMeta marginless />
-            </FormGroup>
-          </FlexItem>
-          <FlexItem>
-            <FormLabel>&#8291;</FormLabel>
-            <Margin left={1}>
-              <Button
-                type="button"
-                marginTop={remcalc(8)}
-                onClick={onRandomize}
-                loading={randomizing}
-                marginless
-                secondary
-                icon
-              >
-                <RandomizeIcon />
-                <span>Randomize</span>
-              </Button>
-            </Margin>
-          </FlexItem>
-        </Flex>
-        <Margin top={2} bottom={4}>
-          <Button type="submit" disabled={pristine} loading={asyncValidating}>
-            Next
+    <Description>
+      Your instance name will be used to identify this specific instance.
+    </Description>
+    <Flex>
+      <FlexItem>
+        <FormGroup name="name" fluid field={Field}>
+          <FormLabel>Instance Name</FormLabel>
+          <Input placeholder={placeholderName} onBlur={null} />
+          <FormMeta marginless />
+        </FormGroup>
+      </FlexItem>
+      <FlexItem>
+        <FormLabel>&#8291;</FormLabel>
+        <Margin left={1}>
+          <Button
+            type="button"
+            marginTop={remcalc(8)}
+            onClick={onRandomize}
+            loading={randomizing}
+            marginless
+            secondary
+            icon
+          >
+            <RandomizeIcon />
+            <span>Randomize</span>
           </Button>
         </Margin>
-      </Fragment>
-    ) : (
-      <Fragment>
-        {name ? (
-          <Fragment>
-            <Margin bottom={2} top={3}>
-              <H3 bold>{name}</H3>
-            </Margin>
-            <Button type="button" secondary onClick={onCancel}>
-              Edit
-            </Button>
-          </Fragment>
-        ) : null}
-      </Fragment>
-    )}
+      </FlexItem>
+    </Flex>
+    <Margin top={2} bottom={4}>
+      <Button type="submit" disabled={pristine} loading={asyncValidating}>
+        Next
+      </Button>
+    </Margin>
   </form>
 );
diff --git a/packages/my-joy-beta/src/components/create-instance/title.js b/packages/my-joy-beta/src/components/create-instance/title.js
index cfd5bf45..f1af6fa6 100644
--- a/packages/my-joy-beta/src/components/create-instance/title.js
+++ b/packages/my-joy-beta/src/components/create-instance/title.js
@@ -1,8 +1,9 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import Flex from 'styled-flex-component';
 import { Margin } from 'styled-components-spacing';
 import remcalc from 'remcalc';
 import styled from 'styled-components';
+import is from 'styled-is';
 
 import { Divider, Small } from 'joyent-ui-toolkit';
 
@@ -13,8 +14,14 @@ const IsEmpty = styled(Margin)`
   }
 `;
 
-export default ({ icon, children }) => (
-  <Fragment>
+const Container = styled.div`
+  ${is('onClick')`
+    cursor: pointer;
+  `};
+`;
+
+export default ({ icon, children, ...rest }) => (
+  <Container {...rest}>
     <Flex>
       <Margin right={1}>
         <Flex alignCenter full>
@@ -26,5 +33,5 @@ export default ({ icon, children }) => (
     <IsEmpty top={1} bottom={3}>
       <Divider height={remcalc(1)} />
     </IsEmpty>
-  </Fragment>
+  </Container>
 );
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
index 6fb985fd..920ee816 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
@@ -9,10 +9,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -62,126 +92,101 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="11"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 18 11"
-                width="18"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1884 1236)"
-                >
-                    <g>
-                        <g>
-                            <g>
-                                <use
-                                    fill="rgba(73, 73, 73, 1)"
-                                    transform="translate(1884 -1233.9)"
-                                    xlinkHref="#F"
-                                />
-                            </g>
-                        </g>
-                        <g>
-                            <g>
-                                <use
-                                    fill="rgba(73, 73, 73, 1)"
-                                    transform="translate(1896 -1233.9)"
-                                    xlinkHref="#G"
-                                />
-                            </g>
-                        </g>
-                        <g>
-                            <use
-                                fill="rgba(73, 73, 73, 1)"
-                                transform="translate(1891 -1236)"
-                                xlinkHref="#H"
-                            />
-                        </g>
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
-                        id="F"
-                    />
-                    <path
-                        d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
-                        id="G"
-                    />
-                    <path
-                        d="M 1 11L 0 11L 3 0L 4 0L 1 11Z"
-                        id="H"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Metadata
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={undefined}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="11"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 18 11"
+                    width="18"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1884 1236)"
+                    >
+                        <g>
+                            <g>
+                                <g>
+                                    <use
+                                        fill="rgba(73, 73, 73, 1)"
+                                        transform="translate(1884 -1233.9)"
+                                        xlinkHref="#F"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <g>
+                                    <use
+                                        fill="rgba(73, 73, 73, 1)"
+                                        transform="translate(1896 -1233.9)"
+                                        xlinkHref="#G"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <use
+                                    fill="rgba(73, 73, 73, 1)"
+                                    transform="translate(1891 -1236)"
+                                    xlinkHref="#H"
+                                />
+                            </g>
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
+                            id="F"
+                        />
+                        <path
+                            d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
+                            id="G"
+                        />
+                        <path
+                            d="M 1 11L 0 11L 3 0L 4 0L 1 11Z"
+                            id="H"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Metadata
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   <div />,
 ]
@@ -196,10 +201,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -249,126 +284,101 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="11"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 18 11"
-                width="18"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1884 1236)"
-                >
-                    <g>
-                        <g>
-                            <g>
-                                <use
-                                    fill="rgba(73, 73, 73, 1)"
-                                    transform="translate(1884 -1233.9)"
-                                    xlinkHref="#F"
-                                />
-                            </g>
-                        </g>
-                        <g>
-                            <g>
-                                <use
-                                    fill="rgba(73, 73, 73, 1)"
-                                    transform="translate(1896 -1233.9)"
-                                    xlinkHref="#G"
-                                />
-                            </g>
-                        </g>
-                        <g>
-                            <use
-                                fill="rgba(73, 73, 73, 1)"
-                                transform="translate(1891 -1236)"
-                                xlinkHref="#H"
-                            />
-                        </g>
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
-                        id="F"
-                    />
-                    <path
-                        d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
-                        id="G"
-                    />
-                    <path
-                        d="M 1 11L 0 11L 3 0L 4 0L 1 11Z"
-                        id="H"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Metadata
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={false}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="11"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 18 11"
+                    width="18"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1884 1236)"
+                    >
+                        <g>
+                            <g>
+                                <g>
+                                    <use
+                                        fill="rgba(73, 73, 73, 1)"
+                                        transform="translate(1884 -1233.9)"
+                                        xlinkHref="#F"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <g>
+                                    <use
+                                        fill="rgba(73, 73, 73, 1)"
+                                        transform="translate(1896 -1233.9)"
+                                        xlinkHref="#G"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <use
+                                    fill="rgba(73, 73, 73, 1)"
+                                    transform="translate(1891 -1236)"
+                                    xlinkHref="#H"
+                                />
+                            </g>
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
+                            id="F"
+                        />
+                        <path
+                            d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
+                            id="G"
+                        />
+                        <path
+                            d="M 1 11L 0 11L 3 0L 4 0L 1 11Z"
+                            id="H"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Metadata
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);
@@ -1713,10 +1723,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1766,126 +1806,101 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="11"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 18 11"
-                width="18"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1884 1236)"
-                >
-                    <g>
-                        <g>
-                            <g>
-                                <use
-                                    fill="rgba(73, 73, 73, 1)"
-                                    transform="translate(1884 -1233.9)"
-                                    xlinkHref="#F"
-                                />
-                            </g>
-                        </g>
-                        <g>
-                            <g>
-                                <use
-                                    fill="rgba(73, 73, 73, 1)"
-                                    transform="translate(1896 -1233.9)"
-                                    xlinkHref="#G"
-                                />
-                            </g>
-                        </g>
-                        <g>
-                            <use
-                                fill="rgba(73, 73, 73, 1)"
-                                transform="translate(1891 -1236)"
-                                xlinkHref="#H"
-                            />
-                        </g>
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
-                        id="F"
-                    />
-                    <path
-                        d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
-                        id="G"
-                    />
-                    <path
-                        d="M 1 11L 0 11L 3 0L 4 0L 1 11Z"
-                        id="H"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Metadata
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={false}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="11"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 18 11"
+                    width="18"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1884 1236)"
+                    >
+                        <g>
+                            <g>
+                                <g>
+                                    <use
+                                        fill="rgba(73, 73, 73, 1)"
+                                        transform="translate(1884 -1233.9)"
+                                        xlinkHref="#F"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <g>
+                                    <use
+                                        fill="rgba(73, 73, 73, 1)"
+                                        transform="translate(1896 -1233.9)"
+                                        xlinkHref="#G"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <use
+                                    fill="rgba(73, 73, 73, 1)"
+                                    transform="translate(1891 -1236)"
+                                    xlinkHref="#H"
+                                />
+                            </g>
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
+                            id="F"
+                        />
+                        <path
+                            d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
+                            id="G"
+                        />
+                        <path
+                            d="M 1 11L 0 11L 3 0L 4 0L 1 11Z"
+                            id="H"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Metadata
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);
@@ -2210,10 +2225,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2263,126 +2308,101 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="11"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 18 11"
-                width="18"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1884 1236)"
-                >
-                    <g>
-                        <g>
-                            <g>
-                                <use
-                                    fill="rgba(73, 73, 73, 1)"
-                                    transform="translate(1884 -1233.9)"
-                                    xlinkHref="#F"
-                                />
-                            </g>
-                        </g>
-                        <g>
-                            <g>
-                                <use
-                                    fill="rgba(73, 73, 73, 1)"
-                                    transform="translate(1896 -1233.9)"
-                                    xlinkHref="#G"
-                                />
-                            </g>
-                        </g>
-                        <g>
-                            <use
-                                fill="rgba(73, 73, 73, 1)"
-                                transform="translate(1891 -1236)"
-                                xlinkHref="#H"
-                            />
-                        </g>
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
-                        id="F"
-                    />
-                    <path
-                        d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
-                        id="G"
-                    />
-                    <path
-                        d="M 1 11L 0 11L 3 0L 4 0L 1 11Z"
-                        id="H"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Metadata
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={undefined}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="11"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 18 11"
+                    width="18"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1884 1236)"
+                    >
+                        <g>
+                            <g>
+                                <g>
+                                    <use
+                                        fill="rgba(73, 73, 73, 1)"
+                                        transform="translate(1884 -1233.9)"
+                                        xlinkHref="#F"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <g>
+                                    <use
+                                        fill="rgba(73, 73, 73, 1)"
+                                        transform="translate(1896 -1233.9)"
+                                        xlinkHref="#G"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <use
+                                    fill="rgba(73, 73, 73, 1)"
+                                    transform="translate(1891 -1236)"
+                                    xlinkHref="#H"
+                                />
+                            </g>
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
+                            id="F"
+                        />
+                        <path
+                            d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
+                            id="G"
+                        />
+                        <path
+                            d="M 1 11L 0 11L 3 0L 4 0L 1 11Z"
+                            id="H"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Metadata
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   .c21 {
   font-family: sans-serif;
@@ -4473,10 +4493,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4526,126 +4576,101 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="11"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 18 11"
-                width="18"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1884 1236)"
-                >
-                    <g>
-                        <g>
-                            <g>
-                                <use
-                                    fill="rgba(73, 73, 73, 1)"
-                                    transform="translate(1884 -1233.9)"
-                                    xlinkHref="#F"
-                                />
-                            </g>
-                        </g>
-                        <g>
-                            <g>
-                                <use
-                                    fill="rgba(73, 73, 73, 1)"
-                                    transform="translate(1896 -1233.9)"
-                                    xlinkHref="#G"
-                                />
-                            </g>
-                        </g>
-                        <g>
-                            <use
-                                fill="rgba(73, 73, 73, 1)"
-                                transform="translate(1891 -1236)"
-                                xlinkHref="#H"
-                            />
-                        </g>
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
-                        id="F"
-                    />
-                    <path
-                        d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
-                        id="G"
-                    />
-                    <path
-                        d="M 1 11L 0 11L 3 0L 4 0L 1 11Z"
-                        id="H"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Metadata
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={false}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="11"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 18 11"
+                    width="18"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1884 1236)"
+                    >
+                        <g>
+                            <g>
+                                <g>
+                                    <use
+                                        fill="rgba(73, 73, 73, 1)"
+                                        transform="translate(1884 -1233.9)"
+                                        xlinkHref="#F"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <g>
+                                    <use
+                                        fill="rgba(73, 73, 73, 1)"
+                                        transform="translate(1896 -1233.9)"
+                                        xlinkHref="#G"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <use
+                                    fill="rgba(73, 73, 73, 1)"
+                                    transform="translate(1891 -1236)"
+                                    xlinkHref="#H"
+                                />
+                            </g>
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
+                            id="F"
+                        />
+                        <path
+                            d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
+                            id="G"
+                        />
+                        <path
+                            d="M 1 11L 0 11L 3 0L 4 0L 1 11Z"
+                            id="H"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Metadata
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
index 2ce48778..aeaa935d 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
@@ -9,10 +9,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -62,98 +92,73 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="18"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 18 18"
-                width="18"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1105 710)"
-                >
-                    <g>
-                        <use
-                            fill="rgba(73, 73, 73, 1)"
-                            transform="translate(1105 -710)"
-                            xlinkHref="#I"
-                        />
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
-                        id="I"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Networks
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={undefined}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="18"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 18 18"
+                    width="18"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1105 710)"
+                    >
+                        <g>
+                            <use
+                                fill="rgba(73, 73, 73, 1)"
+                                transform="translate(1105 -710)"
+                                xlinkHref="#I"
+                            />
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
+                            id="I"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Networks
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   <form />,
   .c0 {
@@ -175,10 +180,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -228,98 +263,73 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="18"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 18 18"
-                width="18"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1105 710)"
-                >
-                    <g>
-                        <use
-                            fill="rgba(73, 73, 73, 1)"
-                            transform="translate(1105 -710)"
-                            xlinkHref="#I"
-                        />
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
-                        id="I"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Networks
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={undefined}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="18"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 18 18"
+                    width="18"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1105 710)"
+                    >
+                        <g>
+                            <use
+                                fill="rgba(73, 73, 73, 1)"
+                                transform="translate(1105 -710)"
+                                xlinkHref="#I"
+                            />
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
+                            id="I"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Networks
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   .c0 {
   margin-bottom: 2rem;
@@ -340,10 +350,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -393,98 +433,73 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="18"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 18 18"
-                width="18"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1105 710)"
-                >
-                    <g>
-                        <use
-                            fill="rgba(73, 73, 73, 1)"
-                            transform="translate(1105 -710)"
-                            xlinkHref="#I"
-                        />
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
-                        id="I"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Networks
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={false}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="18"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 18 18"
+                    width="18"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1105 710)"
+                    >
+                        <g>
+                            <use
+                                fill="rgba(73, 73, 73, 1)"
+                                transform="translate(1105 -710)"
+                                xlinkHref="#I"
+                            />
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
+                            id="I"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Networks
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);
@@ -852,10 +867,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -905,98 +950,73 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="18"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 18 18"
-                width="18"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1105 710)"
-                >
-                    <g>
-                        <use
-                            fill="rgba(73, 73, 73, 1)"
-                            transform="translate(1105 -710)"
-                            xlinkHref="#I"
-                        />
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
-                        id="I"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Networks
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={undefined}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="18"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 18 18"
+                    width="18"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1105 710)"
+                    >
+                        <g>
+                            <use
+                                fill="rgba(73, 73, 73, 1)"
+                                transform="translate(1105 -710)"
+                                xlinkHref="#I"
+                            />
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
+                            id="I"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Networks
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   .c7 {
   color: rgba(73,73,73,1);
@@ -1353,10 +1373,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1406,98 +1456,73 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="18"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 18 18"
-                width="18"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1105 710)"
-                >
-                    <g>
-                        <use
-                            fill="rgba(73, 73, 73, 1)"
-                            transform="translate(1105 -710)"
-                            xlinkHref="#I"
-                        />
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
-                        id="I"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Networks
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={false}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="18"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 18 18"
+                    width="18"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1105 710)"
+                    >
+                        <g>
+                            <use
+                                fill="rgba(73, 73, 73, 1)"
+                                transform="translate(1105 -710)"
+                                xlinkHref="#I"
+                            />
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
+                            id="I"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Networks
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);
@@ -3012,10 +3037,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -3065,98 +3120,73 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="18"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 18 18"
-                width="18"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1105 710)"
-                >
-                    <g>
-                        <use
-                            fill="rgba(73, 73, 73, 1)"
-                            transform="translate(1105 -710)"
-                            xlinkHref="#I"
-                        />
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
-                        id="I"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Networks
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={false}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="18"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 18 18"
+                    width="18"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1105 710)"
+                    >
+                        <g>
+                            <use
+                                fill="rgba(73, 73, 73, 1)"
+                                transform="translate(1105 -710)"
+                                xlinkHref="#I"
+                            />
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
+                            id="I"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Networks
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   .c0 {
   color: rgba(73,73,73,1);
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap
index bcec2d3b..1500ec3d 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap
@@ -9,10 +9,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -62,113 +92,88 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="17"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 17 17"
-                width="17"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1885 974)"
-                >
-                    <g>
-                        <g>
-                            <g>
-                                <use
-                                    fill="rgba(73, 73, 73, 1)"
-                                    transform="translate(1885 -974)"
-                                    xlinkHref="#R"
-                                />
-                            </g>
-                        </g>
-                        <g>
-                            <use
-                                fill="rgba(73, 73, 73, 1)"
-                                transform="translate(1888 -971)"
-                                xlinkHref="#S"
-                            />
-                        </g>
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
-                        id="R"
-                    />
-                    <path
-                        d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
-                        id="S"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Tags
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={undefined}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="17"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 17 17"
+                    width="17"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1885 974)"
+                    >
+                        <g>
+                            <g>
+                                <g>
+                                    <use
+                                        fill="rgba(73, 73, 73, 1)"
+                                        transform="translate(1885 -974)"
+                                        xlinkHref="#R"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <use
+                                    fill="rgba(73, 73, 73, 1)"
+                                    transform="translate(1888 -971)"
+                                    xlinkHref="#S"
+                                />
+                            </g>
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
+                            id="R"
+                        />
+                        <path
+                            d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
+                            id="S"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Tags
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   <div />,
 ]
@@ -183,10 +188,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -236,113 +271,88 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="17"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 17 17"
-                width="17"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1885 974)"
-                >
-                    <g>
-                        <g>
-                            <g>
-                                <use
-                                    fill="rgba(73, 73, 73, 1)"
-                                    transform="translate(1885 -974)"
-                                    xlinkHref="#R"
-                                />
-                            </g>
-                        </g>
-                        <g>
-                            <use
-                                fill="rgba(73, 73, 73, 1)"
-                                transform="translate(1888 -971)"
-                                xlinkHref="#S"
-                            />
-                        </g>
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
-                        id="R"
-                    />
-                    <path
-                        d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
-                        id="S"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Tags
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={false}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="17"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 17 17"
+                    width="17"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1885 974)"
+                    >
+                        <g>
+                            <g>
+                                <g>
+                                    <use
+                                        fill="rgba(73, 73, 73, 1)"
+                                        transform="translate(1885 -974)"
+                                        xlinkHref="#R"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <use
+                                    fill="rgba(73, 73, 73, 1)"
+                                    transform="translate(1888 -971)"
+                                    xlinkHref="#S"
+                                />
+                            </g>
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
+                            id="R"
+                        />
+                        <path
+                            d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
+                            id="S"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Tags
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);
@@ -1684,10 +1694,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1737,113 +1777,88 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="17"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 17 17"
-                width="17"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1885 974)"
-                >
-                    <g>
-                        <g>
-                            <g>
-                                <use
-                                    fill="rgba(73, 73, 73, 1)"
-                                    transform="translate(1885 -974)"
-                                    xlinkHref="#R"
-                                />
-                            </g>
-                        </g>
-                        <g>
-                            <use
-                                fill="rgba(73, 73, 73, 1)"
-                                transform="translate(1888 -971)"
-                                xlinkHref="#S"
-                            />
-                        </g>
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
-                        id="R"
-                    />
-                    <path
-                        d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
-                        id="S"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Tags
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={false}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="17"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 17 17"
+                    width="17"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1885 974)"
+                    >
+                        <g>
+                            <g>
+                                <g>
+                                    <use
+                                        fill="rgba(73, 73, 73, 1)"
+                                        transform="translate(1885 -974)"
+                                        xlinkHref="#R"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <use
+                                    fill="rgba(73, 73, 73, 1)"
+                                    transform="translate(1888 -971)"
+                                    xlinkHref="#S"
+                                />
+                            </g>
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
+                            id="R"
+                        />
+                        <path
+                            d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
+                            id="S"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Tags
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);
@@ -2192,10 +2207,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2245,113 +2290,88 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="17"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 17 17"
-                width="17"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1885 974)"
-                >
-                    <g>
-                        <g>
-                            <g>
-                                <use
-                                    fill="rgba(73, 73, 73, 1)"
-                                    transform="translate(1885 -974)"
-                                    xlinkHref="#R"
-                                />
-                            </g>
-                        </g>
-                        <g>
-                            <use
-                                fill="rgba(73, 73, 73, 1)"
-                                transform="translate(1888 -971)"
-                                xlinkHref="#S"
-                            />
-                        </g>
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
-                        id="R"
-                    />
-                    <path
-                        d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
-                        id="S"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Tags
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={undefined}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="17"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 17 17"
+                    width="17"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1885 974)"
+                    >
+                        <g>
+                            <g>
+                                <g>
+                                    <use
+                                        fill="rgba(73, 73, 73, 1)"
+                                        transform="translate(1885 -974)"
+                                        xlinkHref="#R"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <use
+                                    fill="rgba(73, 73, 73, 1)"
+                                    transform="translate(1888 -971)"
+                                    xlinkHref="#S"
+                                />
+                            </g>
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
+                            id="R"
+                        />
+                        <path
+                            d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
+                            id="S"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Tags
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   <div />,
 ]
@@ -2366,10 +2386,40 @@ Array [
   font-size: 0.8125rem;
 }
 
+.c7 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
 
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2419,113 +2469,88 @@ Array [
   flex-basis: 100%;
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <svg
-                className=""
-                height="17"
-                innerRef={undefined}
-                style={
-                    Object {
-                        "transform": "rotate(0deg)",
-                      }
-                }
-                version="1.1"
-                viewBox="0 0 17 17"
-                width="17"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-            >
-                <g
-                    transform="translate(-1885 974)"
-                >
-                    <g>
-                        <g>
-                            <g>
-                                <use
-                                    fill="rgba(73, 73, 73, 1)"
-                                    transform="translate(1885 -974)"
-                                    xlinkHref="#R"
-                                />
-                            </g>
-                        </g>
-                        <g>
-                            <use
-                                fill="rgba(73, 73, 73, 1)"
-                                transform="translate(1888 -971)"
-                                xlinkHref="#S"
-                            />
-                        </g>
-                    </g>
-                </g>
-                <defs>
-                    <path
-                        d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
-                        id="R"
-                    />
-                    <path
-                        d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
-                        id="S"
-                    />
-                </defs>
-            </svg>
-        </div>
-    </div>
-    <small
-        className="c3"
-    >
-        Tags
-    </small>
-</div>,
-  .c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c2 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 + div:empty,
-.c0 + form:empty {
+.c4 + div:empty,
+.c4 + form:empty {
   margin-bottom: 2.5rem;
 }
 
 <div
-    className="c0 c1"
+    className=""
+    onClick={false}
 >
     <div
-        className="c2 c3"
-        height="0.0625rem"
-    />
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="17"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    version="1.1"
+                    viewBox="0 0 17 17"
+                    width="17"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                    <g
+                        transform="translate(-1885 974)"
+                    >
+                        <g>
+                            <g>
+                                <g>
+                                    <use
+                                        fill="rgba(73, 73, 73, 1)"
+                                        transform="translate(1885 -974)"
+                                        xlinkHref="#R"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <use
+                                    fill="rgba(73, 73, 73, 1)"
+                                    transform="translate(1888 -971)"
+                                    xlinkHref="#S"
+                                />
+                            </g>
+                        </g>
+                    </g>
+                    <defs>
+                        <path
+                            d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
+                            id="R"
+                        />
+                        <path
+                            d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
+                            id="S"
+                        />
+                    </defs>
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            Tags
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   .c3 {
   color: rgba(73,73,73,1);
diff --git a/packages/my-joy-beta/src/containers/create-instance/affinity.js b/packages/my-joy-beta/src/containers/create-instance/affinity.js
index 884dad32..d742b879 100644
--- a/packages/my-joy-beta/src/containers/create-instance/affinity.js
+++ b/packages/my-joy-beta/src/containers/create-instance/affinity.js
@@ -46,7 +46,12 @@ export const Affinity = ({
   rule
 }) => (
   <Fragment>
-    <Title icon={<AffinityIcon />}>Affinity</Title>
+    <Title
+      onClick={!expanded && !proceeded && handleEdit}
+      icon={<AffinityIcon />}
+    >
+      Affinity
+    </Title>
     {expanded ? (
       <Description>
         Control placement of instances on the physical servers. Design
diff --git a/packages/my-joy-beta/src/containers/create-instance/cns.js b/packages/my-joy-beta/src/containers/create-instance/cns.js
index 075d2b9d..b01b32a9 100644
--- a/packages/my-joy-beta/src/containers/create-instance/cns.js
+++ b/packages/my-joy-beta/src/containers/create-instance/cns.js
@@ -54,7 +54,9 @@ const CNSContainer = ({
   loading
 }) => (
   <Fragment>
-    <Title icon={<CnsIcon />}>Container Name Service</Title>
+    <Title onClick={!expanded && !proceeded && handleEdit} icon={<CnsIcon />}>
+      Container Name Service
+    </Title>
     {expanded ? (
       <Description>
         Triton CNS is used to automatically update hostnames for your
diff --git a/packages/my-joy-beta/src/containers/create-instance/firewall.js b/packages/my-joy-beta/src/containers/create-instance/firewall.js
index bfd2aeeb..72e46e9e 100644
--- a/packages/my-joy-beta/src/containers/create-instance/firewall.js
+++ b/packages/my-joy-beta/src/containers/create-instance/firewall.js
@@ -29,7 +29,12 @@ const Firewall = ({
   handleEdit
 }) => (
   <Fragment>
-    <Title icon={<FirewallIcon />}>Firewall</Title>
+    <Title
+      onClick={!expanded && !proceeded && handleEdit}
+      icon={<FirewallIcon />}
+    >
+      Firewall
+    </Title>
     {expanded ? (
       <Description>
         Cloud Firewall rules control traffic across instances. Enabling the
@@ -59,7 +64,8 @@ const Firewall = ({
                 tagRules={tagRules}
                 enabled={enabled}
               />
-            ) : null}
+            ) : null
+          }
         </ReduxForm>
       ) : null}
       {proceeded && !expanded ? (
diff --git a/packages/my-joy-beta/src/containers/create-instance/image.js b/packages/my-joy-beta/src/containers/create-instance/image.js
index 8229ed92..611b2d0a 100644
--- a/packages/my-joy-beta/src/containers/create-instance/image.js
+++ b/packages/my-joy-beta/src/containers/create-instance/image.js
@@ -2,11 +2,13 @@ import React, { Fragment } from 'react';
 import { compose, graphql } from 'react-apollo';
 import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
+import { set } from 'react-redux-values';
 import get from 'lodash.get';
 
-import { InstanceTypeIcon } from 'joyent-ui-toolkit';
-import Image from '@components/create-instance/image';
+import { InstanceTypeIcon, StatusLoader } from 'joyent-ui-toolkit';
+import Image, { Preview } from '@components/create-instance/image';
 import Title from '@components/create-instance/title';
+import Description from '@components/create-instance/description';
 import imageData from '../../data/images-map.json';
 
 import getImages from '../../graphql/get-images.gql';
@@ -14,31 +16,58 @@ import getImages from '../../graphql/get-images.gql';
 const ImageContainer = ({
   expanded,
   image,
-  handleSubmit,
-  handleCancel,
+  handleNext,
+  handleEdit,
   loading,
   images,
   vms
 }) => (
   <Fragment>
-    <Title icon={<InstanceTypeIcon />}>Instance type and image</Title>
+    <Title
+      onClick={!expanded && !image && handleEdit}
+      icon={<InstanceTypeIcon />}
+    >
+      Instance type and image
+    </Title>
+    {expanded ? (
+      <Description>
+        Hardware virtual machines are generally used for non-containerized
+        applications. Infrastructure containers are generally for running any
+        Linux image on secure, bare metal containers.{' '}
+        <a
+          href="https://docs.joyent.com/private-cloud/images"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Read the docs
+        </a>
+      </Description>
+    ) : null}
     <ReduxForm
       form="create-instance-image"
       destroyOnUnmount={false}
       forceUnregisterOnUnmount={true}
-      onSubmit={handleSubmit}
+      onSubmit={handleNext}
     >
-      {props => (
-        <Image
-          {...props}
-          isVmSelected={vms}
-          loading={loading}
-          imageID={image}
-          images={images}
-          expanded={expanded}
-          onCancel={handleCancel}
-        />
-      )}
+      {props =>
+        (loading && expanded) ? (
+          <StatusLoader />
+        ) : expanded ? (
+          <Image
+            {...props}
+            isVmSelected={vms}
+            imageID={image}
+            images={images}
+          />
+        ) : image ? (
+          <Preview
+            isVmSelected={vms}
+            imageID={image}
+            images={images}
+            onEdit={handleEdit}
+          />
+        ) : null
+      }
     </ReduxForm>
   </Fragment>
 );
@@ -53,8 +82,12 @@ export default compose(
       };
     },
     (dispatch, { history }) => ({
-      handleSubmit: () => history.push(`/instances/~create/package`),
-      handleCancel: () => history.push(`/instances/~create/image`)
+      handleNext: () => {
+        dispatch(set({ name: 'create-instance-image-proceeded', value: true }));
+
+        return history.push(`/instances/~create/package`);
+      },
+      handleEdit: () => history.push(`/instances/~create/image`)
     })
   ),
   graphql(getImages, {
diff --git a/packages/my-joy-beta/src/containers/create-instance/index.js b/packages/my-joy-beta/src/containers/create-instance/index.js
index 4016c66b..f2f58caa 100644
--- a/packages/my-joy-beta/src/containers/create-instance/index.js
+++ b/packages/my-joy-beta/src/containers/create-instance/index.js
@@ -5,6 +5,7 @@ import { Margin } from 'styled-components-spacing';
 import ReduxForm from 'declarative-redux-form';
 import { stopSubmit, destroy } from 'redux-form';
 import { connect } from 'react-redux';
+import { destroyAll } from 'react-redux-values';
 import { graphql, compose } from 'react-apollo';
 import intercept from 'apr-intercept';
 import constantCase from 'constant-case';
@@ -28,43 +29,59 @@ import parseError from '@state/parse-error';
 
 const CREATE_FORM = 'CREATE-INSTANCE';
 
-const CreateInstance = ({ step, handleSubmit, ...props }) => (
+const CreateInstance = ({ step, disabled, handleSubmit, history, match }) => (
   <ViewContainer>
     <Margin top={4} bottom={4}>
       <H2>Create Instances</H2>
     </Margin>
     <Margin bottom={4}>
-      <Name {...props} expanded={step === 'name'} />
+      <Name history={history} match={match} expanded={step === 'name'} />
     </Margin>
     <Margin bottom={4}>
-      <Image {...props} expanded={step === 'image'} />
+      <Image history={history} match={match} expanded={step === 'image'} />
     </Margin>
     <Margin bottom={4}>
-      <Package {...props} expanded={step === 'package'} />
+      <Package history={history} match={match} expanded={step === 'package'} />
     </Margin>
     <Margin bottom={4}>
-      <Tags {...props} expanded={step === 'tags'} />
+      <Tags history={history} match={match} expanded={step === 'tags'} />
     </Margin>
     <Margin bottom={4}>
-      <Metadata {...props} expanded={step === 'metadata'} />
+      <Metadata
+        history={history}
+        match={match}
+        expanded={step === 'metadata'}
+      />
     </Margin>
     <Margin bottom={4}>
-      <Networks {...props} expanded={step === 'networks'} />
+      <Networks
+        history={history}
+        match={match}
+        expanded={step === 'networks'}
+      />
     </Margin>
     <Margin bottom={5}>
-      <Firewall {...props} expanded={step === 'firewall'} />
+      <Firewall
+        history={history}
+        match={match}
+        expanded={step === 'firewall'}
+      />
     </Margin>
     <Margin bottom={4}>
-      <CNS {...props} expanded={step === 'cns'} />
+      <CNS history={history} match={match} expanded={step === 'cns'} />
     </Margin>
     <Margin bottom={4}>
-      <Affinity {...props} expanded={step === 'affinity'} />
+      <Affinity
+        history={history}
+        match={match}
+        expanded={step === 'affinity'}
+      />
     </Margin>
     <Margin top={7} bottom={10}>
       <ReduxForm form={CREATE_FORM} onSubmit={handleSubmit}>
         {({ handleSubmit, submitting }) => (
           <form onSubmit={handleSubmit}>
-            <Button disabled={step !== 'summary'} loading={submitting}>
+            <Button disabled={disabled} loading={submitting}>
               Deploy
             </Button>
           </form>
@@ -76,14 +93,22 @@ const CreateInstance = ({ step, handleSubmit, ...props }) => (
 
 export default compose(
   graphql(CreateInstanceMutation, { name: 'createInstance' }),
-  connect(({ form, values }, ownProps) => {
+  connect(({ form, values }, { step }) => {
+    const disabled = ['name', 'image', 'package', 'networks'].some(
+      step => !get(values, `create-instance-${step}-proceeded`, false)
+    );
+
+    if (disabled) {
+      return { disabled };
+    }
+
     const name = get(
       form,
       'create-instance-name.values.name',
       '<instance-name>'
     );
 
-    const firewall = get(
+    const firewall_enabled = get(
       form,
       'CREATE-INSTANCE-FIREWALL.values.enabled',
       false
@@ -98,14 +123,10 @@ export default compose(
     const pkg = get(
       form,
       'create-instance-package.values.package',
-      '<instance-image>'
+      '<instance-pkg>'
     );
 
-    const networks = get(
-      form,
-      'CREATE-INSTANCE-NETWORKS.values',
-      '<instance-image>'
-    );
+    const networks = get(form, 'CREATE-INSTANCE-NETWORKS.values', {});
 
     const metadata = get(values, 'create-instance-metadata', []);
     const receivedTags = get(values, 'create-instance-tags', []);
@@ -121,52 +142,17 @@ export default compose(
       tags.push({ name: 'triton.cns.services', value: cnsServices.join(',') });
     }
 
-    const affRules = affinity
-      .map(aff => ({
-        conditional: aff['rule-instance-conditional'],
-        placement: aff['rule-instance-placement'],
-        identity: aff['rule-type'],
-        key: aff['rule-instance-tag-key'],
-        pattern: aff['rule-instance-tag-value-pattern'],
-        value:
-          aff['rule-type'] === 'name'
-            ? aff['rule-instance-name']
-            : aff['rule-instance-tag-value']
-      }))
-      .map(({ conditional, placement, identity, key, pattern, value }) => {
-        const type = constantCase(
-          `${conditional}_${placement === 'same' ? 'equal' : 'not_equal'}`
-        );
-
-        console.log(pattern);
-        const patterns = {
-          equalling: value => value,
-          'not-equalling': value => `/^!${value}$/`,
-          containing: value => `/${value}/`,
-          starting: value => `/^${value}/`,
-          ending: value => `/${value}$/`
-        };
-
-        const _key = identity === 'name' ? 'instance' : key;
-        const _value = patterns[pattern](value);
-
-        return {
-          type,
-          key: _key,
-          value: _value
-        };
-      });
-
     return {
       forms: Object.keys(form), // improve this
-      name: name.toLowerCase(),
+      name,
       pkg,
       image,
-      affinity: affRules,
-      metadata: metadata.map(a => omit(a, 'expanded')),
-      tags: uniqBy(tags, 'name'),
-      firewall_enabled: firewall,
-      networks: Object.keys(networks).filter(network => networks[network])
+      affinity,
+      metadata,
+      tags,
+      firewall_enabled,
+      networks,
+      disabled
     };
   }),
   connect(null, (dispatch, ownProps) => {
@@ -186,17 +172,59 @@ export default compose(
 
     return {
       handleSubmit: async () => {
+        const _affinity = affinity
+          .map(aff => ({
+            conditional: aff['rule-instance-conditional'],
+            placement: aff['rule-instance-placement'],
+            identity: aff['rule-type'],
+            key: aff['rule-instance-tag-key'],
+            pattern: aff['rule-instance-tag-value-pattern'],
+            value:
+              aff['rule-type'] === 'name'
+                ? aff['rule-instance-name']
+                : aff['rule-instance-tag-value']
+          }))
+          .map(({ conditional, placement, identity, key, pattern, value }) => {
+            const type = constantCase(
+              `${conditional}_${placement === 'same' ? 'equal' : 'not_equal'}`
+            );
+
+            const patterns = {
+              equalling: value => value,
+              'not-equalling': value => `/^!${value}$/`,
+              containing: value => `/${value}/`,
+              starting: value => `/^${value}/`,
+              ending: value => `/${value}$/`
+            };
+
+            const _key = identity === 'name' ? 'instance' : key;
+            const _value = patterns[pattern](value);
+
+            return {
+              type,
+              key: _key,
+              value: _value
+            };
+          });
+
+        const _metadata = metadata.map(a => omit(a, 'expanded'));
+        const _tags = uniqBy(tags, 'name');
+        const _networks = Object.keys(networks).filter(
+          network => networks[network]
+        );
+        const _name = name.toLowerCase();
+
         const [err, res] = await intercept(
           createInstance({
             variables: {
-              name,
+              name: _name,
               package: pkg,
               image,
-              affinity,
-              metadata,
-              tags,
+              affinity: _affinity,
+              metadata: _metadata,
+              tags: _tags,
               firewall_enabled,
-              networks
+              networks: _networks
             }
           })
         );
@@ -209,7 +237,7 @@ export default compose(
           );
         }
 
-        dispatch(forms.map(name => destroy(name)));
+        dispatch([destroyAll(), forms.map(name => destroy(name))]);
 
         history.push(`/instances/${res.data.createMachine.name}`);
       }
diff --git a/packages/my-joy-beta/src/containers/create-instance/metadata.js b/packages/my-joy-beta/src/containers/create-instance/metadata.js
index 4283abce..845982b7 100644
--- a/packages/my-joy-beta/src/containers/create-instance/metadata.js
+++ b/packages/my-joy-beta/src/containers/create-instance/metadata.js
@@ -31,7 +31,12 @@ export const Metadata = ({
   handleEdit
 }) => (
   <Fragment>
-    <Title icon={<MetadataIcon />}>Metadata</Title>
+    <Title
+      onClick={!expanded && !proceeded && handleEdit}
+      icon={<MetadataIcon />}
+    >
+      Metadata
+    </Title>
     {expanded ? (
       <Description>
         Metadata can be used to pass data to the instance. It can also be used
diff --git a/packages/my-joy-beta/src/containers/create-instance/name.js b/packages/my-joy-beta/src/containers/create-instance/name.js
index d130219a..c4d235fd 100644
--- a/packages/my-joy-beta/src/containers/create-instance/name.js
+++ b/packages/my-joy-beta/src/containers/create-instance/name.js
@@ -2,13 +2,14 @@ import React, { Fragment } from 'react';
 import { compose, graphql } from 'react-apollo';
 import { set } from 'react-redux-values';
 import ReduxForm from 'declarative-redux-form';
+import { Margin } from 'styled-components-spacing';
 import { change } from 'redux-form';
 import { connect } from 'react-redux';
 import intercept from 'apr-intercept';
 import get from 'lodash.get';
 import punycode from 'punycode';
 
-import { NameIcon } from 'joyent-ui-toolkit';
+import { NameIcon, H3, Button } from 'joyent-ui-toolkit';
 
 import Name from '@components/create-instance/name';
 import Title from '@components/create-instance/title';
@@ -17,7 +18,7 @@ import GetRandomName from '@graphql/get-random-name.gql';
 import { client } from '@state/store';
 import parseError from '@state/parse-error';
 
-const FORM_NAME = 'CREATE_INSTANCE_NAME';
+const FORM_NAME = 'create-instance-name';
 
 const NameContainer = ({
   expanded,
@@ -27,11 +28,13 @@ const NameContainer = ({
   handleAsyncValidation,
   shouldAsyncValidate,
   handleNext,
-  handleCancel,
-  handleRandomize
+  handleRandomize,
+  handleEdit
 }) => (
   <Fragment>
-    <Title icon={<NameIcon />}>Instance name</Title>
+    <Title onClick={!expanded && !name && handleEdit} icon={<NameIcon />}>
+      Instance name
+    </Title>
     <ReduxForm
       form={FORM_NAME}
       destroyOnUnmount={false}
@@ -40,17 +43,25 @@ const NameContainer = ({
       asyncValidate={handleAsyncValidation}
       shouldAsyncValidate={shouldAsyncValidate}
     >
-      {props => (
-        <Name
-          {...props}
-          name={name}
-          placeholderName={placeholderName}
-          expanded={expanded}
-          randomizing={randomizing}
-          onCancel={handleCancel}
-          onRandomize={handleRandomize}
-        />
-      )}
+      {props =>
+        expanded ? (
+          <Name
+            {...props}
+            placeholderName={placeholderName}
+            randomizing={randomizing}
+            onRandomize={handleRandomize}
+          />
+        ) : name ? (
+          <Fragment>
+            <Margin bottom={2} top={3}>
+              <H3 bold>{name}</H3>
+            </Margin>
+            <Button type="button" secondary onClick={handleEdit}>
+              Edit
+            </Button>
+          </Fragment>
+        ) : null
+      }
     </ReduxForm>
   </Fragment>
 );
@@ -80,14 +91,21 @@ export default compose(
     (dispatch, { history }) => ({
       shouldAsyncValidate: ({ trigger }) => trigger === 'submit',
       handleAsyncValidation: async ({ name }) => {
-        const sanitized = punycode.encode(name).replace(/\-$/, '');
+        const sanitized = punycode.encode(name).replace(/-$/, '');
 
         if (sanitized !== name) {
+          // eslint-disable-next-line no-throw-literal
           throw {
             name: 'Special characters are not accepted'
           };
         }
 
+        if (!(/^[a-zA-Z0-9][a-zA-Z0-9\\_\\.\\-]*$/).test(name)) {
+          throw {
+            name: 'Invalid name'
+          };
+        }
+
         const [err, res] = await intercept(
           client.query({
             fetchPolicy: 'network-only',
@@ -97,6 +115,7 @@ export default compose(
         );
 
         if (err) {
+          // eslint-disable-next-line no-throw-literal
           throw {
             name: parseError(err)
           };
@@ -106,13 +125,18 @@ export default compose(
         const { machines = [] } = data;
 
         if (machines.length) {
+          // eslint-disable-next-line no-throw-literal
           throw {
             name: `${name} already exists`
           };
         }
       },
-      handleNext: () => history.push(`/instances/~create/image`),
-      handleCancel: () => history.push(`/instances/~create/name`),
+      handleNext: () => {
+        dispatch(set({ name: 'create-instance-name-proceeded', value: true }));
+
+        return history.push(`/instances/~create/image`);
+      },
+      handleEdit: () => history.push(`/instances/~create/name`),
       handleRandomize: async () => {
         dispatch(
           set({ name: 'create-instance-name-randomizing', value: true })
diff --git a/packages/my-joy-beta/src/containers/create-instance/networks.js b/packages/my-joy-beta/src/containers/create-instance/networks.js
index bf08bbbe..96df1cb0 100644
--- a/packages/my-joy-beta/src/containers/create-instance/networks.js
+++ b/packages/my-joy-beta/src/containers/create-instance/networks.js
@@ -29,7 +29,12 @@ export const Networks = ({
 
   return (
     <Fragment>
-      <Title icon={<NetworkIcon />}>Networks</Title>
+      <Title
+        onClick={!expanded && !proceeded && handleEdit}
+        icon={<NetworkIcon />}
+      >
+        Networks
+      </Title>
       {expanded ? (
         <Description>
           Instances are automatically connected to a private fabric network,
diff --git a/packages/my-joy-beta/src/containers/create-instance/package.js b/packages/my-joy-beta/src/containers/create-instance/package.js
index ae612d14..f9c913f6 100644
--- a/packages/my-joy-beta/src/containers/create-instance/package.js
+++ b/packages/my-joy-beta/src/containers/create-instance/package.js
@@ -29,8 +29,8 @@ const FILTERS = 'create-instance-package-filters';
 const PackageContainer = ({
   expanded,
   hasVms,
-  handleSubmit,
-  handleCancel,
+  handleNext,
+  handleEdit,
   loading,
   packages,
   selected = {},
@@ -40,7 +40,12 @@ const PackageContainer = ({
   resetFilters
 }) => (
   <Fragment>
-    <Title icon={<PackageIcon />}>Package</Title>
+    <Title
+      onClick={!expanded && !selected.id && handleEdit}
+      icon={<PackageIcon />}
+    >
+      Package
+    </Title>
     <div>
       {expanded ? (
         <Description>
@@ -71,7 +76,7 @@ const PackageContainer = ({
           form={FORM_NAME}
           destroyOnUnmount={false}
           forceUnregisterOnUnmount={true}
-          onSubmit={handleSubmit}
+          onSubmit={handleNext}
         >
           {props => (
             <Fragment>
@@ -98,11 +103,7 @@ const PackageContainer = ({
                 </Fragment>
               ) : null}
               {!expanded && selected.id ? (
-                <Overview
-                  {...selected}
-                  hasVms={hasVms}
-                  onCancel={handleCancel}
-                />
+                <Overview {...selected} hasVms={hasVms} onCancel={handleEdit} />
               ) : null}
             </Fragment>
           )}
@@ -195,8 +196,14 @@ export default compose(
       };
     },
     (dispatch, { history }) => ({
-      handleSubmit: () => history.push('/instances/~create/tags'),
-      handleCancel: () => history.push('/instances/~create/package'),
+      handleNext: () => {
+        dispatch(
+          set({ name: 'create-instance-package-proceeded', value: true })
+        );
+
+        return history.push('/instances/~create/tags');
+      },
+      handleEdit: () => history.push('/instances/~create/package'),
       resetFilters: () => {
         dispatch(reset(`${FILTERS}-filters`));
       },
diff --git a/packages/my-joy-beta/src/containers/create-instance/tags.js b/packages/my-joy-beta/src/containers/create-instance/tags.js
index 5b581eeb..c97f8bf5 100644
--- a/packages/my-joy-beta/src/containers/create-instance/tags.js
+++ b/packages/my-joy-beta/src/containers/create-instance/tags.js
@@ -32,7 +32,9 @@ export const Tags = ({
   handleEdit
 }) => (
   <Fragment>
-    <Title icon={<TagsIcon />}>Tags</Title>
+    <Title onClick={!expanded && !proceeded && handleEdit} icon={<TagsIcon />}>
+      Tags
+    </Title>
     {expanded ? (
       <Description>
         Tags can be used to identify your instances, group multiple instances
diff --git a/yarn.lock b/yarn.lock
index 8a7ef7c0..b4af5071 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6762,8 +6762,8 @@ multicast-dns-service-types@^1.1.0:
   resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
 
 multicast-dns@^6.0.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.1.tgz#c5035defa9219d30640558a49298067352098060"
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.2.tgz#300b6133361f8aaaf2b8d1248e85c363fe5b95a0"
   dependencies:
     dns-packet "^1.0.1"
     thunky "^0.1.0"
@@ -8234,9 +8234,9 @@ react-popper@^0.7.4:
     popper.js "^1.12.5"
     prop-types "^15.5.10"
 
-react-redux-values@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/react-redux-values/-/react-redux-values-1.0.2.tgz#f626997a1107626883147e45612cb8d1c0bce8fb"
+react-redux-values@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/react-redux-values/-/react-redux-values-1.1.2.tgz#e55e72fe74db1370e26aa96b27f15c262b1afa0c"
   dependencies:
     lodash.isundefined "^3.0.1"
     prop-types "^15.6.0"