diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/cns.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/cns.js.snap
new file mode 100644
index 00000000..a8295c4c
--- /dev/null
+++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/cns.js.snap
@@ -0,0 +1,904 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <AddServiceForm /> without throwing 1`] = `
+.c4 {
+  margin-left: 0.5rem;
+}
+
+.c0 {
+  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: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c7 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+}
+
+.c7::-moz-focus-inner,
+.c7[type='button']::-moz-focus-inner,
+.c7[type='reset']::-moz-focus-inner,
+.c7[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c7:-moz-focusring,
+.c7[type='button']:-moz-focusring,
+.c7[type='reset']:-moz-focusring,
+.c7[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c7 + button {
+  margin-left: 0.375rem;
+}
+
+.c6 {
+  display: inline-block;
+}
+
+.c5 {
+  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);
+}
+
+.c5:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c5:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c5:active,
+.c5:active:hover,
+.c5:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c5[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.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;
+}
+
+.c3 {
+  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: 18.75rem;
+  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;
+}
+
+.c3::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:invalid {
+  box-shadow: none;
+}
+
+.c3:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c3:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c2 {
+  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;
+}
+
+<form
+  onSubmit={undefined}
+>
+  <div
+    className="c0"
+  >
+    <div
+      className="c1"
+      name="name"
+      role="group"
+      style={undefined}
+    >
+      <label
+        className="c2"
+        htmlFor="Y"
+      >
+        Attach to new CNS service name
+      </label>
+      <input
+        className="c3"
+        disabled={false}
+        id="Y"
+        placeholder="Example: mySQLdb"
+      />
+    </div>
+    <div
+      className="c4"
+    >
+      <button
+        className="c5 c6 c7"
+        disabled={undefined}
+        href=""
+        type="submit"
+      >
+        Add
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
+.c4 {
+  margin-left: 0.5rem;
+}
+
+.c0 {
+  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: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c7 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+}
+
+.c7::-moz-focus-inner,
+.c7[type='button']::-moz-focus-inner,
+.c7[type='reset']::-moz-focus-inner,
+.c7[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c7:-moz-focusring,
+.c7[type='button']:-moz-focusring,
+.c7[type='reset']:-moz-focusring,
+.c7[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c7 + button {
+  margin-left: 0.375rem;
+}
+
+.c6 {
+  display: inline-block;
+}
+
+.c5 {
+  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);
+}
+
+.c5:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c5:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c5:active,
+.c5:active:hover,
+.c5:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c5[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c5:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c5:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c5:active,
+.c5:active:hover,
+.c5:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.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;
+}
+
+.c3 {
+  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: 18.75rem;
+  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;
+}
+
+.c3::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:invalid {
+  box-shadow: none;
+}
+
+.c3:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c3:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c2 {
+  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;
+}
+
+<form
+  onSubmit={undefined}
+>
+  <div
+    className="c0"
+  >
+    <div
+      className="c1"
+      name="name"
+      role="group"
+      style={undefined}
+    >
+      <label
+        className="c2"
+        htmlFor="Z"
+      >
+        Attach to new CNS service name
+      </label>
+      <input
+        className="c3"
+        disabled={false}
+        id="Z"
+        placeholder="Example: mySQLdb"
+      />
+    </div>
+    <div
+      className="c4"
+    >
+      <button
+        className="c5 c6 c7"
+        disabled={true}
+        href=""
+        type="submit"
+      >
+        Add
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders <Header/> without throwing 1`] = `
+Array [
+  .c0 {
+  color: rgba(73,73,73,1);
+  font-weight: normal;
+  line-height: 1.625rem;
+  font-size: 1.3125rem;
+  margin: 0;
+}
+
+.c0 + p,
+.c0 + small,
+.c0 + h1,
+.c0 + h2,
+.c0 + label,
+.c0 + h3,
+.c0 + h4,
+.c0 + h5,
+.c0 + div,
+.c0 + span {
+  margin-top: 1.5rem;
+}
+
+<h3
+    className="c0"
+>
+    Hostnames
+</h3>,
+  .c0 {
+  padding-bottom: 0.5rem;
+}
+
+.c1 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c1 + p,
+.c1 + small,
+.c1 + h1,
+.c1 + h2,
+.c1 + label,
+.c1 + h3,
+.c1 + h4,
+.c1 + h5,
+.c1 + div,
+.c1 + span {
+  padding-bottom: 2.25rem;
+}
+
+<div
+    className="c0"
+>
+    <p
+        className="c1"
+    >
+        Default hostnames are automatically generated from both the instance name and any attached networks.
+    </p>
+</div>,
+]
+`;
+
+exports[`renders <Hostname /> without throwing 1`] = `null`;
+
+exports[`renders <Hostname values /> without throwing 1`] = `
+.c0 {
+  margin-bottom: 2rem;
+}
+
+.c5 {
+  margin-right: 0.25rem;
+}
+
+.c1 {
+  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;
+}
+
+.c4 {
+  -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;
+}
+
+.c3 {
+  font-size: 80%;
+  color: rgba(73,73,73,1);
+  line-height: 1.125rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.c6 {
+  font-size: 80%;
+  color: rgba(73,73,73,1);
+  line-height: 1.125rem;
+  font-size: 0.8125rem;
+}
+
+.c7 {
+  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: rgb(250,250,250);
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  font-family: "Roboto Mono";
+  width: 100%;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c7::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:invalid {
+  box-shadow: none;
+}
+
+.c7::-webkit-input-placeholder {
+  color: rgb(216,216,216);
+}
+
+.c7::-moz-placeholder {
+  color: rgb(216,216,216);
+}
+
+.c7:-ms-input-placeholder {
+  color: rgb(216,216,216);
+}
+
+.c7:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c7:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c7:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c7:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c7:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c7:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c2 {
+  padding-right: 0.75rem;
+  margin-right: 0.75rem;
+  border-right: 0.0625rem solid rgb(216,216,216);
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <small
+      className="c2 c3"
+    >
+      Instance name
+       
+      hostname
+    </small>
+    <div
+      className="c4"
+    >
+      <div
+        className="c5"
+      >
+        <svg
+          className=""
+          height="16"
+          style={
+            Object {
+              "transform": "rotate(0deg)",
+            }
+          }
+          viewBox="0 0 12 16"
+          width="12"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+            fill="rgba(73, 73, 73, 1)"
+          />
+        </svg>
+      </div>
+    </div>
+    <div
+      className="c4"
+    >
+      <small
+        className="c6"
+      >
+        Private
+      </small>
+    </div>
+  </div>
+  <input
+    className="c7"
+    disabled={true}
+    id=""
+    value="111"
+  />
+  <input
+    className="c7"
+    disabled={true}
+    id=""
+    value="111"
+  />
+</div>
+`;
+
+exports[`renders <HostnamesHeader /> without throwing 1`] = `
+.c0 {
+  margin-top: 2rem;
+}
+
+.c2 {
+  padding-bottom: 1rem;
+}
+
+.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;
+}
+
+.c1 {
+  color: rgba(73,73,73,1);
+  font-weight: normal;
+  line-height: 1.625rem;
+  font-size: 1.3125rem;
+  margin: 0;
+}
+
+.c1 + p,
+.c1 + small,
+.c1 + h1,
+.c1 + h2,
+.c1 + label,
+.c1 + h3,
+.c1 + h4,
+.c1 + h5,
+.c1 + div,
+.c1 + span {
+  margin-top: 1.5rem;
+}
+
+<div
+  className="c0"
+>
+  <h3
+    className="c1"
+  >
+    CNS service hostnames
+  </h3>
+  <div
+    className="c2"
+  >
+    <p
+      className="c3"
+    >
+      CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name.
+    </p>
+  </div>
+</div>
+`;
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 84a76e0b..3c3000b4 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,174 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Name /> without throwing 1`] = `
-.c0 {
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
-}
-
-.c4 {
-  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;
-}
-
-.c4::-moz-focus-inner,
-.c4[type='button']::-moz-focus-inner,
-.c4[type='reset']::-moz-focus-inner,
-.c4[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 {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c4 + button {
-  margin-left: 0.375rem;
-}
-
-.c3 {
-  display: inline-block;
-}
-
-.c2 {
-  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);
-}
-
-.c2:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c2:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c2:active,
-.c2:active:hover,
-.c2:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c2[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c2:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c2:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c2:active,
-.c2:active:hover,
-.c2: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;
-}
-
-.c1 + p,
-.c1 + small,
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
-  margin-top: 1.5rem;
-}
-
 <form
   onSubmit={undefined}
->
-  <div
-    className="c0"
-  >
-    <h3
-      className="c1"
-    />
-  </div>
-  <button
-    className="c2 c3 c4"
-    href=""
-    onClick={undefined}
-    type="button"
-  >
-    Edit
-  </button>
-</form>
+/>
 `;
 
 exports[`renders <Name expanded /> without throwing 1`] = `
@@ -620,172 +455,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
 `;
 
 exports[`renders <Name pristine={false} /> without throwing 1`] = `
-.c0 {
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
-}
-
-.c4 {
-  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;
-}
-
-.c4::-moz-focus-inner,
-.c4[type='button']::-moz-focus-inner,
-.c4[type='reset']::-moz-focus-inner,
-.c4[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 {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c4 + button {
-  margin-left: 0.375rem;
-}
-
-.c3 {
-  display: inline-block;
-}
-
-.c2 {
-  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);
-}
-
-.c2:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c2:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c2:active,
-.c2:active:hover,
-.c2:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c2[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c2:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c2:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c2:active,
-.c2:active:hover,
-.c2: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;
-}
-
-.c1 + p,
-.c1 + small,
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
-  margin-top: 1.5rem;
-}
-
 <form
   onSubmit={undefined}
->
-  <div
-    className="c0"
-  >
-    <h3
-      className="c1"
-    />
-  </div>
-  <button
-    className="c2 c3 c4"
-    href=""
-    onClick={undefined}
-    type="button"
-  >
-    Edit
-  </button>
-</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 fe241f1b..8abe3852 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
@@ -2,23 +2,23 @@
 
 exports[`renders <Title /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -42,6 +42,35 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
@@ -51,9 +80,13 @@ Array [
 >
     <div
         className="c1"
-    />
+    >
+        <div
+            className="c2"
+        />
+    </div>
     <p
-        className="c2"
+        className="c3"
     />
 </div>,
   .c2 {
@@ -99,23 +132,23 @@ Array [
 
 exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -139,6 +172,35 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
@@ -149,28 +211,32 @@ Array [
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="17"
-            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"
+        <div
+            className="c2"
         >
-            <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>
+            <svg
+                className=""
+                height="17"
+                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>
     <p
-        className="c2"
+        className="c3"
     />
 </div>,
   .c2 {
@@ -216,23 +282,23 @@ Array [
 
 exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -256,6 +322,35 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
@@ -266,28 +361,32 @@ Array [
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="17"
-            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"
+        <div
+            className="c2"
         >
-            <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>
+            <svg
+                className=""
+                height="17"
+                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>
     <p
-        className="c2"
+        className="c3"
     />
 </div>,
   .c2 {
@@ -333,23 +432,23 @@ Array [
 
 exports[`renders <Title label="Test"/> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -373,6 +472,35 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
@@ -382,9 +510,13 @@ Array [
 >
     <div
         className="c1"
-    />
+    >
+        <div
+            className="c2"
+        />
+    </div>
     <p
-        className="c2"
+        className="c3"
     />
 </div>,
   .c2 {
diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/cns.js b/packages/my-joy-beta/src/components/create-instance/__tests__/cns.js
new file mode 100644
index 00000000..10692f8b
--- /dev/null
+++ b/packages/my-joy-beta/src/components/create-instance/__tests__/cns.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Header, HostnamesHeader, AddServiceForm, Hostname } from '../cns';
+import Theme from '@mocks/theme';
+
+it('renders <Header/> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Header />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <HostnamesHeader /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <HostnamesHeader />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <AddServiceForm /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <AddServiceForm />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <AddServiceForm pristine /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <AddServiceForm pristine />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Hostname /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Hostname values={[]} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Hostname values /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Hostname values={['111', '111']} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
diff --git a/packages/my-joy-beta/src/components/create-instance/cns.js b/packages/my-joy-beta/src/components/create-instance/cns.js
new file mode 100644
index 00000000..26e424cf
--- /dev/null
+++ b/packages/my-joy-beta/src/components/create-instance/cns.js
@@ -0,0 +1,93 @@
+import React, { Fragment } from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+import { Margin, Padding } from 'styled-components-spacing';
+import Flex, { FlexItem } from 'styled-flex-component';
+import { Field } from 'redux-form';
+
+import {
+  P,
+  H3,
+  Input,
+  Small,
+  Button,
+  FormGroup,
+  FormLabel,
+  PublicIcon,
+  PrivateIcon
+} from 'joyent-ui-toolkit';
+
+const SmallBordered = styled(Small)`
+  padding-right: ${remcalc(12)};
+  margin-right: ${remcalc(12)};
+  border-right: ${remcalc(1)} solid ${props => props.theme.grey};
+`;
+
+export const Header = () => (
+  <Fragment>
+    <H3>Hostnames</H3>
+    <Padding bottom={2}>
+      <P>
+        Default hostnames are automatically generated from both the instance
+        name and any attached networks.
+      </P>
+    </Padding>
+  </Fragment>
+);
+
+export const HostnamesHeader = () => (
+  <Margin top={4}>
+    <H3>CNS service hostnames</H3>
+    <Padding bottom={3}>
+      <P>
+        CNS service hostnames are created by attaching a CNS service name to one
+        or more instances. You can serve multiple instances under the same
+        hostname by assigning them to a matching CNS service name.
+      </P>
+    </Padding>
+  </Margin>
+);
+
+export const AddServiceForm = ({ handleSubmit, pristine }) => (
+  <form onSubmit={handleSubmit}>
+    <Flex alignEnd>
+      <FormGroup name="name" field={Field}>
+        <FormLabel>Attach to new CNS service name</FormLabel>
+        <Input type="text" placeholder="Example: mySQLdb" />
+      </FormGroup>
+      <Margin left={2}>
+        <Button type="submit" disabled={pristine}>
+          Add
+        </Button>
+      </Margin>
+    </Flex>
+  </form>
+);
+
+export const Hostname = ({ values, network, service, ...hostname }) => (
+  <Fragment>
+    {values.length ? (
+      <Margin bottom={4}>
+        <Flex>
+          <SmallBordered bold noMargin>
+            {network && service
+              ? 'Network CNS service'
+              : network
+                ? 'Network'
+                : service ? 'CNS service' : 'Instance name'}{' '}
+            hostname
+          </SmallBordered>
+          <FlexItem>
+            <Margin right={1}>
+              {hostname.public ? <PublicIcon /> : <PrivateIcon />}
+            </Margin>
+          </FlexItem>
+          <FlexItem>
+            <Small noMargin>{hostname.public ? 'Public' : 'Private'}</Small>
+          </FlexItem>
+        </Flex>
+        {values.map(value => <Input disabled monospace fluid value={value} />)}
+      </Margin>
+    ) : null}
+  </Fragment>
+);
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 62b8b8c2..d2787b94 100644
--- a/packages/my-joy-beta/src/components/create-instance/name.js
+++ b/packages/my-joy-beta/src/components/create-instance/name.js
@@ -32,12 +32,16 @@ export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
       </Fragment>
     ) : (
       <Fragment>
-        <Margin bottom={2} top={3}>
-          <H3>{name}</H3>
-        </Margin>
-        <Button type="button" secondary onClick={onCancel}>
-          Edit
-        </Button>
+        {name ? (
+          <Fragment>
+            <Margin bottom={2} top={3}>
+              <H3>{name}</H3>
+            </Margin>
+            <Button type="button" secondary onClick={onCancel}>
+              Edit
+            </Button>
+          </Fragment>
+        ) : null}
       </Fragment>
     )}
   </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 60572980..db26a602 100644
--- a/packages/my-joy-beta/src/components/create-instance/title.js
+++ b/packages/my-joy-beta/src/components/create-instance/title.js
@@ -8,7 +8,11 @@ import { Divider, P } from 'joyent-ui-toolkit';
 export default ({ icon, children }) => (
   <Fragment>
     <Flex>
-      <Margin right={1}>{icon}</Margin>
+      <Margin right={1}>
+        <Flex alignCenter full>
+          {icon}
+        </Flex>
+      </Margin>
       <P>{children}</P>
     </Flex>
     <Margin top={1} bottom={3}>
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap
index fde2c3bd..e5eccb6e 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap
@@ -2768,7 +2768,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
index 62f0a4d2..e3d028dd 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -693,7 +693,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -1692,7 +1692,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
index 39d99dfe..81dd8e7c 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -835,7 +835,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -897,7 +897,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -3000,7 +3000,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -5334,7 +5334,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -7554,7 +7554,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -7616,7 +7616,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -9611,7 +9611,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -9673,7 +9673,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -11776,7 +11776,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -11838,7 +11838,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -13775,7 +13775,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -13837,7 +13837,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap
index 6c59ce02..2677bf20 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -2014,9 +2014,7 @@ exports[`renders <Tag /> without throwing 1`] = `
     <li
       className="c2"
       onClick={undefined}
-    >
-      : 
-    </li>
+    />
   </div>
 </div>
 `;
@@ -2073,9 +2071,7 @@ exports[`renders <Tag name value/> without throwing 1`] = `
       className="c2"
       onClick={undefined}
     >
-      name
-      : 
-      value
+      name: value
     </li>
   </div>
 </div>
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap
index 5ac02bc5..6df1d8d5 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap
@@ -205,7 +205,7 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -568,7 +568,7 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -953,7 +953,7 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -1316,7 +1316,7 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -1679,7 +1679,7 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -2042,7 +2042,7 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -2429,7 +2429,7 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   color: rgb(250,250,250);
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
diff --git a/packages/my-joy-beta/src/components/instances/tags.js b/packages/my-joy-beta/src/components/instances/tags.js
index 04e195a3..d5d4e12a 100644
--- a/packages/my-joy-beta/src/components/instances/tags.js
+++ b/packages/my-joy-beta/src/components/instances/tags.js
@@ -12,10 +12,10 @@ export const EditForm = props => (
   <KeyValue {...props} method="edit" input="input" type="tag" expanded />
 );
 
-export default ({ name, value, onClick, onRemoveClick }) => (
+export default ({ name, value, onClick, onRemoveClick, active }) => (
   <Margin right={1} bottom={1} key={`${name}-${value}`}>
-    <TagItem onClick={onClick} onRemoveClick={onRemoveClick}>
-      {name}: {value}
+    <TagItem onClick={onClick} active={active} onRemoveClick={onRemoveClick}>
+      {name ? `${name}: ${value}` : value}
     </TagItem>
   </Margin>
 );
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 faa582f6..6ac06b58 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
@@ -2,23 +2,23 @@
 
 exports[`renders <Metadata /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -46,75 +46,108 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="11"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1884 1236)"
+            <svg
+                className=""
+                height="11"
+                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>
+                <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(1884 -1233.9)"
-                                xlinkHref="#F"
+                                transform="translate(1891 -1236)"
+                                xlinkHref="#H"
                             />
                         </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Metadata
     </p>
@@ -163,23 +196,23 @@ Array [
 
 exports[`renders <Metadata addOpen expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -207,75 +240,108 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="11"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1884 1236)"
+            <svg
+                className=""
+                height="11"
+                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>
+                <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(1884 -1233.9)"
-                                xlinkHref="#F"
+                                transform="translate(1891 -1236)"
+                                xlinkHref="#H"
                             />
                         </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Metadata
     </p>
@@ -1041,7 +1107,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -1576,23 +1642,23 @@ Array [
 
 exports[`renders <Metadata expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -1620,75 +1686,108 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="11"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1884 1236)"
+            <svg
+                className=""
+                height="11"
+                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>
+                <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(1884 -1233.9)"
-                                xlinkHref="#F"
+                                transform="translate(1891 -1236)"
+                                xlinkHref="#H"
                             />
                         </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Metadata
     </p>
@@ -1983,23 +2082,23 @@ Array [
 
 exports[`renders <Metadata metadata=[] /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -2027,75 +2126,108 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="11"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1884 1236)"
+            <svg
+                className=""
+                height="11"
+                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>
+                <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(1884 -1233.9)"
-                                xlinkHref="#F"
+                                transform="translate(1891 -1236)"
+                                xlinkHref="#H"
                             />
                         </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Metadata
     </p>
@@ -2811,7 +2943,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -3835,7 +3967,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -4192,23 +4324,23 @@ Array [
 
 exports[`renders <Metadata metadata=[] expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -4236,75 +4368,108 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="11"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1884 1236)"
+            <svg
+                className=""
+                height="11"
+                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>
+                <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(1884 -1233.9)"
-                                xlinkHref="#F"
+                                transform="translate(1891 -1236)"
+                                xlinkHref="#H"
                             />
                         </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Metadata
     </p>
@@ -5060,7 +5225,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -6084,7 +6249,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
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 074c511d..db1c92b5 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
@@ -2,23 +2,23 @@
 
 exports[`renders <Networks /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -46,47 +46,80 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="18"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1105 710)"
+            <svg
+                className=""
+                height="18"
+                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>
-                    <use
-                        fill="rgba(73, 73, 73, 1)"
-                        transform="translate(1105 -710)"
-                        xlinkHref="#I"
-                    />
+                <g
+                    transform="translate(-1105 710)"
+                >
+                    <g>
+                        <use
+                            fill="rgba(73, 73, 73, 1)"
+                            transform="translate(1105 -710)"
+                            xlinkHref="#I"
+                        />
+                    </g>
                 </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Networks
     </p>
@@ -136,23 +169,23 @@ Array [
 
 exports[`renders <Networks loading /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -180,47 +213,80 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="18"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1105 710)"
+            <svg
+                className=""
+                height="18"
+                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>
-                    <use
-                        fill="rgba(73, 73, 73, 1)"
-                        transform="translate(1105 -710)"
-                        xlinkHref="#I"
-                    />
+                <g
+                    transform="translate(-1105 710)"
+                >
+                    <g>
+                        <use
+                            fill="rgba(73, 73, 73, 1)"
+                            transform="translate(1105 -710)"
+                            xlinkHref="#I"
+                        />
+                    </g>
                 </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Networks
     </p>
@@ -269,23 +335,23 @@ Array [
 
 exports[`renders <Networks loading expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -313,47 +379,80 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="18"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1105 710)"
+            <svg
+                className=""
+                height="18"
+                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>
-                    <use
-                        fill="rgba(73, 73, 73, 1)"
-                        transform="translate(1105 -710)"
-                        xlinkHref="#I"
-                    />
+                <g
+                    transform="translate(-1105 710)"
+                >
+                    <g>
+                        <use
+                            fill="rgba(73, 73, 73, 1)"
+                            transform="translate(1105 -710)"
+                            xlinkHref="#I"
+                        />
+                    </g>
                 </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Networks
     </p>
@@ -670,23 +769,23 @@ Array [
 
 exports[`renders <Networks networks=[] /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -714,47 +813,80 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="18"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1105 710)"
+            <svg
+                className=""
+                height="18"
+                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>
-                    <use
-                        fill="rgba(73, 73, 73, 1)"
-                        transform="translate(1105 -710)"
-                        xlinkHref="#I"
-                    />
+                <g
+                    transform="translate(-1105 710)"
+                >
+                    <g>
+                        <use
+                            fill="rgba(73, 73, 73, 1)"
+                            transform="translate(1105 -710)"
+                            xlinkHref="#I"
+                        />
+                    </g>
                 </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Networks
     </p>
@@ -1100,23 +1232,23 @@ Array [
 
 exports[`renders <Networks networks=[] expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -1144,47 +1276,80 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="18"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1105 710)"
+            <svg
+                className=""
+                height="18"
+                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>
-                    <use
-                        fill="rgba(73, 73, 73, 1)"
-                        transform="translate(1105 -710)"
-                        xlinkHref="#I"
-                    />
+                <g
+                    transform="translate(-1105 710)"
+                >
+                    <g>
+                        <use
+                            fill="rgba(73, 73, 73, 1)"
+                            transform="translate(1105 -710)"
+                            xlinkHref="#I"
+                        />
+                    </g>
                 </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Networks
     </p>
@@ -2588,23 +2753,23 @@ Array [
 
 exports[`renders <Networks networks=[] proceeded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -2632,47 +2797,80 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="18"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1105 710)"
+            <svg
+                className=""
+                height="18"
+                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>
-                    <use
-                        fill="rgba(73, 73, 73, 1)"
-                        transform="translate(1105 -710)"
-                        xlinkHref="#I"
-                    />
+                <g
+                    transform="translate(-1105 710)"
+                >
+                    <g>
+                        <use
+                            fill="rgba(73, 73, 73, 1)"
+                            transform="translate(1105 -710)"
+                            xlinkHref="#I"
+                        />
+                    </g>
                 </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Networks
     </p>
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 cbb09644..45d463ed 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
@@ -2,23 +2,23 @@
 
 exports[`renders <Tags /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -46,62 +46,95 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="17"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1885 974)"
+            <svg
+                className=""
+                height="17"
+                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>
+                <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(1885 -974)"
-                                xlinkHref="#R"
+                                transform="translate(1888 -971)"
+                                xlinkHref="#S"
                             />
                         </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Tags
     </p>
@@ -150,23 +183,23 @@ Array [
 
 exports[`renders <Tags addOpen expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -194,62 +227,95 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="17"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1885 974)"
+            <svg
+                className=""
+                height="17"
+                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>
+                <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(1885 -974)"
-                                xlinkHref="#R"
+                                transform="translate(1888 -971)"
+                                xlinkHref="#S"
                             />
                         </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Tags
     </p>
@@ -1540,23 +1606,23 @@ Array [
 
 exports[`renders <Tags expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -1584,62 +1650,95 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="17"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1885 974)"
+            <svg
+                className=""
+                height="17"
+                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>
+                <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(1885 -974)"
-                                xlinkHref="#R"
+                                transform="translate(1888 -971)"
+                                xlinkHref="#S"
                             />
                         </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Tags
     </p>
@@ -1950,23 +2049,23 @@ Array [
 
 exports[`renders <Tags metadata=[] /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -1994,62 +2093,95 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="17"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1885 974)"
+            <svg
+                className=""
+                height="17"
+                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>
+                <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(1885 -974)"
-                                xlinkHref="#R"
+                                transform="translate(1888 -971)"
+                                xlinkHref="#S"
                             />
                         </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Tags
     </p>
@@ -2098,23 +2230,23 @@ Array [
 
 exports[`renders <Tags metadata=[] expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
-.c2 + small,
-.c2 + h1,
-.c2 + h2,
-.c2 + label,
-.c2 + h3,
-.c2 + h4,
-.c2 + h5,
-.c2 + div,
-.c2 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -2142,62 +2274,95 @@ Array [
   align-content: stretch;
 }
 
+.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;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
     >
-        <svg
-            className=""
-            height="17"
-            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"
+        <div
+            className="c2"
         >
-            <g
-                transform="translate(-1885 974)"
+            <svg
+                className=""
+                height="17"
+                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>
+                <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(1885 -974)"
-                                xlinkHref="#R"
+                                transform="translate(1888 -971)"
+                                xlinkHref="#S"
                             />
                         </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>
+                <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>
     <p
-        className="c2"
+        className="c3"
     >
         Tags
     </p>
diff --git a/packages/my-joy-beta/src/containers/create-instance/cns.js b/packages/my-joy-beta/src/containers/create-instance/cns.js
new file mode 100644
index 00000000..b62ac833
--- /dev/null
+++ b/packages/my-joy-beta/src/containers/create-instance/cns.js
@@ -0,0 +1,241 @@
+import React, { Fragment } from 'react';
+import { compose } from 'react-apollo';
+import ReduxForm from 'declarative-redux-form';
+import { destroy } from 'redux-form';
+import { connect } from 'react-redux';
+import get from 'lodash.get';
+import { Margin, Padding } from 'styled-components-spacing';
+import Flex from 'styled-flex-component';
+import { set } from 'react-redux-values';
+import remcalc from 'remcalc';
+
+import {
+  CnsIcon,
+  P,
+  Card,
+  H3,
+  Button,
+  FormGroup,
+  FormLabel,
+  Toggle,
+  Divider,
+  TagList
+} from 'joyent-ui-toolkit';
+
+import {
+  Hostname,
+  Header,
+  AddServiceForm,
+  HostnamesHeader
+} from '@components/create-instance/cns';
+import Title from '@components/create-instance/title';
+import Tag from '@components/instances/tags';
+
+const CNS_FORM = 'create-instance-cns';
+
+const CNSContainer = ({
+  submitted,
+  expanded,
+  proceeded,
+  serviceNames,
+  instanceName,
+  cnsEnabled = true,
+  hostnames = [],
+  handleNext,
+  handleEdit,
+  handleToggleCnsEnabled,
+  handleAddService,
+  handleRemoveService
+}) => (
+  <Fragment>
+    <Title icon={<CnsIcon />}>Container Name Service</Title>
+    {expanded ? (
+      <Margin bottom={3}>
+        <P>
+          Triton CNS is used to automatically update hostnames for your
+          instances*. You can serve multiple instances (with multiple IP
+          addresses) under the same hostname by matching the CNS service names.{' '}
+          <a
+            href="https://docs.joyent.com/private-cloud/install/cns"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read the docs
+          </a>
+        </P>
+      </Margin>
+    ) : null}
+    {expanded && cnsEnabled ? (
+      <Card>
+        <Padding all={4} bottom={0}>
+          <Header />
+          <Flex column>
+            {hostnames
+              .filter(({ service }) => !service)
+              .map(({ value, ...hostname }) => (
+                <Hostname key={value} value={value} {...hostname} />
+              ))}
+          </Flex>
+          <Divider height={remcalc(1)} />
+          <Margin top={4}>
+            {serviceNames.length ? (
+              <Margin>
+                <FormLabel>Existing CNS service name(s)</FormLabel>
+                <Margin top={0.5}>
+                  <TagList>
+                    {serviceNames.map((value, index) => (
+                      <Tag
+                        active
+                        key={index}
+                        value={value}
+                        onRemoveClick={() => handleRemoveService(index)}
+                      />
+                    ))}
+                  </TagList>
+                </Margin>
+              </Margin>
+            ) : null}
+            <HostnamesHeader />
+            <ReduxForm
+              form={`${CNS_FORM}-new-service`}
+              destroyOnUnmount={false}
+              forceUnregisterOnUnmount={true}
+              onSubmit={handleAddService}
+            >
+              {props => <AddServiceForm {...props} />}
+            </ReduxForm>
+            <Margin top={4}>
+              <Flex column>
+                {hostnames
+                  .filter(({ service }) => service)
+                  .map(({ value, ...hostname }) => (
+                    <Hostname key={value} value={value} {...hostname} />
+                  ))}
+              </Flex>
+            </Margin>
+          </Margin>
+        </Padding>
+      </Card>
+    ) : null}
+    {expanded ? (
+      <Fragment>
+        <Margin bottom={4} top={4}>
+          <FormGroup name="cns-enabled">
+            <Flex alignCenter>
+              <FormLabel>Disabled CNS</FormLabel>
+              <Toggle checked={cnsEnabled} onChange={handleToggleCnsEnabled}>
+                Enabled CNS
+              </Toggle>
+            </Flex>
+          </FormGroup>
+        </Margin>
+        <Margin bottom={4}>
+          <P>
+            *All hostnames are indicative and will be confirmed after
+            deployment.
+          </P>
+        </Margin>
+        <Button type="button" onClick={handleNext}>
+          Next
+        </Button>
+      </Fragment>
+    ) : null}
+    {proceeded && !expanded ? (
+      <Fragment>
+        <Margin bottom={4}>
+          <H3>{cnsEnabled ? 'CNS Enabled' : 'CNS Not Enabled'}</H3>
+        </Margin>
+        <FormLabel>Existing CNS service name(s)</FormLabel>
+        <Margin top={0.5}>
+          <TagList>
+            {serviceNames.map((value, index) => (
+              <Tag key={index} value={value} />
+            ))}
+          </TagList>
+        </Margin>
+        <Button type="button" onClick={handleEdit} secondary>
+          Edit
+        </Button>
+      </Fragment>
+    ) : null}
+  </Fragment>
+);
+
+export default compose(
+  connect(({ form, values }, ownProps) => {
+    const instanceName = get(
+      form,
+      'create-instance-name.values.name',
+      '<instance-name>'
+    );
+    const serviceNames = get(values, `${CNS_FORM}-services`, []);
+
+    // REPLACE WITH USER ID AND DATA CENTER
+    const userID = '10703e3c-ada6-478d-c757-e5bcad0ea74c';
+    const dataCenter = 'us-east-1';
+
+    const hostnames = [
+      {
+        values: [`${instanceName}.inst.${userID}.${dataCenter}.triton.zone`],
+        public: true
+      },
+      {
+        values: [`${instanceName}.inst.${userID}.${dataCenter}.cns.joyent.com`]
+      },
+      {
+        values: [],
+        public: true,
+        service: true
+      },
+      {
+        values: [],
+        service: true
+      }
+    ];
+
+    hostnames.map(hostname => {
+      if (!hostname.service) {
+        return hostname;
+      }
+
+      return serviceNames.map(name => {
+        const postfix = hostname.public ? '.triton.zone' : '.cns.joyent.com';
+        const value = `${name}.svc.${userID}.${dataCenter}${postfix}`;
+        hostname.values.push(value);
+      });
+    });
+
+    return {
+      cnsEnabled: get(values, `${CNS_FORM}-enabled`, true),
+      instanceName,
+      proceeded: get(values, `${CNS_FORM}-proceeded`, false),
+      hostnames,
+      serviceNames
+    };
+  }),
+  connect(null, (dispatch, { history, cnsEnabled, serviceNames = [] }) => ({
+    handleNext: () => {
+      dispatch(set({ name: `${CNS_FORM}-proceeded`, value: true }));
+      return history.push(`/instances/~create/affinity`);
+    },
+    handleEdit: () => history.push(`/instances/~create/cns`),
+    handleToggleCnsEnabled: ({ target }) =>
+      dispatch(set({ name: `${CNS_FORM}-enabled`, value: !cnsEnabled })),
+    handleAddService: ({ name }) => {
+      dispatch([
+        destroy(`${CNS_FORM}-new-service`),
+        set({
+          name: `${CNS_FORM}-services`,
+          value: serviceNames.concat(name.toLowerCase())
+        })
+      ]);
+    },
+    handleRemoveService: index => {
+      serviceNames.splice(index, 1);
+
+      return dispatch(
+        set({ name: `${CNS_FORM}-services`, value: serviceNames.slice() })
+      );
+    }
+  }))
+)(CNSContainer);
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 7523ace2..f5e2124b 100644
--- a/packages/my-joy-beta/src/containers/create-instance/index.js
+++ b/packages/my-joy-beta/src/containers/create-instance/index.js
@@ -9,6 +9,7 @@ import Metadata from '@containers/create-instance/metadata';
 import Tags from '@containers/create-instance/tags';
 import Package from '@containers/create-instance/package';
 import Networks from '@containers/create-instance/networks';
+import CNS from '@containers/create-instance/cns';
 
 export default ({ step, ...props }) => (
   <ViewContainer>
@@ -33,5 +34,8 @@ export default ({ step, ...props }) => (
     <Margin bottom={4}>
       <Networks {...props} expanded={step === 'networks'} />
     </Margin>
+    <Margin bottom={4}>
+      <CNS {...props} expanded={step === 'cns'} />
+    </Margin>
   </ViewContainer>
 );
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
index 5de3c76e..0271a868 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -389,7 +389,7 @@ exports[`renders <List /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -1395,7 +1395,7 @@ exports[`renders <List error /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -2456,7 +2456,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -4534,7 +4534,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -7155,7 +7155,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -9985,7 +9985,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -11891,7 +11891,7 @@ exports[`renders <List loading /> without throwing 1`] = `
   color: rgb(250,250,250);
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
index cea65359..78b6b157 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -278,7 +278,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -1318,7 +1318,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -1442,7 +1442,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -2226,7 +2226,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -2857,7 +2857,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   color: rgb(250,250,250);
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -4115,7 +4115,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -4239,7 +4239,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
index dad0412e..e73de129 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -1558,7 +1558,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -3930,7 +3930,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
index 3915dafd..4445182d 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -278,7 +278,7 @@ exports[`renders <Tags /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -1327,7 +1327,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -2191,7 +2191,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -3242,7 +3242,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -4742,7 +4742,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -5618,7 +5618,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -6194,7 +6194,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   color: rgb(250,250,250);
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -6719,7 +6719,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -6992,9 +6992,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
           className="c20"
           onClick={undefined}
         >
-          name1
-          : 
-          value1
+          name1: value1
         </li>
       </div>
     </div>
@@ -7008,9 +7006,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
           className="c20"
           onClick={undefined}
         >
-          name2
-          : 
-          value2
+          name2: value2
         </li>
       </div>
     </div>
@@ -7024,9 +7020,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
           className="c20"
           onClick={undefined}
         >
-          name3
-          : 
-          value3
+          name3: value3
         </li>
       </div>
     </div>
diff --git a/packages/ui-toolkit/src/base/global.js b/packages/ui-toolkit/src/base/global.js
index 25d77030..f9bd4437 100644
--- a/packages/ui-toolkit/src/base/global.js
+++ b/packages/ui-toolkit/src/base/global.js
@@ -3,6 +3,7 @@ import remcalc from 'remcalc';
 
 export default ({ theme }) => css`
   @import url('${theme.font.href()}');
+  @import url('${theme.monoSpaceFont.href()}');
 
   [hidden] {
     display: none;
@@ -10,9 +11,8 @@ export default ({ theme }) => css`
 
   html, body {
     font-display: optional;
-    font-family: ${
-      theme.font.family
-    }, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
+    font-family: ${theme.font
+      .family}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
     font-weight: ${theme.font.weight.normal};
   }
 
diff --git a/packages/ui-toolkit/src/form/base/input.js b/packages/ui-toolkit/src/form/base/input.js
index 9767ed34..400d4724 100644
--- a/packages/ui-toolkit/src/form/base/input.js
+++ b/packages/ui-toolkit/src/form/base/input.js
@@ -92,8 +92,28 @@ const style = css`
     width: ${remcalc(120)}
   `};
 
+  ${is('monospace')`
+    font-family: ${props => props.theme.monoSpaceFont.family};
+
+      &:disabled {
+        color: ${props => props.theme.text};
+
+        ::-webkit-input-placeholder {
+          color: ${props => props.theme.text};
+        }
+
+        ::-moz-placeholder {
+          color: ${props => props.theme.text};
+        }
+
+        :-ms-input-placeholder {
+          color: ${props => props.theme.text};
+        }
+      }
+  `};
+
   ${is('fluid')`
-    max-width: 100%;
+    width: 100%;
   `};
 
   ${is('xSmall')`
diff --git a/packages/ui-toolkit/src/tags/item.js b/packages/ui-toolkit/src/tags/item.js
index 382ffe01..446df782 100644
--- a/packages/ui-toolkit/src/tags/item.js
+++ b/packages/ui-toolkit/src/tags/item.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 import remcalc from 'remcalc';
 import is from 'styled-is';
 
@@ -30,16 +30,29 @@ const Tag = styled.li`
   align-items: center;
   flex-grow: 1;
 
+  ${is('active')`
+      border: ${remcalc(1)} solid ${props => props.theme.primaryActive};
+      background: rgba(59, 70, 204, .1)
+  `};
+
   ${is('onClick')`
     cursor: pointer;
   `};
 `;
 
-export default ({ children, onRemoveClick, ...rest }) => (
-  <Container>
-    <Tag {...rest}>
-      {children}
-      {onRemoveClick ? <CloseIcon disabled onClick={onRemoveClick} /> : null}
-    </Tag>
-  </Container>
+export default withTheme(
+  ({ theme, children, active, onRemoveClick, ...rest }) => (
+    <Container>
+      <Tag active={active} {...rest}>
+        {children}
+        {onRemoveClick ? (
+          <CloseIcon
+            fill={active ? theme.primaryActive : theme.text}
+            disabled
+            onClick={onRemoveClick}
+          />
+        ) : null}
+      </Tag>
+    </Container>
+  )
 );
diff --git a/packages/ui-toolkit/src/text/small.js b/packages/ui-toolkit/src/text/small.js
index 728f339b..4ae227a5 100644
--- a/packages/ui-toolkit/src/text/small.js
+++ b/packages/ui-toolkit/src/text/small.js
@@ -1,10 +1,18 @@
 import { Small } from 'normalized-styled-components';
 import remcalc from 'remcalc';
+import is, { isNot } from 'styled-is';
 
 export default Small.extend`
   color: ${props => props.theme.text};
 
   line-height: ${remcalc(18)};
   font-size: ${remcalc(13)};
-  padding-bottom: ${remcalc(12)};
+
+  ${isNot('noMargin')`
+    padding-bottom: ${remcalc(12)};
+  `};
+
+  ${is('bold')`
+    font-weight: ${props => props.theme.font.weight.semibold};
+  `};
 `;
diff --git a/packages/ui-toolkit/src/theme/index.js b/packages/ui-toolkit/src/theme/index.js
index 5538a67f..a2251fe6 100644
--- a/packages/ui-toolkit/src/theme/index.js
+++ b/packages/ui-toolkit/src/theme/index.js
@@ -87,9 +87,8 @@ export const font = {
   textMuted: base.secondary,
   family: '"Libre Franklin"',
   href: () =>
-    `${document.location.protocol}//${
-      document.location.host
-    }/fonts/css?family=Libre+Franklin:400,500,600`,
+    `${document.location.protocol}//${document.location
+      .host}/fonts/css?family=Libre+Franklin:400,500,600`,
   weight: {
     semibold: 600,
     medium: 500,
@@ -97,6 +96,19 @@ export const font = {
   }
 };
 
+export const monoSpaceFont = {
+  semibold: base.secondary,
+  regular: base.text,
+  abbrBorderColor: base.secondary,
+  textMuted: base.secondary,
+  family: '"Roboto Mono"',
+  href: () => 'https://fonts.googleapis.com/css?family=Roboto+Mono:400,700',
+  weight: {
+    bold: 700,
+    normal: 400
+  }
+};
+
 /** ******************************** INACTIVE ********************************* */
 
 export const inactive = {
@@ -139,6 +151,7 @@ export const shadows = {
 export default {
   ...base,
   font,
+  monoSpaceFont,
   inactive,
   notifications,
   inputError,