diff --git a/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap b/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap
index f86182a6..0de07777 100644
--- a/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap
@@ -28,6 +28,10 @@ exports[`renders <Menu links /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c6 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c1 {
   margin-right: auto;
   margin-left: auto;
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
index 917ca89f..aa3aa097 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -61,6 +61,10 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c19 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -779,6 +783,10 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c19 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -1497,6 +1505,10 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c19 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -2215,6 +2227,10 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c19 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -2933,6 +2949,10 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c19 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -3651,6 +3671,10 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   text-decoration: none;
 }
 
+.c19 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -4363,6 +4387,10 @@ exports[`renders <Item /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c11 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c12 {
   width: 0.75rem;
   height: 0.75rem;
@@ -4891,6 +4919,10 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c11 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c12 {
   width: 0.75rem;
   height: 0.75rem;
@@ -5421,6 +5453,10 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c11 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c12 {
   width: 0.75rem;
   height: 0.75rem;
@@ -5949,6 +5985,10 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c11 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c13 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
index 7d8b0f06..a553291c 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -240,6 +240,10 @@ exports[`renders <Summary /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c36 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c29 {
   min-width: 7.5rem;
 }
@@ -2090,6 +2094,10 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c35 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c29 {
   min-width: 7.5rem;
 }
@@ -4017,6 +4025,10 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   text-decoration: none;
 }
 
+.c35 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c29 {
   min-width: 7.5rem;
 }
@@ -5940,6 +5952,10 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-decoration: none;
 }
 
+.c39 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c32 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
@@ -7859,6 +7875,10 @@ exports[`renders <Summary state /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c35 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c29 {
   min-width: 7.5rem;
 }
@@ -9548,6 +9568,10 @@ exports[`renders <Summary state /> without throwing 2`] = `
   text-decoration: none;
 }
 
+.c35 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c29 {
   min-width: 7.5rem;
 }
@@ -11237,6 +11261,10 @@ exports[`renders <Summary state /> without throwing 3`] = `
   text-decoration: none;
 }
 
+.c36 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c29 {
   min-width: 7.5rem;
 }
diff --git a/consoles/my-joy-instances/src/components/instances/description.js b/consoles/my-joy-instances/src/components/instances/description.js
index adfded0d..23e32767 100644
--- a/consoles/my-joy-instances/src/components/instances/description.js
+++ b/consoles/my-joy-instances/src/components/instances/description.js
@@ -2,6 +2,8 @@ import React from 'react';
 import { P as BaseP } from 'joyent-ui-toolkit';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import styled from 'styled-components';
+import { Anchor } from 'joyent-ui-toolkit';
+import { Link } from 'react-router-dom';
 
 const P = styled(BaseP)`
   font-weight: 200;
@@ -13,9 +15,11 @@ export default ({ href = '', children }) => (
       <P>
         {children}{' '}
         {href ? (
-          <a target="__blank" href={href} rel="noopener noreferrer">
-            Read the docs
-          </a>
+          <Anchor>
+            <Link target="__blank" to={href} rel="noopener noreferrer">
+              Read the docs
+            </Link>
+          </Anchor>
         ) : null}
       </P>
     </Col>
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
index d57745f9..a090abe5 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
@@ -35,7 +35,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   display: block;
 }
 
-.c7 {
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -49,40 +49,46 @@ exports[`renders <Cns /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c11 {
+.c14 {
   margin-bottom: 1.875rem;
 }
 
-.c14 {
+.c17 {
   margin-top: 0.75rem;
 }
 
-.c19 {
+.c22 {
   margin-top: 1.875rem;
 }
 
-.c20 {
+.c23 {
   margin-top: 1.875rem;
   margin-bottom: 1.875rem;
 }
 
-.c27 {
+.c30 {
   margin-top: 0.1875rem;
 }
 
-.c29 {
+.c32 {
   margin-left: 0.75rem;
 }
 
-.c35 {
+.c38 {
   margin-left: 0.375rem;
 }
 
-.c10 {
+.c13 {
   padding: 1.875rem;
 }
 
-.c33 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c36 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -94,21 +100,39 @@ exports[`renders <Cns /> without throwing 1`] = `
   appearance: button;
 }
 
-.c33::-moz-focus-inner,
-.c33[type='button']::-moz-focus-inner,
-.c33[type='reset']::-moz-focus-inner,
-.c33[type='submit']::-moz-focus-inner {
+.c36::-moz-focus-inner,
+.c36[type='button']::-moz-focus-inner,
+.c36[type='reset']::-moz-focus-inner,
+.c36[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c33:-moz-focusring,
-.c33[type='button']:-moz-focusring,
-.c33[type='reset']:-moz-focusring,
-.c33[type='submit']:-moz-focusring {
+.c36:-moz-focusring,
+.c36[type='button']:-moz-focusring,
+.c36[type='reset']:-moz-focusring,
+.c36[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -116,15 +140,15 @@ exports[`renders <Cns /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c32 {
+.c35 {
   min-width: 7.5rem;
 }
 
-.c31 {
+.c34 {
   display: inline-block;
 }
 
-.c30 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -163,7 +187,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c30:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -171,26 +195,26 @@ exports[`renders <Cns /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c30:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c30:active,
-.c30:active:hover,
-.c30:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c30[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c26 {
+.c29 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -207,7 +231,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c13 {
+.c16 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -215,12 +239,12 @@ exports[`renders <Cns /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c18 {
+.c21 {
   height: 1px;
   background-color: rgb(216,216,216);
 }
 
-.c16 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -243,7 +267,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   flex-direction: column;
 }
 
-.c21 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -270,7 +294,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c23 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -290,7 +314,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c34 {
+.c37 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -314,7 +338,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   align-items: center;
 }
 
-.c22 {
+.c25 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -331,7 +355,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   display: block;
 }
 
-.c8 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -353,7 +377,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c9 {
+.c12 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -369,7 +393,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c24 {
+.c27 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -381,7 +405,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c28 {
+.c31 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -403,52 +427,52 @@ exports[`renders <Cns /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c28:focus {
+.c31:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c28::-webkit-input-placeholder {
+.c31::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28::-moz-placeholder {
+.c31::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:-ms-input-placeholder {
+.c31:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:invalid {
+.c31:invalid {
   box-shadow: none;
 }
 
-.c28:disabled {
+.c31:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c28:disabled::-webkit-input-placeholder {
+.c31:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:disabled::-moz-placeholder {
+.c31:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:disabled:-ms-input-placeholder {
+.c31:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c25 {
+.c28 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c36 {
+.c39 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -461,27 +485,27 @@ exports[`renders <Cns /> without throwing 1`] = `
   align-items: center;
 }
 
-.c38 {
+.c41 {
   display: none;
 }
 
-.c38:checked + label {
+.c41:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c38:checked + label:after {
+.c41:checked + label:after {
   -webkit-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c38:checked + label:active {
+.c41:checked + label:active {
   box-shadow: none;
 }
 
-.c39 {
+.c42 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -500,24 +524,24 @@ exports[`renders <Cns /> without throwing 1`] = `
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c39::selection {
+.c42::selection {
   background: none;
 }
 
-.c39:active {
+.c42:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c39:hover {
+.c42:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c39:hover:after {
+.c42:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c39:after,
-.c39:before {
+.c42:after,
+.c42:before {
   position: relative;
   display: block;
   content: '';
@@ -525,7 +549,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   height: 100%;
 }
 
-.c39:after {
+.c42:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -537,11 +561,11 @@ exports[`renders <Cns /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c39:active {
+.c42:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c39:before {
+.c42:before {
   display: none;
 }
 
@@ -549,19 +573,19 @@ exports[`renders <Cns /> without throwing 1`] = `
   font-weight: 200;
 }
 
-.c12 {
-  margin: 0;
-}
-
 .c15 {
   margin: 0;
 }
 
-.c37 {
+.c18 {
+  margin: 0;
+}
+
+.c40 {
   margin: 0 6px;
 }
 
-.c17 {
+.c20 {
   margin-left: 0;
   margin-right: 0;
 }
@@ -603,7 +627,7 @@ exports[`renders <Cns /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -612,7 +636,7 @@ exports[`renders <Cns /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -621,7 +645,7 @@ exports[`renders <Cns /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 75%;
     -ms-flex-preferred-size: 75%;
     flex-basis: 75%;
@@ -654,11 +678,15 @@ exports[`renders <Cns /> without throwing 1`] = `
           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"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
           >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/private-cloud/install/cns"
+            >
+              Read the docs
+            </a>
           </a>
         </p>
       </div>
@@ -668,66 +696,66 @@ exports[`renders <Cns /> without throwing 1`] = `
     className="c3"
   >
     <div
-      className="c7"
+      className="c10"
     >
       <div
-        className="c8"
+        className="c11"
         disabled={false}
         name="card"
       >
         <div
-          className="c9 c8"
+          className="c12 c11"
           disabled={false}
           name="card-outlet"
         >
           <div
-            className="c10"
+            className="c13"
           >
             <div
-              className="c11"
+              className="c14"
             >
               <h3
-                className="c12 c13"
+                className="c15 c16"
               >
                 CNS Default Hostnames
               </h3>
               <div
-                className="c14"
+                className="c17"
               >
                 <p
-                  className="c15 c6"
+                  className="c18 c6"
                 >
                   Default hostnames are automatically generated from both the instance name and any attached networks.
                 </p>
               </div>
             </div>
             <div
-              className="c16"
+              className="c19"
             />
             <div
-              className="c14"
+              className="c17"
             >
               <div
-                className="c17 c18 c3"
+                className="c20 c21 c3"
                 height="0.0625rem"
               />
             </div>
             <div
-              className="c19"
+              className="c22"
             >
               <div
-                className="c20"
+                className="c23"
               >
                 <h3
-                  className="c12 c13"
+                  className="c15 c16"
                 >
                   CNS Service hostnames
                 </h3>
                 <div
-                  className="c14"
+                  className="c17"
                 >
                   <p
-                    className="c15 c6"
+                    className="c18 c6"
                   >
                     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>
@@ -737,33 +765,33 @@ exports[`renders <Cns /> without throwing 1`] = `
                 onSubmit={undefined}
               >
                 <div
-                  className="c21"
+                  className="c24"
                   wrap={true}
                 >
                   <div
-                    className="c22"
+                    className="c25"
                   >
                     <div
-                      className="c23"
+                      className="c26"
                     >
                       <div
-                        className="c24"
+                        className="c27"
                         id="cns-service-name-input"
                         name="name"
                         role="group"
                         style={undefined}
                       >
                         <label
-                          className="c25 c26"
+                          className="c28 c29"
                           htmlFor="cns-service-name-input"
                         >
                           Attach to new CNS service name
                         </label>
                         <div
-                          className="c27"
+                          className="c30"
                         >
                           <input
-                            className="c28"
+                            className="c31"
                             disabled={false}
                             id="cns-service-name-input"
                             onBlur={null}
@@ -774,13 +802,13 @@ exports[`renders <Cns /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c22"
+                    className="c25"
                   >
                     <div
-                      className="c29"
+                      className="c32"
                     >
                       <button
-                        className="c30 c31 c32 c33"
+                        className="c33 c34 c35 c36"
                         data-ui-button="true"
                         disabled={undefined}
                         href=""
@@ -798,36 +826,36 @@ exports[`renders <Cns /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c19"
+        className="c22"
       >
         <div
           className="c2"
         >
           <div
-            className="c24"
+            className="c27"
             name="cns-enabled"
             role="group"
             style={undefined}
           >
             <div
-              className="c34"
+              className="c37"
             >
               <label
-                className="c25 c26"
+                className="c28 c29"
                 disabled={false}
                 htmlFor="l"
               >
                 Disabled CNS
               </label>
               <div
-                className="c35"
+                className="c38"
               >
                 <div
-                  className="c36"
+                  className="c39"
                 >
                   <input
                     checked={true}
-                    className="c37 c38"
+                    className="c40 c41"
                     disabled={false}
                     id="l"
                     onBlur={undefined}
@@ -836,7 +864,7 @@ exports[`renders <Cns /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c37 c39"
+                    className="c40 c42"
                     disabled={false}
                     htmlFor="l"
                     id="l"
@@ -845,7 +873,7 @@ exports[`renders <Cns /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c37 c25 c26"
+                    className="c40 c28 c29"
                     disabled={false}
                     htmlFor="l"
                     id="l"
@@ -901,7 +929,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   display: block;
 }
 
-.c7 {
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -915,18 +943,42 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c11 {
+.c14 {
   margin-top: 1.875rem;
 }
 
-.c16 {
+.c19 {
   margin-left: 0.375rem;
 }
 
-.c10 {
+.c13 {
   padding: 1.875rem;
 }
 
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -934,7 +986,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c15 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -951,7 +1003,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c13 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -975,7 +1027,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   align-items: center;
 }
 
-.c8 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -997,7 +1049,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c9 {
+.c12 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1013,7 +1065,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c12 {
+.c15 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -1025,13 +1077,13 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c14 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c17 {
+.c20 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -1044,27 +1096,27 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   align-items: center;
 }
 
-.c19 {
+.c22 {
   display: none;
 }
 
-.c19:checked + label {
+.c22:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c19:checked + label:after {
+.c22:checked + label:after {
   -webkit-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c19:checked + label:active {
+.c22:checked + label:active {
   box-shadow: none;
 }
 
-.c20 {
+.c23 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -1083,24 +1135,24 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c20::selection {
+.c23::selection {
   background: none;
 }
 
-.c20:active {
+.c23:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c20:hover {
+.c23:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c20:hover:after {
+.c23:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c20:after,
-.c20:before {
+.c23:after,
+.c23:before {
   position: relative;
   display: block;
   content: '';
@@ -1108,7 +1160,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   height: 100%;
 }
 
-.c20:after {
+.c23:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -1120,11 +1172,11 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c20:active {
+.c23:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c20:before {
+.c23:before {
   display: none;
 }
 
@@ -1132,7 +1184,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   font-weight: 200;
 }
 
-.c18 {
+.c21 {
   margin: 0 6px;
 }
 
@@ -1173,7 +1225,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1182,7 +1234,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1191,7 +1243,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 75%;
     -ms-flex-preferred-size: 75%;
     flex-basis: 75%;
@@ -1224,11 +1276,15 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
           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"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
           >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/private-cloud/install/cns"
+            >
+              Read the docs
+            </a>
           </a>
         </p>
       </div>
@@ -1238,54 +1294,54 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
     className="c3"
   >
     <div
-      className="c7"
+      className="c10"
     >
       <div
-        className="c8"
+        className="c11"
         disabled={false}
         name="card"
       >
         <div
-          className="c9 c8"
+          className="c12 c11"
           disabled={false}
           name="card-outlet"
         >
           <div
-            className="c10"
+            className="c13"
           />
         </div>
       </div>
       <div
-        className="c11"
+        className="c14"
       >
         <div
           className="c2"
         >
           <div
-            className="c12"
+            className="c15"
             name="cns-enabled"
             role="group"
             style={undefined}
           >
             <div
-              className="c13"
+              className="c16"
             >
               <label
-                className="c14 c15"
+                className="c17 c18"
                 disabled={false}
                 htmlFor="r"
               >
                 Disabled CNS
               </label>
               <div
-                className="c16"
+                className="c19"
               >
                 <div
-                  className="c17"
+                  className="c20"
                 >
                   <input
                     checked={false}
-                    className="c18 c19"
+                    className="c21 c22"
                     disabled={false}
                     id="r"
                     onBlur={undefined}
@@ -1294,7 +1350,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
                   />
                   <label
                     checked={false}
-                    className="c18 c20"
+                    className="c21 c23"
                     disabled={false}
                     htmlFor="r"
                     id="r"
@@ -1303,7 +1359,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
                   />
                   <label
                     checked={false}
-                    className="c18 c14 c15"
+                    className="c21 c17 c18"
                     disabled={false}
                     htmlFor="r"
                     id="r"
@@ -1359,7 +1415,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   display: block;
 }
 
-.c7 {
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1369,7 +1425,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   display: block;
 }
 
-.c25 {
+.c28 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1383,62 +1439,68 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c11 {
+.c14 {
   margin-bottom: 1.875rem;
 }
 
-.c14 {
+.c17 {
   margin-top: 0.75rem;
 }
 
-.c32 {
+.c35 {
   margin-top: 1.875rem;
 }
 
-.c33 {
+.c36 {
   margin-top: 1.875rem;
   margin-bottom: 1.875rem;
 }
 
-.c24 {
+.c27 {
   margin-top: 0.1875rem;
 }
 
-.c39 {
+.c42 {
   margin-left: 0.75rem;
 }
 
-.c47 {
+.c50 {
   margin-left: 0.375rem;
 }
 
-.c22 {
+.c25 {
   margin-right: 0.375rem;
   margin-bottom: 0.1875rem;
 }
 
-.c26 {
+.c29 {
   margin-bottom: 0.1875rem;
 }
 
-.c44 {
+.c47 {
   margin-top: 0.1875rem;
   margin-bottom: 0.375rem;
 }
 
-.c45 {
+.c48 {
   margin-bottom: 0rem;
 }
 
-.c10 {
+.c13 {
   padding: 1.875rem;
 }
 
-.c20 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c23 {
   font-size: 80%;
 }
 
-.c43 {
+.c46 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1450,21 +1512,39 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   appearance: button;
 }
 
-.c43::-moz-focus-inner,
-.c43[type='button']::-moz-focus-inner,
-.c43[type='reset']::-moz-focus-inner,
-.c43[type='submit']::-moz-focus-inner {
+.c46::-moz-focus-inner,
+.c46[type='button']::-moz-focus-inner,
+.c46[type='reset']::-moz-focus-inner,
+.c46[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c43:-moz-focusring,
-.c43[type='button']:-moz-focusring,
-.c43[type='reset']:-moz-focusring,
-.c43[type='submit']:-moz-focusring {
+.c46:-moz-focusring,
+.c46[type='button']:-moz-focusring,
+.c46[type='reset']:-moz-focusring,
+.c46[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -1472,15 +1552,15 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c42 {
+.c45 {
   min-width: 7.5rem;
 }
 
-.c41 {
+.c44 {
   display: inline-block;
 }
 
-.c40 {
+.c43 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1519,7 +1599,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c40:focus {
+.c43:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1527,26 +1607,26 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c40:hover {
+.c43:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c40:active,
-.c40:active:hover,
-.c40:active:focus {
+.c43:active,
+.c43:active:hover,
+.c43:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c40[disabled] {
+.c43[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c37 {
+.c40 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -1563,7 +1643,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c13 {
+.c16 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -1571,7 +1651,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c19 {
+.c22 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   color: rgb(73,73,73);
   line-height: 1.125rem;
@@ -1579,19 +1659,19 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   font-weight: 600;
 }
 
-.c23 {
+.c26 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   color: rgb(73,73,73);
   line-height: 1.125rem;
   font-size: 0.8125rem;
 }
 
-.c31 {
+.c34 {
   height: 1px;
   background-color: rgb(216,216,216);
 }
 
-.c16 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1614,7 +1694,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   flex-direction: column;
 }
 
-.c34 {
+.c37 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1641,7 +1721,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c17 {
+.c20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1661,7 +1741,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c46 {
+.c49 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1685,7 +1765,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   align-items: center;
 }
 
-.c21 {
+.c24 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1702,7 +1782,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   display: block;
 }
 
-.c8 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1724,7 +1804,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c9 {
+.c12 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1740,7 +1820,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c35 {
+.c38 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -1752,7 +1832,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c38 {
+.c41 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1774,46 +1854,46 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c38:focus {
+.c41:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c38::-webkit-input-placeholder {
+.c41::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38::-moz-placeholder {
+.c41::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38:-ms-input-placeholder {
+.c41:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38:invalid {
+.c41:invalid {
   box-shadow: none;
 }
 
-.c38:disabled {
+.c41:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c38:disabled::-webkit-input-placeholder {
+.c41:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38:disabled::-moz-placeholder {
+.c41:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38:disabled:-ms-input-placeholder {
+.c41:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28 {
+.c31 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1822,7 +1902,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
-  color: rgb(250,250,250);
+  color: rgb(73,73,73);
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -1831,88 +1911,73 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
 }
 
-.c28:focus {
+.c31:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c28::-webkit-input-placeholder {
+.c31::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28::-moz-placeholder {
+.c31::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:-ms-input-placeholder {
+.c31:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:invalid {
+.c31:invalid {
   box-shadow: none;
 }
 
-.c28::-webkit-input-placeholder {
-  color: rgb(216,216,216);
-}
-
-.c28::-moz-placeholder {
-  color: rgb(216,216,216);
-}
-
-.c28:-ms-input-placeholder {
-  color: rgb(216,216,216);
-}
-
-.c28:disabled {
+.c31:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c28:disabled::-webkit-input-placeholder {
+.c31:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:disabled::-moz-placeholder {
+.c31:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:disabled:-ms-input-placeholder {
+.c31:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:disabled {
+.c31:disabled {
   color: rgb(73,73,73);
 }
 
-.c28:disabled::-webkit-input-placeholder {
+.c31:disabled::-webkit-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c28:disabled::-moz-placeholder {
+.c31:disabled::-moz-placeholder {
   color: rgb(73,73,73);
 }
 
-.c28:disabled:-ms-input-placeholder {
+.c31:disabled:-ms-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c36 {
+.c39 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c48 {
+.c51 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -1925,27 +1990,27 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   align-items: center;
 }
 
-.c50 {
+.c53 {
   display: none;
 }
 
-.c50:checked + label {
+.c53:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c50:checked + label:after {
+.c53:checked + label:after {
   -webkit-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c50:checked + label:active {
+.c53:checked + label:active {
   box-shadow: none;
 }
 
-.c51 {
+.c54 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -1964,24 +2029,24 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c51::selection {
+.c54::selection {
   background: none;
 }
 
-.c51:active {
+.c54:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c51:hover {
+.c54:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c51:hover:after {
+.c54:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c51:after,
-.c51:before {
+.c54:after,
+.c54:before {
   position: relative;
   display: block;
   content: '';
@@ -1989,7 +2054,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   height: 100%;
 }
 
-.c51:after {
+.c54:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -2001,15 +2066,15 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c51:active {
+.c54:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c51:before {
+.c54:before {
   display: none;
 }
 
-.c27 {
+.c30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2020,16 +2085,16 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   align-items: center;
 }
 
-.c27 input {
+.c30 input {
   padding-right: 1.875rem;
 }
 
-.c27 div {
+.c30 div {
   position: relative;
   left: -1.625rem;
 }
 
-.c29 {
+.c32 {
   cursor: pointer;
 }
 
@@ -2037,25 +2102,25 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   font-weight: 200;
 }
 
-.c18 {
+.c21 {
   padding-right: 0.75rem;
   margin-right: 0.75rem;
   border-right: 0.0625rem solid rgb(216,216,216);
 }
 
-.c12 {
-  margin: 0;
-}
-
 .c15 {
   margin: 0;
 }
 
-.c49 {
+.c18 {
+  margin: 0;
+}
+
+.c52 {
   margin: 0 6px;
 }
 
-.c30 {
+.c33 {
   margin-left: 0;
   margin-right: 0;
 }
@@ -2097,7 +2162,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -2106,7 +2171,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -2115,7 +2180,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 75%;
     -ms-flex-preferred-size: 75%;
     flex-basis: 75%;
@@ -2124,7 +2189,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c28 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -2133,7 +2198,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c25 {
+  .c28 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -2166,11 +2231,15 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
           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"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
           >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/private-cloud/install/cns"
+            >
+              Read the docs
+            </a>
           </a>
         </p>
       </div>
@@ -2180,50 +2249,50 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
     className="c3"
   >
     <div
-      className="c7"
+      className="c10"
     >
       <div
-        className="c8"
+        className="c11"
         disabled={false}
         name="card"
       >
         <div
-          className="c9 c8"
+          className="c12 c11"
           disabled={false}
           name="card-outlet"
         >
           <div
-            className="c10"
+            className="c13"
           >
             <div
-              className="c11"
+              className="c14"
             >
               <h3
-                className="c12 c13"
+                className="c15 c16"
               >
                 CNS Default Hostnames
               </h3>
               <div
-                className="c14"
+                className="c17"
               >
                 <p
-                  className="c15 c6"
+                  className="c18 c6"
                 >
                   Default hostnames are automatically generated from both the instance name and any attached networks.
                 </p>
               </div>
             </div>
             <div
-              className="c16"
+              className="c19"
             >
               <div
                 className="c2"
               >
                 <div
-                  className="c17"
+                  className="c20"
                 >
                   <small
-                    className="c18 c19 c20"
+                    className="c21 c22 c23"
                   >
                     Instance name
                      
@@ -2231,10 +2300,10 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                     
                   </small>
                   <div
-                    className="c21"
+                    className="c24"
                   >
                     <div
-                      className="c22"
+                      className="c25"
                     >
                       <svg
                         height="16"
@@ -2254,34 +2323,33 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c21"
+                    className="c24"
                   >
                     <small
-                      className="c23 c20"
+                      className="c26 c23"
                     >
                       Public
                     </small>
                   </div>
                 </div>
                 <div
-                  className="c24"
+                  className="c27"
                 >
                   <div
                     className="c3"
                   >
                     <div
-                      className="c25"
+                      className="c28"
                     >
                       <div
-                        className="c26"
+                        className="c29"
                       />
                       <div
-                        className="c27"
-                        disabled={true}
+                        className="c30"
                       >
                         <input
-                          className="c28"
-                          disabled={true}
+                          className="c31"
+                          disabled={false}
                           id=""
                           onBlur={null}
                           value="stuffy-stuff"
@@ -2297,7 +2365,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                           }
                         >
                           <svg
-                            className="c29"
+                            className="c32"
                             height="19"
                             innerRef={undefined}
                             onClick={[Function]}
@@ -2325,10 +2393,10 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                 className="c2"
               >
                 <div
-                  className="c17"
+                  className="c20"
                 >
                   <small
-                    className="c18 c19 c20"
+                    className="c21 c22 c23"
                   >
                     Instance name
                      
@@ -2336,10 +2404,10 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                     
                   </small>
                   <div
-                    className="c21"
+                    className="c24"
                   >
                     <div
-                      className="c22"
+                      className="c25"
                     >
                       <svg
                         height="16"
@@ -2360,34 +2428,33 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c21"
+                    className="c24"
                   >
                     <small
-                      className="c23 c20"
+                      className="c26 c23"
                     >
                       Private
                     </small>
                   </div>
                 </div>
                 <div
-                  className="c24"
+                  className="c27"
                 >
                   <div
                     className="c3"
                   >
                     <div
-                      className="c25"
+                      className="c28"
                     >
                       <div
-                        className="c26"
+                        className="c29"
                       />
                       <div
-                        className="c27"
-                        disabled={true}
+                        className="c30"
                       >
                         <input
-                          className="c28"
-                          disabled={true}
+                          className="c31"
+                          disabled={false}
                           id=""
                           onBlur={null}
                           value="stuffy-stuff"
@@ -2403,7 +2470,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                           }
                         >
                           <svg
-                            className="c29"
+                            className="c32"
                             height="19"
                             innerRef={undefined}
                             onClick={[Function]}
@@ -2429,29 +2496,29 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
               </div>
             </div>
             <div
-              className="c14"
+              className="c17"
             >
               <div
-                className="c30 c31 c3"
+                className="c33 c34 c3"
                 height="0.0625rem"
               />
             </div>
             <div
-              className="c32"
+              className="c35"
             >
               <div
-                className="c33"
+                className="c36"
               >
                 <h3
-                  className="c12 c13"
+                  className="c15 c16"
                 >
                   CNS Service hostnames
                 </h3>
                 <div
-                  className="c14"
+                  className="c17"
                 >
                   <p
-                    className="c15 c6"
+                    className="c18 c6"
                   >
                     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>
@@ -2461,33 +2528,33 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                 onSubmit={undefined}
               >
                 <div
-                  className="c34"
+                  className="c37"
                   wrap={true}
                 >
                   <div
-                    className="c21"
+                    className="c24"
                   >
                     <div
-                      className="c17"
+                      className="c20"
                     >
                       <div
-                        className="c35"
+                        className="c38"
                         id="cns-service-name-input"
                         name="name"
                         role="group"
                         style={undefined}
                       >
                         <label
-                          className="c36 c37"
+                          className="c39 c40"
                           htmlFor="cns-service-name-input"
                         >
                           Attach to new CNS service name
                         </label>
                         <div
-                          className="c24"
+                          className="c27"
                         >
                           <input
-                            className="c38"
+                            className="c41"
                             disabled={false}
                             id="cns-service-name-input"
                             onBlur={null}
@@ -2498,13 +2565,13 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c21"
+                    className="c24"
                   >
                     <div
-                      className="c39"
+                      className="c42"
                     >
                       <button
-                        className="c40 c41 c42 c43"
+                        className="c43 c44 c45 c46"
                         data-ui-button="true"
                         disabled={undefined}
                         href=""
@@ -2518,19 +2585,19 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                 </div>
               </form>
               <div
-                className="c32"
+                className="c35"
               >
                 <div
-                  className="c16"
+                  className="c19"
                 >
                   <div
                     className="c2"
                   >
                     <div
-                      className="c17"
+                      className="c20"
                     >
                       <small
-                        className="c18 c19 c20"
+                        className="c21 c22 c23"
                       >
                         CNS service
                          
@@ -2538,10 +2605,10 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                         s
                       </small>
                       <div
-                        className="c21"
+                        className="c24"
                       >
                         <div
-                          className="c22"
+                          className="c25"
                         >
                           <svg
                             height="16"
@@ -2561,34 +2628,33 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                         </div>
                       </div>
                       <div
-                        className="c21"
+                        className="c24"
                       >
                         <small
-                          className="c23 c20"
+                          className="c26 c23"
                         >
                           Public
                         </small>
                       </div>
                     </div>
                     <div
-                      className="c44"
+                      className="c47"
                     >
                       <div
                         className="c3"
                       >
                         <div
-                          className="c25"
+                          className="c28"
                         >
                           <div
-                            className="c26"
+                            className="c29"
                           />
                           <div
-                            className="c27"
-                            disabled={true}
+                            className="c30"
                           >
                             <input
-                              className="c28"
-                              disabled={true}
+                              className="c31"
+                              disabled={false}
                               id=""
                               onBlur={null}
                               value="serbice"
@@ -2604,7 +2670,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                               }
                             >
                               <svg
-                                className="c29"
+                                className="c32"
                                 height="19"
                                 innerRef={undefined}
                                 onClick={[Function]}
@@ -2628,24 +2694,23 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c44"
+                      className="c47"
                     >
                       <div
                         className="c3"
                       >
                         <div
-                          className="c25"
+                          className="c28"
                         >
                           <div
-                            className="c26"
+                            className="c29"
                           />
                           <div
-                            className="c27"
-                            disabled={true}
+                            className="c30"
                           >
                             <input
-                              className="c28"
-                              disabled={true}
+                              className="c31"
+                              disabled={false}
                               id=""
                               onBlur={null}
                               value="dssasda"
@@ -2661,7 +2726,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                               }
                             >
                               <svg
-                                className="c29"
+                                className="c32"
                                 height="19"
                                 innerRef={undefined}
                                 onClick={[Function]}
@@ -2685,24 +2750,23 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c24"
+                      className="c27"
                     >
                       <div
                         className="c3"
                       >
                         <div
-                          className="c25"
+                          className="c28"
                         >
                           <div
-                            className="c26"
+                            className="c29"
                           />
                           <div
-                            className="c27"
-                            disabled={true}
+                            className="c30"
                           >
                             <input
-                              className="c28"
-                              disabled={true}
+                              className="c31"
+                              disabled={false}
                               id=""
                               onBlur={null}
                               value="dsasd"
@@ -2718,7 +2782,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                               }
                             >
                               <svg
-                                className="c29"
+                                className="c32"
                                 height="19"
                                 innerRef={undefined}
                                 onClick={[Function]}
@@ -2743,13 +2807,13 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c45"
+                    className="c48"
                   >
                     <div
-                      className="c17"
+                      className="c20"
                     >
                       <small
-                        className="c18 c19 c20"
+                        className="c21 c22 c23"
                       >
                         CNS service
                          
@@ -2757,10 +2821,10 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                         s
                       </small>
                       <div
-                        className="c21"
+                        className="c24"
                       >
                         <div
-                          className="c22"
+                          className="c25"
                         >
                           <svg
                             height="16"
@@ -2781,34 +2845,33 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                         </div>
                       </div>
                       <div
-                        className="c21"
+                        className="c24"
                       >
                         <small
-                          className="c23 c20"
+                          className="c26 c23"
                         >
                           Private
                         </small>
                       </div>
                     </div>
                     <div
-                      className="c44"
+                      className="c47"
                     >
                       <div
                         className="c3"
                       >
                         <div
-                          className="c25"
+                          className="c28"
                         >
                           <div
-                            className="c26"
+                            className="c29"
                           />
                           <div
-                            className="c27"
-                            disabled={true}
+                            className="c30"
                           >
                             <input
-                              className="c28"
-                              disabled={true}
+                              className="c31"
+                              disabled={false}
                               id=""
                               onBlur={null}
                               value="serbice"
@@ -2824,7 +2887,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                               }
                             >
                               <svg
-                                className="c29"
+                                className="c32"
                                 height="19"
                                 innerRef={undefined}
                                 onClick={[Function]}
@@ -2848,24 +2911,23 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c44"
+                      className="c47"
                     >
                       <div
                         className="c3"
                       >
                         <div
-                          className="c25"
+                          className="c28"
                         >
                           <div
-                            className="c26"
+                            className="c29"
                           />
                           <div
-                            className="c27"
-                            disabled={true}
+                            className="c30"
                           >
                             <input
-                              className="c28"
-                              disabled={true}
+                              className="c31"
+                              disabled={false}
                               id=""
                               onBlur={null}
                               value="dssasda"
@@ -2881,7 +2943,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                               }
                             >
                               <svg
-                                className="c29"
+                                className="c32"
                                 height="19"
                                 innerRef={undefined}
                                 onClick={[Function]}
@@ -2905,24 +2967,23 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c24"
+                      className="c27"
                     >
                       <div
                         className="c3"
                       >
                         <div
-                          className="c25"
+                          className="c28"
                         >
                           <div
-                            className="c26"
+                            className="c29"
                           />
                           <div
-                            className="c27"
-                            disabled={true}
+                            className="c30"
                           >
                             <input
-                              className="c28"
-                              disabled={true}
+                              className="c31"
+                              disabled={false}
                               id=""
                               onBlur={null}
                               value="dsasd"
@@ -2938,7 +2999,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                               }
                             >
                               <svg
-                                className="c29"
+                                className="c32"
                                 height="19"
                                 innerRef={undefined}
                                 onClick={[Function]}
@@ -2969,36 +3030,36 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c32"
+        className="c35"
       >
         <div
           className="c2"
         >
           <div
-            className="c35"
+            className="c38"
             name="cns-enabled"
             role="group"
             style={undefined}
           >
             <div
-              className="c46"
+              className="c49"
             >
               <label
-                className="c36 c37"
+                className="c39 c40"
                 disabled={false}
                 htmlFor="v"
               >
                 Disabled CNS
               </label>
               <div
-                className="c47"
+                className="c50"
               >
                 <div
-                  className="c48"
+                  className="c51"
                 >
                   <input
                     checked={true}
-                    className="c49 c50"
+                    className="c52 c53"
                     disabled={false}
                     id="v"
                     onBlur={undefined}
@@ -3007,7 +3068,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c49 c51"
+                    className="c52 c54"
                     disabled={false}
                     htmlFor="v"
                     id="v"
@@ -3016,7 +3077,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c49 c36 c37"
+                    className="c52 c39 c40"
                     disabled={false}
                     htmlFor="v"
                     id="v"
@@ -3072,7 +3133,7 @@ exports[`renders <Cns loading /> without throwing 1`] = `
   display: block;
 }
 
-.c7 {
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3086,23 +3147,47 @@ exports[`renders <Cns loading /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c10 {
+.c13 {
   padding: 1.875rem;
 }
 
-.c12 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
+.c15 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
 }
 
-.c13 {
+.c16 {
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
 }
 
-.c14 {
+.c17 {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
 }
@@ -3114,7 +3199,7 @@ exports[`renders <Cns loading /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c11 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3142,7 +3227,7 @@ exports[`renders <Cns loading /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c15 {
+.c18 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -3159,7 +3244,7 @@ exports[`renders <Cns loading /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c8 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3181,7 +3266,7 @@ exports[`renders <Cns loading /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c9 {
+.c12 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -3238,7 +3323,7 @@ exports[`renders <Cns loading /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -3247,7 +3332,7 @@ exports[`renders <Cns loading /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -3256,7 +3341,7 @@ exports[`renders <Cns loading /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 75%;
     -ms-flex-preferred-size: 75%;
     flex-basis: 75%;
@@ -3289,11 +3374,15 @@ exports[`renders <Cns loading /> without throwing 1`] = `
           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"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
           >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/private-cloud/install/cns"
+            >
+              Read the docs
+            </a>
           </a>
         </p>
       </div>
@@ -3303,44 +3392,44 @@ exports[`renders <Cns loading /> without throwing 1`] = `
     className="c3"
   >
     <div
-      className="c7"
+      className="c10"
     >
       <div
-        className="c8"
+        className="c11"
         disabled={false}
         name="card"
       >
         <div
-          className="c9 c8"
+          className="c12 c11"
           disabled={false}
           name="card-outlet"
         >
           <div
-            className="c10"
+            className="c13"
           >
             <div
-              className="c11"
+              className="c14"
             >
               <svg
                 height="10"
                 width="28"
               >
                 <rect
-                  className="c12"
+                  className="c15"
                   height="6"
                   width="6"
                   x="2"
                   y="2"
                 />
                 <rect
-                  className="c13 c12"
+                  className="c16 c15"
                   height="6"
                   width="6"
                   x="11"
                   y="2"
                 />
                 <rect
-                  className="c14 c12"
+                  className="c17 c15"
                   height="6"
                   width="6"
                   x="20"
@@ -3348,7 +3437,7 @@ exports[`renders <Cns loading /> without throwing 1`] = `
                 />
               </svg>
               <p
-                className="c15 c6"
+                className="c18 c6"
               >
                 Loading...
               </p>
@@ -3396,7 +3485,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   display: block;
 }
 
-.c7 {
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3410,36 +3499,42 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c11 {
+.c14 {
   margin-bottom: 1.875rem;
 }
 
-.c19 {
+.c22 {
   margin-top: 0.75rem;
 }
 
-.c24 {
+.c27 {
   margin-top: 1.875rem;
 }
 
-.c25 {
+.c28 {
   margin-top: 1.875rem;
   margin-bottom: 1.875rem;
 }
 
-.c32 {
+.c35 {
   margin-top: 0.1875rem;
 }
 
-.c34 {
+.c37 {
   margin-left: 0.75rem;
 }
 
-.c10 {
+.c13 {
   padding: 1.875rem;
 }
 
-.c38 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c41 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -3451,21 +3546,39 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   appearance: button;
 }
 
-.c38::-moz-focus-inner,
-.c38[type='button']::-moz-focus-inner,
-.c38[type='reset']::-moz-focus-inner,
-.c38[type='submit']::-moz-focus-inner {
+.c41::-moz-focus-inner,
+.c41[type='button']::-moz-focus-inner,
+.c41[type='reset']::-moz-focus-inner,
+.c41[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c38:-moz-focusring,
-.c38[type='button']:-moz-focusring,
-.c38[type='reset']:-moz-focusring,
-.c38[type='submit']:-moz-focusring {
+.c41:-moz-focusring,
+.c41[type='button']:-moz-focusring,
+.c41[type='reset']:-moz-focusring,
+.c41[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -3473,15 +3586,15 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c37 {
+.c40 {
   min-width: 7.5rem;
 }
 
-.c36 {
+.c39 {
   display: inline-block;
 }
 
-.c35 {
+.c38 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3520,7 +3633,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c35:focus {
+.c38:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3528,26 +3641,26 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c35:hover {
+.c38:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c38:active,
+.c38:active:hover,
+.c38:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c35[disabled] {
+.c38[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31 {
+.c34 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -3564,7 +3677,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c18 {
+.c21 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -3572,7 +3685,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c15 {
+.c18 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -3580,12 +3693,12 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c23 {
+.c26 {
   height: 1px;
   background-color: rgb(216,216,216);
 }
 
-.c21 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3608,7 +3721,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   flex-direction: column;
 }
 
-.c26 {
+.c29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3635,7 +3748,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c28 {
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3655,7 +3768,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c27 {
+.c30 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3672,7 +3785,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   display: block;
 }
 
-.c12 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3685,23 +3798,23 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   width: 100%;
 }
 
-.c13 {
+.c16 {
   border-radius: 0.1875rem 0 0 0.1875rem;
   min-width: 0.75rem;
   background-color: rgb(0,152,88);
   background-color: rgb(210,67,58);
 }
 
-.c14 {
+.c17 {
   padding: 1.125rem 1.125rem;
 }
 
-.c16 {
+.c19 {
   line-height: 0.875rem;
   font-size: 0.8125rem;
 }
 
-.c8 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3723,7 +3836,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c9 {
+.c12 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -3739,7 +3852,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c29 {
+.c32 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -3751,7 +3864,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c33 {
+.c36 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -3773,46 +3886,46 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c33:focus {
+.c36:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c33::-webkit-input-placeholder {
+.c36::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c33::-moz-placeholder {
+.c36::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c33:-ms-input-placeholder {
+.c36:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c33:invalid {
+.c36:invalid {
   box-shadow: none;
 }
 
-.c33:disabled {
+.c36:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c33:disabled::-webkit-input-placeholder {
+.c36:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c33:disabled::-moz-placeholder {
+.c36:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c33:disabled:-ms-input-placeholder {
+.c36:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30 {
+.c33 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
@@ -3822,15 +3935,15 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   font-weight: 200;
 }
 
-.c17 {
-  margin: 0;
-}
-
 .c20 {
   margin: 0;
 }
 
-.c22 {
+.c23 {
+  margin: 0;
+}
+
+.c25 {
   margin-left: 0;
   margin-right: 0;
 }
@@ -3872,7 +3985,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -3881,7 +3994,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -3890,7 +4003,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 75%;
     -ms-flex-preferred-size: 75%;
     flex-basis: 75%;
@@ -3923,11 +4036,15 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
           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"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
           >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/private-cloud/install/cns"
+            >
+              Read the docs
+            </a>
           </a>
         </p>
       </div>
@@ -3937,40 +4054,40 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
     className="c3"
   >
     <div
-      className="c7"
+      className="c10"
     >
       <div
-        className="c8"
+        className="c11"
         disabled={false}
         name="card"
       >
         <div
-          className="c9 c8"
+          className="c12 c11"
           disabled={false}
           name="card-outlet"
         >
           <div
-            className="c10"
+            className="c13"
           >
             <div
-              className="c11"
+              className="c14"
             >
               <div
-                className="c12"
+                className="c15"
               >
                 <div
-                  className="c13"
+                  className="c16"
                 />
                 <div
-                  className="c14"
+                  className="c17"
                 >
                   <h4
-                    className="c15"
+                    className="c18"
                   >
                     Ooops!
                   </h4>
                   <p
-                    className="c16 c6"
+                    className="c19 c6"
                   >
                     An error occurred while loading your CNS services
                   </p>
@@ -3978,50 +4095,50 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
               </div>
             </div>
             <div
-              className="c11"
+              className="c14"
             >
               <h3
-                className="c17 c18"
+                className="c20 c21"
               >
                 CNS Default Hostnames
               </h3>
               <div
-                className="c19"
+                className="c22"
               >
                 <p
-                  className="c20 c6"
+                  className="c23 c6"
                 >
                   Default hostnames are automatically generated from both the instance name and any attached networks.
                 </p>
               </div>
             </div>
             <div
-              className="c21"
+              className="c24"
             />
             <div
-              className="c19"
+              className="c22"
             >
               <div
-                className="c22 c23 c3"
+                className="c25 c26 c3"
                 height="0.0625rem"
               />
             </div>
             <div
-              className="c24"
+              className="c27"
             >
               <div
-                className="c25"
+                className="c28"
               >
                 <h3
-                  className="c17 c18"
+                  className="c20 c21"
                 >
                   CNS Service hostnames
                 </h3>
                 <div
-                  className="c19"
+                  className="c22"
                 >
                   <p
-                    className="c20 c6"
+                    className="c23 c6"
                   >
                     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>
@@ -4031,33 +4148,33 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
                 onSubmit={undefined}
               >
                 <div
-                  className="c26"
+                  className="c29"
                   wrap={true}
                 >
                   <div
-                    className="c27"
+                    className="c30"
                   >
                     <div
-                      className="c28"
+                      className="c31"
                     >
                       <div
-                        className="c29"
+                        className="c32"
                         id="cns-service-name-input"
                         name="name"
                         role="group"
                         style={undefined}
                       >
                         <label
-                          className="c30 c31"
+                          className="c33 c34"
                           htmlFor="cns-service-name-input"
                         >
                           Attach to new CNS service name
                         </label>
                         <div
-                          className="c32"
+                          className="c35"
                         >
                           <input
-                            className="c33"
+                            className="c36"
                             disabled={false}
                             id="cns-service-name-input"
                             onBlur={null}
@@ -4068,13 +4185,13 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c27"
+                    className="c30"
                   >
                     <div
-                      className="c34"
+                      className="c37"
                     >
                       <button
-                        className="c35 c36 c37 c38"
+                        className="c38 c39 c40 c41"
                         data-ui-button="true"
                         disabled={undefined}
                         href=""
@@ -4131,7 +4248,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   display: block;
 }
 
-.c7 {
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4141,7 +4258,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   display: block;
 }
 
-.c25 {
+.c28 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4155,71 +4272,77 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c11 {
+.c14 {
   margin-bottom: 1.875rem;
 }
 
-.c14 {
+.c17 {
   margin-top: 0.75rem;
 }
 
-.c32 {
+.c35 {
   margin-top: 1.875rem;
 }
 
-.c33 {
+.c36 {
   margin-top: 1.875rem;
   margin-bottom: 1.875rem;
 }
 
-.c24 {
+.c27 {
   margin-top: 0.1875rem;
 }
 
-.c44 {
+.c47 {
   margin-left: 0.75rem;
 }
 
-.c53 {
+.c56 {
   margin-left: 0.375rem;
 }
 
-.c22 {
+.c25 {
   margin-right: 0.375rem;
   margin-bottom: 0.1875rem;
 }
 
-.c26 {
+.c29 {
   margin-bottom: 0.1875rem;
 }
 
-.c36 {
+.c39 {
   margin-top: 0.375rem;
 }
 
-.c39 {
+.c42 {
   margin-right: 0.375rem;
   margin-bottom: 0.375rem;
 }
 
-.c49 {
+.c52 {
   margin-top: 0.1875rem;
   margin-bottom: 0.375rem;
 }
 
-.c50 {
+.c53 {
   margin-bottom: 0rem;
 }
 
-.c10 {
+.c13 {
   padding: 1.875rem;
 }
 
-.c20 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c23 {
   font-size: 80%;
 }
 
-.c48 {
+.c51 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -4231,21 +4354,39 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   appearance: button;
 }
 
-.c48::-moz-focus-inner,
-.c48[type='button']::-moz-focus-inner,
-.c48[type='reset']::-moz-focus-inner,
-.c48[type='submit']::-moz-focus-inner {
+.c51::-moz-focus-inner,
+.c51[type='button']::-moz-focus-inner,
+.c51[type='reset']::-moz-focus-inner,
+.c51[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c48:-moz-focusring,
-.c48[type='button']:-moz-focusring,
-.c48[type='reset']:-moz-focusring,
-.c48[type='submit']:-moz-focusring {
+.c51:-moz-focusring,
+.c51[type='button']:-moz-focusring,
+.c51[type='reset']:-moz-focusring,
+.c51[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -4253,15 +4394,15 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c47 {
+.c50 {
   min-width: 7.5rem;
 }
 
-.c46 {
+.c49 {
   display: inline-block;
 }
 
-.c45 {
+.c48 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4300,7 +4441,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c45:focus {
+.c48:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -4308,26 +4449,26 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c45:hover {
+.c48:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c45:active,
-.c45:active:hover,
-.c45:active:focus {
+.c48:active,
+.c48:active:hover,
+.c48:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c45[disabled] {
+.c48[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c35 {
+.c38 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -4344,7 +4485,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c13 {
+.c16 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -4352,7 +4493,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c19 {
+.c22 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   color: rgb(73,73,73);
   line-height: 1.125rem;
@@ -4360,19 +4501,19 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   font-weight: 600;
 }
 
-.c23 {
+.c26 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   color: rgb(73,73,73);
   line-height: 1.125rem;
   font-size: 0.8125rem;
 }
 
-.c31 {
+.c34 {
   height: 1px;
   background-color: rgb(216,216,216);
 }
 
-.c16 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4395,7 +4536,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   flex-direction: column;
 }
 
-.c41 {
+.c44 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4422,7 +4563,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c17 {
+.c20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4442,7 +4583,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c51 {
+.c54 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4466,7 +4607,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   align-items: center;
 }
 
-.c21 {
+.c24 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -4483,7 +4624,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   display: block;
 }
 
-.c8 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4505,7 +4646,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c9 {
+.c12 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -4521,7 +4662,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c42 {
+.c45 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -4533,7 +4674,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c28 {
+.c31 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -4542,7 +4683,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
-  color: rgb(250,250,250);
+  color: rgb(73,73,73);
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -4551,82 +4692,67 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
 }
 
-.c28:focus {
+.c31:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c28::-webkit-input-placeholder {
+.c31::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28::-moz-placeholder {
+.c31::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:-ms-input-placeholder {
+.c31:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:invalid {
+.c31:invalid {
   box-shadow: none;
 }
 
-.c28::-webkit-input-placeholder {
-  color: rgb(216,216,216);
-}
-
-.c28::-moz-placeholder {
-  color: rgb(216,216,216);
-}
-
-.c28:-ms-input-placeholder {
-  color: rgb(216,216,216);
-}
-
-.c28:disabled {
+.c31:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c28:disabled::-webkit-input-placeholder {
+.c31:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:disabled::-moz-placeholder {
+.c31:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:disabled:-ms-input-placeholder {
+.c31:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:disabled {
+.c31:disabled {
   color: rgb(73,73,73);
 }
 
-.c28:disabled::-webkit-input-placeholder {
+.c31:disabled::-webkit-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c28:disabled::-moz-placeholder {
+.c31:disabled::-moz-placeholder {
   color: rgb(73,73,73);
 }
 
-.c28:disabled:-ms-input-placeholder {
+.c31:disabled:-ms-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c43 {
+.c46 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -4651,71 +4777,71 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c43:focus {
+.c46:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c43::-webkit-input-placeholder {
+.c46::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c43::-moz-placeholder {
+.c46::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c43:-ms-input-placeholder {
+.c46:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c43:invalid {
+.c46:invalid {
   box-shadow: none;
 }
 
-.c43::-webkit-input-placeholder {
+.c46::-webkit-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c43::-moz-placeholder {
+.c46::-moz-placeholder {
   color: rgb(216,216,216);
 }
 
-.c43:-ms-input-placeholder {
+.c46:-ms-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c43:disabled {
+.c46:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c43:disabled::-webkit-input-placeholder {
+.c46:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c43:disabled::-moz-placeholder {
+.c46:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c43:disabled:-ms-input-placeholder {
+.c46:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34 {
+.c37 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c52 {
+.c55 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   color: rgb(216,216,216);
 }
 
-.c54 {
+.c57 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -4728,36 +4854,36 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   align-items: center;
 }
 
-.c56 {
+.c59 {
   display: none;
 }
 
-.c56:checked + label {
+.c59:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c56:checked + label:after {
+.c59:checked + label:after {
   -webkit-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c56:checked + label:active {
+.c59:checked + label:active {
   box-shadow: none;
 }
 
-.c56:checked + label {
+.c59:checked + label {
   background: rgb(250,250,250);
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c56:checked + label:after {
+.c59:checked + label:after {
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c57 {
+.c60 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -4777,24 +4903,24 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   cursor: not-allowed;
 }
 
-.c57::selection {
+.c60::selection {
   background: none;
 }
 
-.c57:active {
+.c60:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c57:hover {
+.c60:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c57:hover:after {
+.c60:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c57:after,
-.c57:before {
+.c60:after,
+.c60:before {
   position: relative;
   display: block;
   content: '';
@@ -4802,7 +4928,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   height: 100%;
 }
 
-.c57:after {
+.c60:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -4814,40 +4940,40 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c57:active {
+.c60:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c57:before {
+.c60:before {
   display: none;
 }
 
-.c57:active {
+.c60:active {
   box-shadow: none;
 }
 
-.c57:active:after {
+.c60:active:after {
   padding-right: 0;
 }
 
-.c57:before {
+.c60:before {
   cursor: not-allowed;
 }
 
-.c57:after {
+.c60:after {
   cursor: not-allowed;
   background: rgb(230,230,230);
 }
 
-.c57:hover {
+.c60:hover {
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c57:hover:after {
+.c60:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c27 {
+.c30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4858,20 +4984,20 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   align-items: center;
 }
 
-.c27 input {
+.c30 input {
   padding-right: 1.875rem;
 }
 
-.c27 div {
+.c30 div {
   position: relative;
   left: -1.625rem;
 }
 
-.c29 {
+.c32 {
   cursor: pointer;
 }
 
-.c40 {
+.c43 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -4894,7 +5020,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   border: 0.0625rem solid rgb(45,56,132);
 }
 
-.c38 {
+.c41 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -4911,29 +5037,29 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   font-weight: 200;
 }
 
-.c37 {
+.c40 {
   margin-bottom: -0.375rem;
 }
 
-.c18 {
+.c21 {
   padding-right: 0.75rem;
   margin-right: 0.75rem;
   border-right: 0.0625rem solid rgb(216,216,216);
 }
 
-.c12 {
-  margin: 0;
-}
-
 .c15 {
   margin: 0;
 }
 
-.c55 {
+.c18 {
+  margin: 0;
+}
+
+.c58 {
   margin: 0 6px;
 }
 
-.c30 {
+.c33 {
   margin-left: 0;
   margin-right: 0;
 }
@@ -4975,7 +5101,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -4984,7 +5110,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -4993,7 +5119,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 75%;
     -ms-flex-preferred-size: 75%;
     flex-basis: 75%;
@@ -5002,7 +5128,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c28 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -5011,7 +5137,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c25 {
+  .c28 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -5044,11 +5170,15 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
           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"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
           >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/private-cloud/install/cns"
+            >
+              Read the docs
+            </a>
           </a>
         </p>
       </div>
@@ -5058,50 +5188,50 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
     className="c3"
   >
     <div
-      className="c7"
+      className="c10"
     >
       <div
-        className="c8"
+        className="c11"
         disabled={false}
         name="card"
       >
         <div
-          className="c9 c8"
+          className="c12 c11"
           disabled={false}
           name="card-outlet"
         >
           <div
-            className="c10"
+            className="c13"
           >
             <div
-              className="c11"
+              className="c14"
             >
               <h3
-                className="c12 c13"
+                className="c15 c16"
               >
                 CNS Default Hostnames
               </h3>
               <div
-                className="c14"
+                className="c17"
               >
                 <p
-                  className="c15 c6"
+                  className="c18 c6"
                 >
                   Default hostnames are automatically generated from both the instance name and any attached networks.
                 </p>
               </div>
             </div>
             <div
-              className="c16"
+              className="c19"
             >
               <div
                 className="c2"
               >
                 <div
-                  className="c17"
+                  className="c20"
                 >
                   <small
-                    className="c18 c19 c20"
+                    className="c21 c22 c23"
                   >
                     Instance name
                      
@@ -5109,10 +5239,10 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                     
                   </small>
                   <div
-                    className="c21"
+                    className="c24"
                   >
                     <div
-                      className="c22"
+                      className="c25"
                     >
                       <svg
                         height="16"
@@ -5132,34 +5262,33 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c21"
+                    className="c24"
                   >
                     <small
-                      className="c23 c20"
+                      className="c26 c23"
                     >
                       Public
                     </small>
                   </div>
                 </div>
                 <div
-                  className="c24"
+                  className="c27"
                 >
                   <div
                     className="c3"
                   >
                     <div
-                      className="c25"
+                      className="c28"
                     >
                       <div
-                        className="c26"
+                        className="c29"
                       />
                       <div
-                        className="c27"
-                        disabled={true}
+                        className="c30"
                       >
                         <input
-                          className="c28"
-                          disabled={true}
+                          className="c31"
+                          disabled={false}
                           id=""
                           onBlur={null}
                           value="stuffy-stuff"
@@ -5175,7 +5304,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                           }
                         >
                           <svg
-                            className="c29"
+                            className="c32"
                             height="19"
                             innerRef={undefined}
                             onClick={[Function]}
@@ -5203,10 +5332,10 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                 className="c2"
               >
                 <div
-                  className="c17"
+                  className="c20"
                 >
                   <small
-                    className="c18 c19 c20"
+                    className="c21 c22 c23"
                   >
                     Instance name
                      
@@ -5214,10 +5343,10 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                     
                   </small>
                   <div
-                    className="c21"
+                    className="c24"
                   >
                     <div
-                      className="c22"
+                      className="c25"
                     >
                       <svg
                         height="16"
@@ -5238,34 +5367,33 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c21"
+                    className="c24"
                   >
                     <small
-                      className="c23 c20"
+                      className="c26 c23"
                     >
                       Private
                     </small>
                   </div>
                 </div>
                 <div
-                  className="c24"
+                  className="c27"
                 >
                   <div
                     className="c3"
                   >
                     <div
-                      className="c25"
+                      className="c28"
                     >
                       <div
-                        className="c26"
+                        className="c29"
                       />
                       <div
-                        className="c27"
-                        disabled={true}
+                        className="c30"
                       >
                         <input
-                          className="c28"
-                          disabled={true}
+                          className="c31"
+                          disabled={false}
                           id=""
                           onBlur={null}
                           value="stuffy-stuff"
@@ -5281,7 +5409,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                           }
                         >
                           <svg
-                            className="c29"
+                            className="c32"
                             height="19"
                             innerRef={undefined}
                             onClick={[Function]}
@@ -5307,29 +5435,29 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
               </div>
             </div>
             <div
-              className="c14"
+              className="c17"
             >
               <div
-                className="c30 c31 c3"
+                className="c33 c34 c3"
                 height="0.0625rem"
               />
             </div>
             <div
-              className="c32"
+              className="c35"
             >
               <div
-                className="c33"
+                className="c36"
               >
                 <h3
-                  className="c12 c13"
+                  className="c15 c16"
                 >
                   CNS Service hostnames
                 </h3>
                 <div
-                  className="c14"
+                  className="c17"
                 >
                   <p
-                    className="c15 c6"
+                    className="c18 c6"
                   >
                     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>
@@ -5339,22 +5467,22 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                 className="c2"
               >
                 <label
-                  className="c34 c35"
+                  className="c37 c38"
                   htmlFor=""
                 >
                   Existing CNS service name(s)
                 </label>
                 <div
-                  className="c36"
+                  className="c39"
                 >
                   <ul
-                    className="c37 c38"
+                    className="c40 c41"
                   >
                     <div
-                      className="c39"
+                      className="c42"
                     >
                       <li
-                        className="c40"
+                        className="c43"
                         fill="rgba(66, 134, 244, 0.1)"
                         id="cns-tag-0"
                       >
@@ -5362,10 +5490,10 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </li>
                     </div>
                     <div
-                      className="c39"
+                      className="c42"
                     >
                       <li
-                        className="c40"
+                        className="c43"
                         fill="rgba(66, 134, 244, 0.1)"
                         id="cns-tag-1"
                       >
@@ -5373,10 +5501,10 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </li>
                     </div>
                     <div
-                      className="c39"
+                      className="c42"
                     >
                       <li
-                        className="c40"
+                        className="c43"
                         fill="rgba(66, 134, 244, 0.1)"
                         id="cns-tag-2"
                       >
@@ -5390,33 +5518,33 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                 onSubmit={undefined}
               >
                 <div
-                  className="c41"
+                  className="c44"
                   wrap={true}
                 >
                   <div
-                    className="c21"
+                    className="c24"
                   >
                     <div
-                      className="c17"
+                      className="c20"
                     >
                       <div
-                        className="c42"
+                        className="c45"
                         id="cns-service-name-input"
                         name="name"
                         role="group"
                         style={undefined}
                       >
                         <label
-                          className="c34 c35"
+                          className="c37 c38"
                           htmlFor="cns-service-name-input"
                         >
                           Attach to new CNS service name
                         </label>
                         <div
-                          className="c24"
+                          className="c27"
                         >
                           <input
-                            className="c43"
+                            className="c46"
                             disabled={true}
                             id="cns-service-name-input"
                             onBlur={null}
@@ -5427,13 +5555,13 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c21"
+                    className="c24"
                   >
                     <div
-                      className="c44"
+                      className="c47"
                     >
                       <button
-                        className="c45 c46 c47 c48"
+                        className="c48 c49 c50 c51"
                         data-ui-button="true"
                         disabled={undefined}
                         href=""
@@ -5447,19 +5575,19 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                 </div>
               </form>
               <div
-                className="c32"
+                className="c35"
               >
                 <div
-                  className="c16"
+                  className="c19"
                 >
                   <div
                     className="c2"
                   >
                     <div
-                      className="c17"
+                      className="c20"
                     >
                       <small
-                        className="c18 c19 c20"
+                        className="c21 c22 c23"
                       >
                         CNS service
                          
@@ -5467,10 +5595,10 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                         s
                       </small>
                       <div
-                        className="c21"
+                        className="c24"
                       >
                         <div
-                          className="c22"
+                          className="c25"
                         >
                           <svg
                             height="16"
@@ -5490,34 +5618,33 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                         </div>
                       </div>
                       <div
-                        className="c21"
+                        className="c24"
                       >
                         <small
-                          className="c23 c20"
+                          className="c26 c23"
                         >
                           Public
                         </small>
                       </div>
                     </div>
                     <div
-                      className="c49"
+                      className="c52"
                     >
                       <div
                         className="c3"
                       >
                         <div
-                          className="c25"
+                          className="c28"
                         >
                           <div
-                            className="c26"
+                            className="c29"
                           />
                           <div
-                            className="c27"
-                            disabled={true}
+                            className="c30"
                           >
                             <input
-                              className="c28"
-                              disabled={true}
+                              className="c31"
+                              disabled={false}
                               id=""
                               onBlur={null}
                               value="serbice"
@@ -5533,7 +5660,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                               }
                             >
                               <svg
-                                className="c29"
+                                className="c32"
                                 height="19"
                                 innerRef={undefined}
                                 onClick={[Function]}
@@ -5557,24 +5684,23 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c49"
+                      className="c52"
                     >
                       <div
                         className="c3"
                       >
                         <div
-                          className="c25"
+                          className="c28"
                         >
                           <div
-                            className="c26"
+                            className="c29"
                           />
                           <div
-                            className="c27"
-                            disabled={true}
+                            className="c30"
                           >
                             <input
-                              className="c28"
-                              disabled={true}
+                              className="c31"
+                              disabled={false}
                               id=""
                               onBlur={null}
                               value="dssasda"
@@ -5590,7 +5716,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                               }
                             >
                               <svg
-                                className="c29"
+                                className="c32"
                                 height="19"
                                 innerRef={undefined}
                                 onClick={[Function]}
@@ -5614,24 +5740,23 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c24"
+                      className="c27"
                     >
                       <div
                         className="c3"
                       >
                         <div
-                          className="c25"
+                          className="c28"
                         >
                           <div
-                            className="c26"
+                            className="c29"
                           />
                           <div
-                            className="c27"
-                            disabled={true}
+                            className="c30"
                           >
                             <input
-                              className="c28"
-                              disabled={true}
+                              className="c31"
+                              disabled={false}
                               id=""
                               onBlur={null}
                               value="dsasd"
@@ -5647,7 +5772,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                               }
                             >
                               <svg
-                                className="c29"
+                                className="c32"
                                 height="19"
                                 innerRef={undefined}
                                 onClick={[Function]}
@@ -5672,13 +5797,13 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c50"
+                    className="c53"
                   >
                     <div
-                      className="c17"
+                      className="c20"
                     >
                       <small
-                        className="c18 c19 c20"
+                        className="c21 c22 c23"
                       >
                         CNS service
                          
@@ -5686,10 +5811,10 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                         s
                       </small>
                       <div
-                        className="c21"
+                        className="c24"
                       >
                         <div
-                          className="c22"
+                          className="c25"
                         >
                           <svg
                             height="16"
@@ -5710,34 +5835,33 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                         </div>
                       </div>
                       <div
-                        className="c21"
+                        className="c24"
                       >
                         <small
-                          className="c23 c20"
+                          className="c26 c23"
                         >
                           Private
                         </small>
                       </div>
                     </div>
                     <div
-                      className="c49"
+                      className="c52"
                     >
                       <div
                         className="c3"
                       >
                         <div
-                          className="c25"
+                          className="c28"
                         >
                           <div
-                            className="c26"
+                            className="c29"
                           />
                           <div
-                            className="c27"
-                            disabled={true}
+                            className="c30"
                           >
                             <input
-                              className="c28"
-                              disabled={true}
+                              className="c31"
+                              disabled={false}
                               id=""
                               onBlur={null}
                               value="serbice"
@@ -5753,7 +5877,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                               }
                             >
                               <svg
-                                className="c29"
+                                className="c32"
                                 height="19"
                                 innerRef={undefined}
                                 onClick={[Function]}
@@ -5777,24 +5901,23 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c49"
+                      className="c52"
                     >
                       <div
                         className="c3"
                       >
                         <div
-                          className="c25"
+                          className="c28"
                         >
                           <div
-                            className="c26"
+                            className="c29"
                           />
                           <div
-                            className="c27"
-                            disabled={true}
+                            className="c30"
                           >
                             <input
-                              className="c28"
-                              disabled={true}
+                              className="c31"
+                              disabled={false}
                               id=""
                               onBlur={null}
                               value="dssasda"
@@ -5810,7 +5933,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                               }
                             >
                               <svg
-                                className="c29"
+                                className="c32"
                                 height="19"
                                 innerRef={undefined}
                                 onClick={[Function]}
@@ -5834,24 +5957,23 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c24"
+                      className="c27"
                     >
                       <div
                         className="c3"
                       >
                         <div
-                          className="c25"
+                          className="c28"
                         >
                           <div
-                            className="c26"
+                            className="c29"
                           />
                           <div
-                            className="c27"
-                            disabled={true}
+                            className="c30"
                           >
                             <input
-                              className="c28"
-                              disabled={true}
+                              className="c31"
+                              disabled={false}
                               id=""
                               onBlur={null}
                               value="dsasd"
@@ -5867,7 +5989,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                               }
                             >
                               <svg
-                                className="c29"
+                                className="c32"
                                 height="19"
                                 innerRef={undefined}
                                 onClick={[Function]}
@@ -5898,36 +6020,36 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c32"
+        className="c35"
       >
         <div
           className="c2"
         >
           <div
-            className="c42"
+            className="c45"
             name="cns-enabled"
             role="group"
             style={undefined}
           >
             <div
-              className="c51"
+              className="c54"
             >
               <label
-                className="c52 c35"
+                className="c55 c38"
                 disabled={true}
                 htmlFor="q"
               >
                 Disabled CNS
               </label>
               <div
-                className="c53"
+                className="c56"
               >
                 <div
-                  className="c54"
+                  className="c57"
                 >
                   <input
                     checked={true}
-                    className="c55 c56"
+                    className="c58 c59"
                     disabled={true}
                     id="q"
                     onBlur={undefined}
@@ -5936,7 +6058,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c55 c57"
+                    className="c58 c60"
                     disabled={true}
                     htmlFor="q"
                     id="q"
@@ -5945,7 +6067,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c55 c52 c35"
+                    className="c58 c55 c38"
                     disabled={true}
                     htmlFor="q"
                     id="q"
@@ -6001,7 +6123,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   display: block;
 }
 
-.c7 {
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -6015,40 +6137,46 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c11 {
+.c14 {
   margin-bottom: 1.875rem;
 }
 
-.c19 {
+.c22 {
   margin-top: 0.75rem;
 }
 
-.c24 {
+.c27 {
   margin-top: 1.875rem;
 }
 
-.c25 {
+.c28 {
   margin-top: 1.875rem;
   margin-bottom: 1.875rem;
 }
 
-.c32 {
+.c35 {
   margin-top: 0.1875rem;
 }
 
-.c34 {
+.c37 {
   margin-left: 0.75rem;
 }
 
-.c40 {
+.c43 {
   margin-left: 0.375rem;
 }
 
-.c10 {
+.c13 {
   padding: 1.875rem;
 }
 
-.c38 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c41 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -6060,21 +6188,39 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   appearance: button;
 }
 
-.c38::-moz-focus-inner,
-.c38[type='button']::-moz-focus-inner,
-.c38[type='reset']::-moz-focus-inner,
-.c38[type='submit']::-moz-focus-inner {
+.c41::-moz-focus-inner,
+.c41[type='button']::-moz-focus-inner,
+.c41[type='reset']::-moz-focus-inner,
+.c41[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c38:-moz-focusring,
-.c38[type='button']:-moz-focusring,
-.c38[type='reset']:-moz-focusring,
-.c38[type='submit']:-moz-focusring {
+.c41:-moz-focusring,
+.c41[type='button']:-moz-focusring,
+.c41[type='reset']:-moz-focusring,
+.c41[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -6082,15 +6228,15 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c37 {
+.c40 {
   min-width: 7.5rem;
 }
 
-.c36 {
+.c39 {
   display: inline-block;
 }
 
-.c35 {
+.c38 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6129,7 +6275,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c35:focus {
+.c38:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -6137,26 +6283,26 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c35:hover {
+.c38:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c38:active,
+.c38:active:hover,
+.c38:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c35[disabled] {
+.c38[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31 {
+.c34 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -6173,7 +6319,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c18 {
+.c21 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -6181,7 +6327,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c15 {
+.c18 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -6189,12 +6335,12 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c23 {
+.c26 {
   height: 1px;
   background-color: rgb(216,216,216);
 }
 
-.c21 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6217,7 +6363,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   flex-direction: column;
 }
 
-.c26 {
+.c29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6244,7 +6390,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c28 {
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6264,7 +6410,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c39 {
+.c42 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6288,7 +6434,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   align-items: center;
 }
 
-.c27 {
+.c30 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -6305,7 +6451,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   display: block;
 }
 
-.c12 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6318,23 +6464,23 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   width: 100%;
 }
 
-.c13 {
+.c16 {
   border-radius: 0.1875rem 0 0 0.1875rem;
   min-width: 0.75rem;
   background-color: rgb(0,152,88);
   background-color: rgb(210,67,58);
 }
 
-.c14 {
+.c17 {
   padding: 1.125rem 1.125rem;
 }
 
-.c16 {
+.c19 {
   line-height: 0.875rem;
   font-size: 0.8125rem;
 }
 
-.c8 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6356,7 +6502,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c9 {
+.c12 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -6372,7 +6518,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c29 {
+.c32 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -6384,7 +6530,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c33 {
+.c36 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -6406,52 +6552,52 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c33:focus {
+.c36:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c33::-webkit-input-placeholder {
+.c36::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c33::-moz-placeholder {
+.c36::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c33:-ms-input-placeholder {
+.c36:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c33:invalid {
+.c36:invalid {
   box-shadow: none;
 }
 
-.c33:disabled {
+.c36:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c33:disabled::-webkit-input-placeholder {
+.c36:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c33:disabled::-moz-placeholder {
+.c36:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c33:disabled:-ms-input-placeholder {
+.c36:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30 {
+.c33 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c41 {
+.c44 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -6464,27 +6610,27 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   align-items: center;
 }
 
-.c43 {
+.c46 {
   display: none;
 }
 
-.c43:checked + label {
+.c46:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c43:checked + label:after {
+.c46:checked + label:after {
   -webkit-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c43:checked + label:active {
+.c46:checked + label:active {
   box-shadow: none;
 }
 
-.c44 {
+.c47 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -6503,24 +6649,24 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c44::selection {
+.c47::selection {
   background: none;
 }
 
-.c44:active {
+.c47:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c44:hover {
+.c47:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c44:hover:after {
+.c47:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c44:after,
-.c44:before {
+.c47:after,
+.c47:before {
   position: relative;
   display: block;
   content: '';
@@ -6528,7 +6674,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   height: 100%;
 }
 
-.c44:after {
+.c47:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -6540,11 +6686,11 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c44:active {
+.c47:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c44:before {
+.c47:before {
   display: none;
 }
 
@@ -6552,19 +6698,19 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   font-weight: 200;
 }
 
-.c17 {
-  margin: 0;
-}
-
 .c20 {
   margin: 0;
 }
 
-.c42 {
+.c23 {
+  margin: 0;
+}
+
+.c45 {
   margin: 0 6px;
 }
 
-.c22 {
+.c25 {
   margin-left: 0;
   margin-right: 0;
 }
@@ -6606,7 +6752,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -6615,7 +6761,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -6624,7 +6770,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 75%;
     -ms-flex-preferred-size: 75%;
     flex-basis: 75%;
@@ -6657,11 +6803,15 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
           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"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
           >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/private-cloud/install/cns"
+            >
+              Read the docs
+            </a>
           </a>
         </p>
       </div>
@@ -6671,40 +6821,40 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
     className="c3"
   >
     <div
-      className="c7"
+      className="c10"
     >
       <div
-        className="c8"
+        className="c11"
         disabled={false}
         name="card"
       >
         <div
-          className="c9 c8"
+          className="c12 c11"
           disabled={false}
           name="card-outlet"
         >
           <div
-            className="c10"
+            className="c13"
           >
             <div
-              className="c11"
+              className="c14"
             >
               <div
-                className="c12"
+                className="c15"
               >
                 <div
-                  className="c13"
+                  className="c16"
                 />
                 <div
-                  className="c14"
+                  className="c17"
                 >
                   <h4
-                    className="c15"
+                    className="c18"
                   >
                     Ooops!
                   </h4>
                   <p
-                    className="c16 c6"
+                    className="c19 c6"
                   >
                     mutation error
                   </p>
@@ -6712,50 +6862,50 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
               </div>
             </div>
             <div
-              className="c11"
+              className="c14"
             >
               <h3
-                className="c17 c18"
+                className="c20 c21"
               >
                 CNS Default Hostnames
               </h3>
               <div
-                className="c19"
+                className="c22"
               >
                 <p
-                  className="c20 c6"
+                  className="c23 c6"
                 >
                   Default hostnames are automatically generated from both the instance name and any attached networks.
                 </p>
               </div>
             </div>
             <div
-              className="c21"
+              className="c24"
             />
             <div
-              className="c19"
+              className="c22"
             >
               <div
-                className="c22 c23 c3"
+                className="c25 c26 c3"
                 height="0.0625rem"
               />
             </div>
             <div
-              className="c24"
+              className="c27"
             >
               <div
-                className="c25"
+                className="c28"
               >
                 <h3
-                  className="c17 c18"
+                  className="c20 c21"
                 >
                   CNS Service hostnames
                 </h3>
                 <div
-                  className="c19"
+                  className="c22"
                 >
                   <p
-                    className="c20 c6"
+                    className="c23 c6"
                   >
                     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>
@@ -6765,33 +6915,33 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
                 onSubmit={undefined}
               >
                 <div
-                  className="c26"
+                  className="c29"
                   wrap={true}
                 >
                   <div
-                    className="c27"
+                    className="c30"
                   >
                     <div
-                      className="c28"
+                      className="c31"
                     >
                       <div
-                        className="c29"
+                        className="c32"
                         id="cns-service-name-input"
                         name="name"
                         role="group"
                         style={undefined}
                       >
                         <label
-                          className="c30 c31"
+                          className="c33 c34"
                           htmlFor="cns-service-name-input"
                         >
                           Attach to new CNS service name
                         </label>
                         <div
-                          className="c32"
+                          className="c35"
                         >
                           <input
-                            className="c33"
+                            className="c36"
                             disabled={false}
                             id="cns-service-name-input"
                             onBlur={null}
@@ -6802,13 +6952,13 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c27"
+                    className="c30"
                   >
                     <div
-                      className="c34"
+                      className="c37"
                     >
                       <button
-                        className="c35 c36 c37 c38"
+                        className="c38 c39 c40 c41"
                         data-ui-button="true"
                         disabled={undefined}
                         href=""
@@ -6826,36 +6976,36 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c24"
+        className="c27"
       >
         <div
           className="c2"
         >
           <div
-            className="c29"
+            className="c32"
             name="cns-enabled"
             role="group"
             style={undefined}
           >
             <div
-              className="c39"
+              className="c42"
             >
               <label
-                className="c30 c31"
+                className="c33 c34"
                 disabled={false}
                 htmlFor="o"
               >
                 Disabled CNS
               </label>
               <div
-                className="c40"
+                className="c43"
               >
                 <div
-                  className="c41"
+                  className="c44"
                 >
                   <input
                     checked={true}
-                    className="c42 c43"
+                    className="c45 c46"
                     disabled={false}
                     id="o"
                     onBlur={undefined}
@@ -6864,7 +7014,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c42 c44"
+                    className="c45 c47"
                     disabled={false}
                     htmlFor="o"
                     id="o"
@@ -6873,7 +7023,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c42 c30 c31"
+                    className="c45 c33 c34"
                     disabled={false}
                     htmlFor="o"
                     id="o"
@@ -6929,7 +7079,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   display: block;
 }
 
-.c7 {
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -6943,49 +7093,55 @@ exports[`renders <Cns services /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c11 {
+.c14 {
   margin-bottom: 1.875rem;
 }
 
-.c14 {
+.c17 {
   margin-top: 0.75rem;
 }
 
-.c19 {
+.c22 {
   margin-top: 1.875rem;
 }
 
-.c20 {
+.c23 {
   margin-top: 1.875rem;
   margin-bottom: 1.875rem;
 }
 
-.c33 {
+.c36 {
   margin-top: 0.1875rem;
 }
 
-.c35 {
+.c38 {
   margin-left: 0.75rem;
 }
 
-.c41 {
+.c44 {
   margin-left: 0.375rem;
 }
 
-.c23 {
+.c26 {
   margin-top: 0.375rem;
 }
 
-.c26 {
+.c29 {
   margin-right: 0.375rem;
   margin-bottom: 0.375rem;
 }
 
-.c10 {
+.c13 {
   padding: 1.875rem;
 }
 
-.c39 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c42 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -6997,21 +7153,39 @@ exports[`renders <Cns services /> without throwing 1`] = `
   appearance: button;
 }
 
-.c39::-moz-focus-inner,
-.c39[type='button']::-moz-focus-inner,
-.c39[type='reset']::-moz-focus-inner,
-.c39[type='submit']::-moz-focus-inner {
+.c42::-moz-focus-inner,
+.c42[type='button']::-moz-focus-inner,
+.c42[type='reset']::-moz-focus-inner,
+.c42[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c39:-moz-focusring,
-.c39[type='button']:-moz-focusring,
-.c39[type='reset']:-moz-focusring,
-.c39[type='submit']:-moz-focusring {
+.c42:-moz-focusring,
+.c42[type='button']:-moz-focusring,
+.c42[type='reset']:-moz-focusring,
+.c42[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -7019,15 +7193,15 @@ exports[`renders <Cns services /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c38 {
+.c41 {
   min-width: 7.5rem;
 }
 
-.c37 {
+.c40 {
   display: inline-block;
 }
 
-.c36 {
+.c39 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -7066,7 +7240,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c36:focus {
+.c39:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -7074,26 +7248,26 @@ exports[`renders <Cns services /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c36:hover {
+.c39:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c36:active,
-.c36:active:hover,
-.c36:active:focus {
+.c39:active,
+.c39:active:hover,
+.c39:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c36[disabled] {
+.c39[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c22 {
+.c25 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -7110,7 +7284,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c13 {
+.c16 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -7118,12 +7292,12 @@ exports[`renders <Cns services /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c18 {
+.c21 {
   height: 1px;
   background-color: rgb(216,216,216);
 }
 
-.c16 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7146,7 +7320,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   flex-direction: column;
 }
 
-.c29 {
+.c32 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7173,7 +7347,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c31 {
+.c34 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7193,7 +7367,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c40 {
+.c43 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7217,7 +7391,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   align-items: center;
 }
 
-.c30 {
+.c33 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -7234,7 +7408,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   display: block;
 }
 
-.c8 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7256,7 +7430,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c9 {
+.c12 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -7272,7 +7446,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c32 {
+.c35 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -7284,7 +7458,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c34 {
+.c37 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -7306,52 +7480,52 @@ exports[`renders <Cns services /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c34:focus {
+.c37:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c34::-webkit-input-placeholder {
+.c37::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34::-moz-placeholder {
+.c37::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:-ms-input-placeholder {
+.c37:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:invalid {
+.c37:invalid {
   box-shadow: none;
 }
 
-.c34:disabled {
+.c37:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c34:disabled::-webkit-input-placeholder {
+.c37:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:disabled::-moz-placeholder {
+.c37:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:disabled:-ms-input-placeholder {
+.c37:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c21 {
+.c24 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c42 {
+.c45 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -7364,27 +7538,27 @@ exports[`renders <Cns services /> without throwing 1`] = `
   align-items: center;
 }
 
-.c44 {
+.c47 {
   display: none;
 }
 
-.c44:checked + label {
+.c47:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c44:checked + label:after {
+.c47:checked + label:after {
   -webkit-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c44:checked + label:active {
+.c47:checked + label:active {
   box-shadow: none;
 }
 
-.c45 {
+.c48 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -7403,24 +7577,24 @@ exports[`renders <Cns services /> without throwing 1`] = `
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c45::selection {
+.c48::selection {
   background: none;
 }
 
-.c45:active {
+.c48:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c45:hover {
+.c48:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c45:hover:after {
+.c48:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c45:after,
-.c45:before {
+.c48:after,
+.c48:before {
   position: relative;
   display: block;
   content: '';
@@ -7428,7 +7602,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   height: 100%;
 }
 
-.c45:after {
+.c48:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -7440,20 +7614,20 @@ exports[`renders <Cns services /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c45:active {
+.c48:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c45:before {
+.c48:before {
   display: none;
 }
 
-.c28 {
+.c31 {
   margin-left: 0.75rem;
   cursor: pointer;
 }
 
-.c27 {
+.c30 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -7476,7 +7650,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   border: 0.0625rem solid rgb(45,56,132);
 }
 
-.c25 {
+.c28 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -7493,23 +7667,23 @@ exports[`renders <Cns services /> without throwing 1`] = `
   font-weight: 200;
 }
 
-.c24 {
+.c27 {
   margin-bottom: -0.375rem;
 }
 
-.c12 {
-  margin: 0;
-}
-
 .c15 {
   margin: 0;
 }
 
-.c43 {
+.c18 {
+  margin: 0;
+}
+
+.c46 {
   margin: 0 6px;
 }
 
-.c17 {
+.c20 {
   margin-left: 0;
   margin-right: 0;
 }
@@ -7551,7 +7725,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -7560,7 +7734,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -7569,7 +7743,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 75%;
     -ms-flex-preferred-size: 75%;
     flex-basis: 75%;
@@ -7602,11 +7776,15 @@ exports[`renders <Cns services /> without throwing 1`] = `
           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"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
           >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/private-cloud/install/cns"
+            >
+              Read the docs
+            </a>
           </a>
         </p>
       </div>
@@ -7616,66 +7794,66 @@ exports[`renders <Cns services /> without throwing 1`] = `
     className="c3"
   >
     <div
-      className="c7"
+      className="c10"
     >
       <div
-        className="c8"
+        className="c11"
         disabled={false}
         name="card"
       >
         <div
-          className="c9 c8"
+          className="c12 c11"
           disabled={false}
           name="card-outlet"
         >
           <div
-            className="c10"
+            className="c13"
           >
             <div
-              className="c11"
+              className="c14"
             >
               <h3
-                className="c12 c13"
+                className="c15 c16"
               >
                 CNS Default Hostnames
               </h3>
               <div
-                className="c14"
+                className="c17"
               >
                 <p
-                  className="c15 c6"
+                  className="c18 c6"
                 >
                   Default hostnames are automatically generated from both the instance name and any attached networks.
                 </p>
               </div>
             </div>
             <div
-              className="c16"
+              className="c19"
             />
             <div
-              className="c14"
+              className="c17"
             >
               <div
-                className="c17 c18 c3"
+                className="c20 c21 c3"
                 height="0.0625rem"
               />
             </div>
             <div
-              className="c19"
+              className="c22"
             >
               <div
-                className="c20"
+                className="c23"
               >
                 <h3
-                  className="c12 c13"
+                  className="c15 c16"
                 >
                   CNS Service hostnames
                 </h3>
                 <div
-                  className="c14"
+                  className="c17"
                 >
                   <p
-                    className="c15 c6"
+                    className="c18 c6"
                   >
                     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>
@@ -7685,28 +7863,28 @@ exports[`renders <Cns services /> without throwing 1`] = `
                 className="c2"
               >
                 <label
-                  className="c21 c22"
+                  className="c24 c25"
                   htmlFor=""
                 >
                   Existing CNS service name(s)
                 </label>
                 <div
-                  className="c23"
+                  className="c26"
                 >
                   <ul
-                    className="c24 c25"
+                    className="c27 c28"
                   >
                     <div
-                      className="c26"
+                      className="c29"
                     >
                       <li
-                        className="c27"
+                        className="c30"
                         fill="rgba(66, 134, 244, 0.1)"
                         id="cns-tag-0"
                       >
                         serbice
                         <svg
-                          className="c28"
+                          className="c31"
                           height="11.31"
                           innerRef={undefined}
                           onClick={[Function]}
@@ -7727,16 +7905,16 @@ exports[`renders <Cns services /> without throwing 1`] = `
                       </li>
                     </div>
                     <div
-                      className="c26"
+                      className="c29"
                     >
                       <li
-                        className="c27"
+                        className="c30"
                         fill="rgba(66, 134, 244, 0.1)"
                         id="cns-tag-1"
                       >
                         dssasda
                         <svg
-                          className="c28"
+                          className="c31"
                           height="11.31"
                           innerRef={undefined}
                           onClick={[Function]}
@@ -7757,16 +7935,16 @@ exports[`renders <Cns services /> without throwing 1`] = `
                       </li>
                     </div>
                     <div
-                      className="c26"
+                      className="c29"
                     >
                       <li
-                        className="c27"
+                        className="c30"
                         fill="rgba(66, 134, 244, 0.1)"
                         id="cns-tag-2"
                       >
                         dsasd
                         <svg
-                          className="c28"
+                          className="c31"
                           height="11.31"
                           innerRef={undefined}
                           onClick={[Function]}
@@ -7793,33 +7971,33 @@ exports[`renders <Cns services /> without throwing 1`] = `
                 onSubmit={undefined}
               >
                 <div
-                  className="c29"
+                  className="c32"
                   wrap={true}
                 >
                   <div
-                    className="c30"
+                    className="c33"
                   >
                     <div
-                      className="c31"
+                      className="c34"
                     >
                       <div
-                        className="c32"
+                        className="c35"
                         id="cns-service-name-input"
                         name="name"
                         role="group"
                         style={undefined}
                       >
                         <label
-                          className="c21 c22"
+                          className="c24 c25"
                           htmlFor="cns-service-name-input"
                         >
                           Attach to new CNS service name
                         </label>
                         <div
-                          className="c33"
+                          className="c36"
                         >
                           <input
-                            className="c34"
+                            className="c37"
                             disabled={false}
                             id="cns-service-name-input"
                             onBlur={null}
@@ -7830,13 +8008,13 @@ exports[`renders <Cns services /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c30"
+                    className="c33"
                   >
                     <div
-                      className="c35"
+                      className="c38"
                     >
                       <button
-                        className="c36 c37 c38 c39"
+                        className="c39 c40 c41 c42"
                         data-ui-button="true"
                         disabled={undefined}
                         href=""
@@ -7854,36 +8032,36 @@ exports[`renders <Cns services /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c19"
+        className="c22"
       >
         <div
           className="c2"
         >
           <div
-            className="c32"
+            className="c35"
             name="cns-enabled"
             role="group"
             style={undefined}
           >
             <div
-              className="c40"
+              className="c43"
             >
               <label
-                className="c21 c22"
+                className="c24 c25"
                 disabled={false}
                 htmlFor="t"
               >
                 Disabled CNS
               </label>
               <div
-                className="c41"
+                className="c44"
               >
                 <div
-                  className="c42"
+                  className="c45"
                 >
                   <input
                     checked={true}
-                    className="c43 c44"
+                    className="c46 c47"
                     disabled={false}
                     id="t"
                     onBlur={undefined}
@@ -7892,7 +8070,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c43 c45"
+                    className="c46 c48"
                     disabled={false}
                     htmlFor="t"
                     id="t"
@@ -7901,7 +8079,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c43 c21 c22"
+                    className="c46 c24 c25"
                     disabled={false}
                     htmlFor="t"
                     id="t"
@@ -7957,7 +8135,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   display: block;
 }
 
-.c7 {
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7971,18 +8149,42 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c11 {
+.c14 {
   margin-top: 1.875rem;
 }
 
-.c16 {
+.c19 {
   margin-left: 0.375rem;
 }
 
-.c10 {
+.c13 {
   padding: 1.875rem;
 }
 
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -7990,7 +8192,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c15 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -8007,7 +8209,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c13 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8031,7 +8233,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   align-items: center;
 }
 
-.c8 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -8053,7 +8255,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c9 {
+.c12 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -8069,7 +8271,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c12 {
+.c15 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -8081,13 +8283,13 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c14 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c17 {
+.c20 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -8100,27 +8302,27 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   align-items: center;
 }
 
-.c19 {
+.c22 {
   display: none;
 }
 
-.c19:checked + label {
+.c22:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c19:checked + label:after {
+.c22:checked + label:after {
   -webkit-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c19:checked + label:active {
+.c22:checked + label:active {
   box-shadow: none;
 }
 
-.c20 {
+.c23 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -8139,24 +8341,24 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c20::selection {
+.c23::selection {
   background: none;
 }
 
-.c20:active {
+.c23:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c20:hover {
+.c23:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c20:hover:after {
+.c23:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c20:after,
-.c20:before {
+.c23:after,
+.c23:before {
   position: relative;
   display: block;
   content: '';
@@ -8164,7 +8366,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   height: 100%;
 }
 
-.c20:after {
+.c23:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -8176,11 +8378,11 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c20:active {
+.c23:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c20:before {
+.c23:before {
   display: none;
 }
 
@@ -8188,7 +8390,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   font-weight: 200;
 }
 
-.c18 {
+.c21 {
   margin: 0 6px;
 }
 
@@ -8229,7 +8431,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -8238,7 +8440,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -8247,7 +8449,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c7 {
+  .c10 {
     -webkit-flex-basis: 75%;
     -ms-flex-preferred-size: 75%;
     flex-basis: 75%;
@@ -8280,11 +8482,15 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
           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"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
           >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/private-cloud/install/cns"
+            >
+              Read the docs
+            </a>
           </a>
         </p>
       </div>
@@ -8294,54 +8500,54 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
     className="c3"
   >
     <div
-      className="c7"
+      className="c10"
     >
       <div
-        className="c8"
+        className="c11"
         disabled={false}
         name="card"
       >
         <div
-          className="c9 c8"
+          className="c12 c11"
           disabled={false}
           name="card-outlet"
         >
           <div
-            className="c10"
+            className="c13"
           />
         </div>
       </div>
       <div
-        className="c11"
+        className="c14"
       >
         <div
           className="c2"
         >
           <div
-            className="c12"
+            className="c15"
             name="cns-enabled"
             role="group"
             style={undefined}
           >
             <div
-              className="c13"
+              className="c16"
             >
               <label
-                className="c14 c15"
+                className="c17 c18"
                 disabled={false}
                 htmlFor="w"
               >
                 Disabled CNS
               </label>
               <div
-                className="c16"
+                className="c19"
               >
                 <div
-                  className="c17"
+                  className="c20"
                 >
                   <input
                     checked={false}
-                    className="c18 c19"
+                    className="c21 c22"
                     disabled={false}
                     id="w"
                     onBlur={undefined}
@@ -8350,7 +8556,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
                   />
                   <label
                     checked={false}
-                    className="c18 c20"
+                    className="c21 c23"
                     disabled={false}
                     htmlFor="w"
                     id="w"
@@ -8359,7 +8565,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
                   />
                   <label
                     checked={false}
-                    className="c18 c14 c15"
+                    className="c21 c17 c18"
                     disabled={false}
                     htmlFor="w"
                     id="w"
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
index ca712401..4e894137 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
@@ -6,28 +6,28 @@ Array [
   margin-bottom: 1.125rem;
 }
 
-.c9 {
+.c12 {
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c23 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c21 {
+.c24 {
   margin-top: 1.875rem;
 }
 
-.c26 {
+.c29 {
   margin-bottom: 0.75rem;
 }
 
-.c24 {
+.c27 {
   padding: 8rem;
 }
 
-.c7 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -47,7 +47,7 @@ Array [
   align-content: stretch;
 }
 
-.c25 {
+.c28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -78,7 +78,7 @@ Array [
   align-items: center;
 }
 
-.c8 {
+.c11 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -95,7 +95,13 @@ Array [
   display: block;
 }
 
-.c15 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c18 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -103,38 +109,56 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c18[type='checkbox'],
+.c18[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c18[type='number']::-webkit-inner-spin-button,
+.c18[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c18[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c15[type='search']::-webkit-search-cancel-button,
-.c15[type='search']::-webkit-search-decoration {
+.c18[type='search']::-webkit-search-cancel-button,
+.c18[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c18::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -142,7 +166,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c19 {
+.c22 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -193,7 +217,7 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c28 {
+.c31 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -201,7 +225,7 @@ Array [
   font-size: 1.3125rem;
 }
 
-.c23 {
+.c26 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -223,33 +247,33 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c14 {
+.c17 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c17:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c17:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c17:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c17:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c17:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c19 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -267,7 +291,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c19::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -284,7 +308,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c16 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -293,12 +317,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c20 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c15 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -322,25 +346,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c15 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c15 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c12 div[type='checkbox'],
-.c12 div[type='checkbox'] input,
-.c12 div[type='checkbox'] label {
+.c15 div[type='checkbox'],
+.c15 div[type='checkbox'] input,
+.c15 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c14 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -352,23 +376,23 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c21 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c27 {
+.c30 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c22 {
+.c25 {
   width: calc(100% - 0.125rem);
 }
 
-.c10 {
+.c13 {
   margin-bottom: 0 !important;
 }
 
@@ -437,31 +461,35 @@ Array [
                     Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                      
                     <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
+                        className="c7 c8 c9"
                     >
-                        Read the docs
+                        <a
+                            rel="noopener noreferrer"
+                            target="__blank"
+                            to="https://docs.joyent.com/private-cloud/install/cns"
+                        >
+                            Read the docs
+                        </a>
                     </a>
                 </p>
             </div>
         </div>
     </div>
     <div
-        className="c7"
+        className="c10"
     >
         <div
-            className="c8"
+            className="c11"
         >
             <div
-                className="c9"
+                className="c12"
             >
                 <form
-                    className="c10"
+                    className="c13"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c14"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -469,11 +497,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c15"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -481,30 +509,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c17 c18"
                                     disabled={false}
                                     id="l"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c19"
                                     htmlFor="l"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c20"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c21 c22"
                                     htmlFor="l"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c23"
                                     >
                                         Enable Firewall
                                     </div>
@@ -516,25 +544,25 @@ Array [
             </div>
         </div>
         <div
-            className="c8"
+            className="c11"
         />
     </div>
     <div
-        className="c21"
+        className="c24"
     >
         <div
-            className="c22 c23"
+            className="c25 c26"
             disabled={false}
             name="card"
         >
             <div
-                className="c24"
+                className="c27"
             >
                 <div
-                    className="c25"
+                    className="c28"
                 >
                     <div
-                        className="c26"
+                        className="c29"
                     >
                         <svg
                             height={109}
@@ -823,7 +851,7 @@ Array [
                         </svg>
                     </div>
                     <h3
-                        className="c27 c28"
+                        className="c30 c31"
                     >
                         Sorry, but we weren’t able to find any firewall rules.
                     </h3>
@@ -836,28 +864,28 @@ Array [
   margin-bottom: 1.125rem;
 }
 
-.c9 {
+.c12 {
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c23 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c21 {
+.c24 {
   margin-top: 1.875rem;
 }
 
-.c26 {
+.c29 {
   margin-bottom: 0.75rem;
 }
 
-.c24 {
+.c27 {
   padding: 8rem;
 }
 
-.c7 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -877,7 +905,7 @@ Array [
   align-content: stretch;
 }
 
-.c25 {
+.c28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -908,7 +936,7 @@ Array [
   align-items: center;
 }
 
-.c8 {
+.c11 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -925,7 +953,13 @@ Array [
   display: block;
 }
 
-.c15 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c18 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -933,38 +967,56 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c18[type='checkbox'],
+.c18[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c18[type='number']::-webkit-inner-spin-button,
+.c18[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c18[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c15[type='search']::-webkit-search-cancel-button,
-.c15[type='search']::-webkit-search-decoration {
+.c18[type='search']::-webkit-search-cancel-button,
+.c18[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c18::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -972,7 +1024,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c19 {
+.c22 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -1023,7 +1075,7 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c28 {
+.c31 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -1031,7 +1083,7 @@ Array [
   font-size: 1.3125rem;
 }
 
-.c23 {
+.c26 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1053,33 +1105,33 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c14 {
+.c17 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c17:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c17:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c17:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c17:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c17:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c19 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -1097,7 +1149,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c19::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -1114,7 +1166,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c16 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -1123,12 +1175,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c20 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c15 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1152,25 +1204,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c15 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c15 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c12 div[type='checkbox'],
-.c12 div[type='checkbox'] input,
-.c12 div[type='checkbox'] label {
+.c15 div[type='checkbox'],
+.c15 div[type='checkbox'] input,
+.c15 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c14 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -1182,23 +1234,23 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c21 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c27 {
+.c30 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c22 {
+.c25 {
   width: calc(100% - 0.125rem);
 }
 
-.c10 {
+.c13 {
   margin-bottom: 0 !important;
 }
 
@@ -1267,31 +1319,35 @@ Array [
                     Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                      
                     <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
+                        className="c7 c8 c9"
                     >
-                        Read the docs
+                        <a
+                            rel="noopener noreferrer"
+                            target="__blank"
+                            to="https://docs.joyent.com/private-cloud/install/cns"
+                        >
+                            Read the docs
+                        </a>
                     </a>
                 </p>
             </div>
         </div>
     </div>
     <div
-        className="c7"
+        className="c10"
     >
         <div
-            className="c8"
+            className="c11"
         >
             <div
-                className="c9"
+                className="c12"
             >
                 <form
-                    className="c10"
+                    className="c13"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c14"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -1299,11 +1355,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c15"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -1311,30 +1367,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c17 c18"
                                     disabled={false}
                                     id="n"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c19"
                                     htmlFor="n"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c20"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c21 c22"
                                     htmlFor="n"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c23"
                                     >
                                         Enable Firewall
                                     </div>
@@ -1346,13 +1402,13 @@ Array [
             </div>
         </div>
         <div
-            className="c8"
+            className="c11"
         >
             <form
-                className="c10"
+                className="c13"
             >
                 <div
-                    className="c11"
+                    className="c14"
                     id="fw-toggle-inactive"
                     name="inactive"
                     role="group"
@@ -1360,11 +1416,11 @@ Array [
                     type="checkbox"
                 >
                     <li
-                        className="c12"
+                        className="c15"
                     >
                         <div
                             checked={false}
-                            className="c13"
+                            className="c16"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
@@ -1372,30 +1428,30 @@ Array [
                         >
                             <input
                                 checked={false}
-                                className="c14 c15"
+                                className="c17 c18"
                                 disabled={false}
                                 id="p"
                                 onBlur={undefined}
                                 type="checkbox"
                             />
                             <label
-                                className="c16"
+                                className="c19"
                                 htmlFor="p"
                             />
                         </div>
                         <div
                             checked={false}
-                            className="c17"
+                            className="c20"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
                         >
                             <label
-                                className="c18 c19"
+                                className="c21 c22"
                                 htmlFor="p"
                             >
                                 <div
-                                    className="c20"
+                                    className="c23"
                                 >
                                     Show inactive rules
                                 </div>
@@ -1407,21 +1463,21 @@ Array [
         </div>
     </div>
     <div
-        className="c21"
+        className="c24"
     >
         <div
-            className="c22 c23"
+            className="c25 c26"
             disabled={false}
             name="card"
         >
             <div
-                className="c24"
+                className="c27"
             >
                 <div
-                    className="c25"
+                    className="c28"
                 >
                     <div
-                        className="c26"
+                        className="c29"
                     >
                         <svg
                             height={109}
@@ -1710,7 +1766,7 @@ Array [
                         </svg>
                     </div>
                     <h3
-                        className="c27 c28"
+                        className="c30 c31"
                     >
                         Sorry, but we weren’t able to find any firewall rules.
                     </h3>
@@ -1728,28 +1784,28 @@ Array [
   margin-bottom: 1.125rem;
 }
 
-.c9 {
+.c12 {
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c23 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c21 {
+.c24 {
   margin-top: 1.875rem;
 }
 
-.c26 {
+.c29 {
   margin-bottom: 0.75rem;
 }
 
-.c24 {
+.c27 {
   padding: 8rem;
 }
 
-.c7 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1769,7 +1825,7 @@ Array [
   align-content: stretch;
 }
 
-.c25 {
+.c28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1800,7 +1856,7 @@ Array [
   align-items: center;
 }
 
-.c8 {
+.c11 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1817,7 +1873,13 @@ Array [
   display: block;
 }
 
-.c15 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c18 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1825,38 +1887,56 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c18[type='checkbox'],
+.c18[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c18[type='number']::-webkit-inner-spin-button,
+.c18[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c18[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c15[type='search']::-webkit-search-cancel-button,
-.c15[type='search']::-webkit-search-decoration {
+.c18[type='search']::-webkit-search-cancel-button,
+.c18[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c18::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -1864,7 +1944,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c19 {
+.c22 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -1915,7 +1995,7 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c28 {
+.c31 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -1923,7 +2003,7 @@ Array [
   font-size: 1.3125rem;
 }
 
-.c23 {
+.c26 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1945,33 +2025,33 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c14 {
+.c17 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c17:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c17:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c17:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c17:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c17:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c19 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -1989,7 +2069,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c19::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -2006,7 +2086,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c16 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -2015,12 +2095,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c20 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c15 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2044,25 +2124,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c15 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c15 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c12 div[type='checkbox'],
-.c12 div[type='checkbox'] input,
-.c12 div[type='checkbox'] label {
+.c15 div[type='checkbox'],
+.c15 div[type='checkbox'] input,
+.c15 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c14 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -2074,23 +2154,23 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c21 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c27 {
+.c30 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c22 {
+.c25 {
   width: calc(100% - 0.125rem);
 }
 
-.c10 {
+.c13 {
   margin-bottom: 0 !important;
 }
 
@@ -2159,31 +2239,35 @@ Array [
                     Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                      
                     <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
+                        className="c7 c8 c9"
                     >
-                        Read the docs
+                        <a
+                            rel="noopener noreferrer"
+                            target="__blank"
+                            to="https://docs.joyent.com/private-cloud/install/cns"
+                        >
+                            Read the docs
+                        </a>
                     </a>
                 </p>
             </div>
         </div>
     </div>
     <div
-        className="c7"
+        className="c10"
     >
         <div
-            className="c8"
+            className="c11"
         >
             <div
-                className="c9"
+                className="c12"
             >
                 <form
-                    className="c10"
+                    className="c13"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c14"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -2191,11 +2275,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c15"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -2203,30 +2287,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c17 c18"
                                     disabled={false}
                                     id="r"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c19"
                                     htmlFor="r"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c20"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c21 c22"
                                     htmlFor="r"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c23"
                                     >
                                         Enable Firewall
                                     </div>
@@ -2238,25 +2322,25 @@ Array [
             </div>
         </div>
         <div
-            className="c8"
+            className="c11"
         />
     </div>
     <div
-        className="c21"
+        className="c24"
     >
         <div
-            className="c22 c23"
+            className="c25 c26"
             disabled={false}
             name="card"
         >
             <div
-                className="c24"
+                className="c27"
             >
                 <div
-                    className="c25"
+                    className="c28"
                 >
                     <div
-                        className="c26"
+                        className="c29"
                     >
                         <svg
                             height={109}
@@ -2545,7 +2629,7 @@ Array [
                         </svg>
                     </div>
                     <h3
-                        className="c27 c28"
+                        className="c30 c31"
                     >
                         Sorry, but we weren’t able to find any firewall rules.
                     </h3>
@@ -2558,28 +2642,28 @@ Array [
   margin-bottom: 1.125rem;
 }
 
-.c9 {
+.c12 {
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c23 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c21 {
+.c24 {
   margin-top: 1.875rem;
 }
 
-.c26 {
+.c29 {
   margin-bottom: 0.75rem;
 }
 
-.c24 {
+.c27 {
   padding: 8rem;
 }
 
-.c7 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2599,7 +2683,7 @@ Array [
   align-content: stretch;
 }
 
-.c25 {
+.c28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2630,7 +2714,7 @@ Array [
   align-items: center;
 }
 
-.c8 {
+.c11 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -2647,7 +2731,13 @@ Array [
   display: block;
 }
 
-.c15 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c18 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2655,38 +2745,56 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c18[type='checkbox'],
+.c18[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c18[type='number']::-webkit-inner-spin-button,
+.c18[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c18[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c15[type='search']::-webkit-search-cancel-button,
-.c15[type='search']::-webkit-search-decoration {
+.c18[type='search']::-webkit-search-cancel-button,
+.c18[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c18::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -2694,7 +2802,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c19 {
+.c22 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -2745,7 +2853,7 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c28 {
+.c31 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -2753,7 +2861,7 @@ Array [
   font-size: 1.3125rem;
 }
 
-.c23 {
+.c26 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2775,33 +2883,33 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c14 {
+.c17 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c17:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c17:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c17:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c17:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c17:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c19 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -2819,7 +2927,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c19::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -2836,7 +2944,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c16 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -2845,12 +2953,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c20 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c15 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2874,25 +2982,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c15 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c15 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c12 div[type='checkbox'],
-.c12 div[type='checkbox'] input,
-.c12 div[type='checkbox'] label {
+.c15 div[type='checkbox'],
+.c15 div[type='checkbox'] input,
+.c15 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c14 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -2904,23 +3012,23 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c21 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c27 {
+.c30 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c22 {
+.c25 {
   width: calc(100% - 0.125rem);
 }
 
-.c10 {
+.c13 {
   margin-bottom: 0 !important;
 }
 
@@ -2989,31 +3097,35 @@ Array [
                     Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                      
                     <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
+                        className="c7 c8 c9"
                     >
-                        Read the docs
+                        <a
+                            rel="noopener noreferrer"
+                            target="__blank"
+                            to="https://docs.joyent.com/private-cloud/install/cns"
+                        >
+                            Read the docs
+                        </a>
                     </a>
                 </p>
             </div>
         </div>
     </div>
     <div
-        className="c7"
+        className="c10"
     >
         <div
-            className="c8"
+            className="c11"
         >
             <div
-                className="c9"
+                className="c12"
             >
                 <form
-                    className="c10"
+                    className="c13"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c14"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -3021,11 +3133,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c15"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -3033,30 +3145,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c17 c18"
                                     disabled={false}
                                     id="t"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c19"
                                     htmlFor="t"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c20"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c21 c22"
                                     htmlFor="t"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c23"
                                     >
                                         Enable Firewall
                                     </div>
@@ -3068,13 +3180,13 @@ Array [
             </div>
         </div>
         <div
-            className="c8"
+            className="c11"
         >
             <form
-                className="c10"
+                className="c13"
             >
                 <div
-                    className="c11"
+                    className="c14"
                     id="fw-toggle-inactive"
                     name="inactive"
                     role="group"
@@ -3082,11 +3194,11 @@ Array [
                     type="checkbox"
                 >
                     <li
-                        className="c12"
+                        className="c15"
                     >
                         <div
                             checked={false}
-                            className="c13"
+                            className="c16"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
@@ -3094,30 +3206,30 @@ Array [
                         >
                             <input
                                 checked={false}
-                                className="c14 c15"
+                                className="c17 c18"
                                 disabled={false}
                                 id="v"
                                 onBlur={undefined}
                                 type="checkbox"
                             />
                             <label
-                                className="c16"
+                                className="c19"
                                 htmlFor="v"
                             />
                         </div>
                         <div
                             checked={false}
-                            className="c17"
+                            className="c20"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
                         >
                             <label
-                                className="c18 c19"
+                                className="c21 c22"
                                 htmlFor="v"
                             >
                                 <div
-                                    className="c20"
+                                    className="c23"
                                 >
                                     Show inactive rules
                                 </div>
@@ -3129,21 +3241,21 @@ Array [
         </div>
     </div>
     <div
-        className="c21"
+        className="c24"
     >
         <div
-            className="c22 c23"
+            className="c25 c26"
             disabled={false}
             name="card"
         >
             <div
-                className="c24"
+                className="c27"
             >
                 <div
-                    className="c25"
+                    className="c28"
                 >
                     <div
-                        className="c26"
+                        className="c29"
                     >
                         <svg
                             height={109}
@@ -3432,7 +3544,7 @@ Array [
                         </svg>
                     </div>
                     <h3
-                        className="c27 c28"
+                        className="c30 c31"
                     >
                         Sorry, but we weren’t able to find any firewall rules.
                     </h3>
@@ -3450,7 +3562,7 @@ Array [
   margin-bottom: 1.125rem;
 }
 
-.c12 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3470,7 +3582,7 @@ Array [
   align-content: stretch;
 }
 
-.c13 {
+.c16 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3487,19 +3599,43 @@ Array [
   display: block;
 }
 
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
 .c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
+.c11 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
 }
 
-.c9 {
+.c12 {
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
 }
 
-.c10 {
+.c13 {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
 }
@@ -3511,7 +3647,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c7 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3539,7 +3675,7 @@ Array [
   flex: 1 0 auto;
 }
 
-.c11 {
+.c14 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -3655,39 +3791,43 @@ Array [
                     Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                      
                     <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
+                        className="c7 c8 c9"
                     >
-                        Read the docs
+                        <a
+                            rel="noopener noreferrer"
+                            target="__blank"
+                            to="https://docs.joyent.com/private-cloud/install/cns"
+                        >
+                            Read the docs
+                        </a>
                     </a>
                 </p>
             </div>
         </div>
     </div>
     <div
-        className="c7"
+        className="c10"
     >
         <svg
             height="10"
             width="28"
         >
             <rect
-                className="c8"
+                className="c11"
                 height="6"
                 width="6"
                 x="2"
                 y="2"
             />
             <rect
-                className="c9 c8"
+                className="c12 c11"
                 height="6"
                 width="6"
                 x="11"
                 y="2"
             />
             <rect
-                className="c10 c8"
+                className="c13 c11"
                 height="6"
                 width="6"
                 x="20"
@@ -3695,19 +3835,19 @@ Array [
             />
         </svg>
         <p
-            className="c11 c6"
+            className="c14 c6"
         >
             Loading...
         </p>
     </div>
     <div
-        className="c12"
+        className="c15"
     >
         <div
-            className="c13"
+            className="c16"
         />
         <div
-            className="c13"
+            className="c16"
         />
     </div>
 </div>,
@@ -3715,7 +3855,7 @@ Array [
   margin-bottom: 1.125rem;
 }
 
-.c12 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3735,7 +3875,7 @@ Array [
   align-content: stretch;
 }
 
-.c13 {
+.c16 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3752,19 +3892,43 @@ Array [
   display: block;
 }
 
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
 .c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
+.c11 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
 }
 
-.c9 {
+.c12 {
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
 }
 
-.c10 {
+.c13 {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
 }
@@ -3776,7 +3940,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c7 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3804,7 +3968,7 @@ Array [
   flex: 1 0 auto;
 }
 
-.c11 {
+.c14 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -3920,39 +4084,43 @@ Array [
                     Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                      
                     <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
+                        className="c7 c8 c9"
                     >
-                        Read the docs
+                        <a
+                            rel="noopener noreferrer"
+                            target="__blank"
+                            to="https://docs.joyent.com/private-cloud/install/cns"
+                        >
+                            Read the docs
+                        </a>
                     </a>
                 </p>
             </div>
         </div>
     </div>
     <div
-        className="c7"
+        className="c10"
     >
         <svg
             height="10"
             width="28"
         >
             <rect
-                className="c8"
+                className="c11"
                 height="6"
                 width="6"
                 x="2"
                 y="2"
             />
             <rect
-                className="c9 c8"
+                className="c12 c11"
                 height="6"
                 width="6"
                 x="11"
                 y="2"
             />
             <rect
-                className="c10 c8"
+                className="c13 c11"
                 height="6"
                 width="6"
                 x="20"
@@ -3960,19 +4128,19 @@ Array [
             />
         </svg>
         <p
-            className="c11 c6"
+            className="c14 c6"
         >
             Loading...
         </p>
     </div>
     <div
-        className="c12"
+        className="c15"
     >
         <div
-            className="c13"
+            className="c16"
         />
         <div
-            className="c13"
+            className="c16"
         />
     </div>
 </div>,
@@ -3984,32 +4152,32 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c15 {
+.c18 {
   margin-right: 1.875rem;
 }
 
-.c26 {
+.c29 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c27 {
+.c30 {
   margin-top: 1.875rem;
 }
 
-.c32 {
+.c35 {
   margin-bottom: 0.75rem;
 }
 
-.c7 {
+.c10 {
   margin-bottom: 1.875rem;
 }
 
-.c30 {
+.c33 {
   padding: 8rem;
 }
 
-.c13 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4029,7 +4197,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c31 {
+.c34 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4060,7 +4228,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   align-items: center;
 }
 
-.c14 {
+.c17 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -4077,7 +4245,13 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   display: block;
 }
 
-.c21 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c24 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -4085,38 +4259,56 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   overflow: visible;
 }
 
-.c21[type='checkbox'],
-.c21[type='radio'] {
+.c24[type='checkbox'],
+.c24[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c21[type='number']::-webkit-inner-spin-button,
-.c21[type='number']::-webkit-outer-spin-button {
+.c24[type='number']::-webkit-inner-spin-button,
+.c24[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c21[type='search'] {
+.c24[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c21[type='search']::-webkit-search-cancel-button,
-.c21[type='search']::-webkit-search-decoration {
+.c24[type='search']::-webkit-search-cancel-button,
+.c24[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c21::-webkit-file-upload-button {
+.c24::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -4124,7 +4316,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c25 {
+.c28 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -4175,7 +4367,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c34 {
+.c37 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -4183,7 +4375,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c11 {
+.c14 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -4191,7 +4383,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c8 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4204,23 +4396,23 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   width: 100%;
 }
 
-.c9 {
+.c12 {
   border-radius: 0.1875rem 0 0 0.1875rem;
   min-width: 0.75rem;
   background-color: rgb(0,152,88);
   background-color: rgb(210,67,58);
 }
 
-.c10 {
+.c13 {
   padding: 1.125rem 1.125rem;
 }
 
-.c12 {
+.c15 {
   line-height: 0.875rem;
   font-size: 0.8125rem;
 }
 
-.c29 {
+.c32 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4242,33 +4434,33 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c20 {
+.c23 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c20:checked + label::after {
+.c23:checked + label::after {
   opacity: 1;
 }
 
-.c20:selected + label::after {
+.c23:selected + label::after {
   opacity: 1;
 }
 
-.c20:checked + label {
+.c23:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c20:selected + label {
+.c23:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c20:disabled + label {
+.c23:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c22 {
+.c25 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -4286,7 +4478,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c22::after {
+.c25::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -4303,7 +4495,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c19 {
+.c22 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -4312,12 +4504,12 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c23 label {
+.c26 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c18 {
+.c21 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4341,25 +4533,25 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c18 label {
+.c21 label {
   font-weight: 400;
 }
 
-.c18 label::after {
+.c21 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c18 div[type='checkbox'],
-.c18 div[type='checkbox'] input,
-.c18 div[type='checkbox'] label {
+.c21 div[type='checkbox'],
+.c21 div[type='checkbox'] input,
+.c21 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c17 {
+.c20 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -4371,23 +4563,23 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c24 {
+.c27 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c33 {
+.c36 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c28 {
+.c31 {
   width: calc(100% - 0.125rem);
 }
 
-.c16 {
+.c19 {
   margin-bottom: 0 !important;
 }
 
@@ -4456,35 +4648,39 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
           Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
            
           <a
-            href="https://docs.joyent.com/private-cloud/install/cns"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
           >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/private-cloud/install/cns"
+            >
+              Read the docs
+            </a>
           </a>
         </p>
       </div>
     </div>
   </div>
   <div
-    className="c7"
+    className="c10"
   >
     <div
-      className="c8"
+      className="c11"
     >
       <div
-        className="c9"
+        className="c12"
       />
       <div
-        className="c10"
+        className="c13"
       >
         <h4
-          className="c11"
+          className="c14"
         >
           Ooops!
         </h4>
         <p
-          className="c12 c6"
+          className="c15 c6"
         >
           An error occurred while loading your firewall rules
         </p>
@@ -4492,20 +4688,20 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c13"
+    className="c16"
   >
     <div
-      className="c14"
+      className="c17"
     >
       <div
-        className="c15"
+        className="c18"
       >
         <form
-          className="c16"
+          className="c19"
           onChange={[Function]}
         >
           <div
-            className="c17"
+            className="c20"
             id="fw-toggle-firewall"
             name="enabled"
             role="group"
@@ -4513,11 +4709,11 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
             type="checkbox"
           >
             <li
-              className="c18"
+              className="c21"
             >
               <div
                 checked={false}
-                className="c19"
+                className="c22"
                 disabled={false}
                 id="fw-toggle-firewall"
                 onBlur={undefined}
@@ -4525,30 +4721,30 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
               >
                 <input
                   checked={false}
-                  className="c20 c21"
+                  className="c23 c24"
                   disabled={false}
                   id="x"
                   onBlur={undefined}
                   type="checkbox"
                 />
                 <label
-                  className="c22"
+                  className="c25"
                   htmlFor="x"
                 />
               </div>
               <div
                 checked={false}
-                className="c23"
+                className="c26"
                 disabled={false}
                 id="fw-toggle-firewall"
                 onBlur={undefined}
               >
                 <label
-                  className="c24 c25"
+                  className="c27 c28"
                   htmlFor="x"
                 >
                   <div
-                    className="c26"
+                    className="c29"
                   >
                     Enable Firewall
                   </div>
@@ -4560,25 +4756,25 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c14"
+      className="c17"
     />
   </div>
   <div
-    className="c27"
+    className="c30"
   >
     <div
-      className="c28 c29"
+      className="c31 c32"
       disabled={false}
       name="card"
     >
       <div
-        className="c30"
+        className="c33"
       >
         <div
-          className="c31"
+          className="c34"
         >
           <div
-            className="c32"
+            className="c35"
           >
             <svg
               height={109}
@@ -4867,7 +5063,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
             </svg>
           </div>
           <h3
-            className="c33 c34"
+            className="c36 c37"
           >
             Sorry, but we weren’t able to find any firewall rules.
           </h3>
@@ -4883,32 +5079,32 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c15 {
+.c18 {
   margin-right: 1.875rem;
 }
 
-.c26 {
+.c29 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c27 {
+.c30 {
   margin-top: 1.875rem;
 }
 
-.c32 {
+.c35 {
   margin-bottom: 0.75rem;
 }
 
-.c7 {
+.c10 {
   margin-bottom: 1.875rem;
 }
 
-.c30 {
+.c33 {
   padding: 8rem;
 }
 
-.c13 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4928,7 +5124,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c31 {
+.c34 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4959,7 +5155,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   align-items: center;
 }
 
-.c14 {
+.c17 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -4976,7 +5172,13 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   display: block;
 }
 
-.c21 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c24 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -4984,38 +5186,56 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   overflow: visible;
 }
 
-.c21[type='checkbox'],
-.c21[type='radio'] {
+.c24[type='checkbox'],
+.c24[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c21[type='number']::-webkit-inner-spin-button,
-.c21[type='number']::-webkit-outer-spin-button {
+.c24[type='number']::-webkit-inner-spin-button,
+.c24[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c21[type='search'] {
+.c24[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c21[type='search']::-webkit-search-cancel-button,
-.c21[type='search']::-webkit-search-decoration {
+.c24[type='search']::-webkit-search-cancel-button,
+.c24[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c21::-webkit-file-upload-button {
+.c24::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -5023,7 +5243,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c25 {
+.c28 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -5074,7 +5294,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c34 {
+.c37 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -5082,7 +5302,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c11 {
+.c14 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -5090,7 +5310,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c8 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5103,23 +5323,23 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   width: 100%;
 }
 
-.c9 {
+.c12 {
   border-radius: 0.1875rem 0 0 0.1875rem;
   min-width: 0.75rem;
   background-color: rgb(0,152,88);
   background-color: rgb(210,67,58);
 }
 
-.c10 {
+.c13 {
   padding: 1.125rem 1.125rem;
 }
 
-.c12 {
+.c15 {
   line-height: 0.875rem;
   font-size: 0.8125rem;
 }
 
-.c29 {
+.c32 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5141,33 +5361,33 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c20 {
+.c23 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c20:checked + label::after {
+.c23:checked + label::after {
   opacity: 1;
 }
 
-.c20:selected + label::after {
+.c23:selected + label::after {
   opacity: 1;
 }
 
-.c20:checked + label {
+.c23:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c20:selected + label {
+.c23:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c20:disabled + label {
+.c23:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c22 {
+.c25 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -5185,7 +5405,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c22::after {
+.c25::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -5202,7 +5422,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c19 {
+.c22 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -5211,12 +5431,12 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c23 label {
+.c26 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c18 {
+.c21 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5240,25 +5460,25 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c18 label {
+.c21 label {
   font-weight: 400;
 }
 
-.c18 label::after {
+.c21 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c18 div[type='checkbox'],
-.c18 div[type='checkbox'] input,
-.c18 div[type='checkbox'] label {
+.c21 div[type='checkbox'],
+.c21 div[type='checkbox'] input,
+.c21 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c17 {
+.c20 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -5270,23 +5490,23 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c24 {
+.c27 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c33 {
+.c36 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c28 {
+.c31 {
   width: calc(100% - 0.125rem);
 }
 
-.c16 {
+.c19 {
   margin-bottom: 0 !important;
 }
 
@@ -5355,35 +5575,39 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
           Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
            
           <a
-            href="https://docs.joyent.com/private-cloud/install/cns"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
           >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/private-cloud/install/cns"
+            >
+              Read the docs
+            </a>
           </a>
         </p>
       </div>
     </div>
   </div>
   <div
-    className="c7"
+    className="c10"
   >
     <div
-      className="c8"
+      className="c11"
     >
       <div
-        className="c9"
+        className="c12"
       />
       <div
-        className="c10"
+        className="c13"
       >
         <h4
-          className="c11"
+          className="c14"
         >
           Ooops!
         </h4>
         <p
-          className="c12 c6"
+          className="c15 c6"
         >
           error
         </p>
@@ -5391,20 +5615,20 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c13"
+    className="c16"
   >
     <div
-      className="c14"
+      className="c17"
     >
       <div
-        className="c15"
+        className="c18"
       >
         <form
-          className="c16"
+          className="c19"
           onChange={[Function]}
         >
           <div
-            className="c17"
+            className="c20"
             id="fw-toggle-firewall"
             name="enabled"
             role="group"
@@ -5412,11 +5636,11 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
             type="checkbox"
           >
             <li
-              className="c18"
+              className="c21"
             >
               <div
                 checked={false}
-                className="c19"
+                className="c22"
                 disabled={false}
                 id="fw-toggle-firewall"
                 onBlur={undefined}
@@ -5424,30 +5648,30 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
               >
                 <input
                   checked={false}
-                  className="c20 c21"
+                  className="c23 c24"
                   disabled={false}
                   id="z"
                   onBlur={undefined}
                   type="checkbox"
                 />
                 <label
-                  className="c22"
+                  className="c25"
                   htmlFor="z"
                 />
               </div>
               <div
                 checked={false}
-                className="c23"
+                className="c26"
                 disabled={false}
                 id="fw-toggle-firewall"
                 onBlur={undefined}
               >
                 <label
-                  className="c24 c25"
+                  className="c27 c28"
                   htmlFor="z"
                 >
                   <div
-                    className="c26"
+                    className="c29"
                   >
                     Enable Firewall
                   </div>
@@ -5459,25 +5683,25 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c14"
+      className="c17"
     />
   </div>
   <div
-    className="c27"
+    className="c30"
   >
     <div
-      className="c28 c29"
+      className="c31 c32"
       disabled={false}
       name="card"
     >
       <div
-        className="c30"
+        className="c33"
       >
         <div
-          className="c31"
+          className="c34"
         >
           <div
-            className="c32"
+            className="c35"
           >
             <svg
               height={109}
@@ -5766,7 +5990,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
             </svg>
           </div>
           <h3
-            className="c33 c34"
+            className="c36 c37"
           >
             Sorry, but we weren’t able to find any firewall rules.
           </h3>
@@ -5783,16 +6007,16 @@ Array [
   margin-bottom: 1.125rem;
 }
 
-.c9 {
+.c12 {
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c23 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c7 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5812,7 +6036,7 @@ Array [
   align-content: stretch;
 }
 
-.c8 {
+.c11 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -5829,7 +6053,13 @@ Array [
   display: block;
 }
 
-.c15 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c18 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -5837,38 +6067,56 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c18[type='checkbox'],
+.c18[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c18[type='number']::-webkit-inner-spin-button,
+.c18[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c18[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c15[type='search']::-webkit-search-cancel-button,
-.c15[type='search']::-webkit-search-decoration {
+.c18[type='search']::-webkit-search-cancel-button,
+.c18[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c18::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -5876,7 +6124,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c19 {
+.c22 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -5927,33 +6175,33 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c14 {
+.c17 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c17:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c17:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c17:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c17:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c17:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c19 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -5971,7 +6219,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c19::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -5988,7 +6236,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c16 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -5997,12 +6245,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c20 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c15 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6026,25 +6274,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c15 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c15 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c12 div[type='checkbox'],
-.c12 div[type='checkbox'] input,
-.c12 div[type='checkbox'] label {
+.c15 div[type='checkbox'],
+.c15 div[type='checkbox'] input,
+.c15 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c14 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -6056,14 +6304,14 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c21 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c10 {
+.c13 {
   margin-bottom: 0 !important;
 }
 
@@ -6132,31 +6380,35 @@ Array [
                     Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                      
                     <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
+                        className="c7 c8 c9"
                     >
-                        Read the docs
+                        <a
+                            rel="noopener noreferrer"
+                            target="__blank"
+                            to="https://docs.joyent.com/private-cloud/install/cns"
+                        >
+                            Read the docs
+                        </a>
                     </a>
                 </p>
             </div>
         </div>
     </div>
     <div
-        className="c7"
+        className="c10"
     >
         <div
-            className="c8"
+            className="c11"
         >
             <div
-                className="c9"
+                className="c12"
             >
                 <form
-                    className="c10"
+                    className="c13"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c14"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -6164,11 +6416,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c15"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -6176,30 +6428,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c17 c18"
                                     disabled={false}
                                     id="B"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c19"
                                     htmlFor="B"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c20"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c21 c22"
                                     htmlFor="B"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c23"
                                     >
                                         Enable Firewall
                                     </div>
@@ -6211,7 +6463,7 @@ Array [
             </div>
         </div>
         <div
-            className="c8"
+            className="c11"
         />
     </div>
 </div>,
@@ -6219,16 +6471,16 @@ Array [
   margin-bottom: 1.125rem;
 }
 
-.c9 {
+.c12 {
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c23 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c7 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6248,7 +6500,7 @@ Array [
   align-content: stretch;
 }
 
-.c8 {
+.c11 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -6265,7 +6517,13 @@ Array [
   display: block;
 }
 
-.c15 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c18 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -6273,38 +6531,56 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c18[type='checkbox'],
+.c18[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c18[type='number']::-webkit-inner-spin-button,
+.c18[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c18[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c15[type='search']::-webkit-search-cancel-button,
-.c15[type='search']::-webkit-search-decoration {
+.c18[type='search']::-webkit-search-cancel-button,
+.c18[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c18::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -6312,7 +6588,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c19 {
+.c22 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -6363,33 +6639,33 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c14 {
+.c17 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c17:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c17:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c17:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c17:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c17:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c19 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -6407,7 +6683,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c19::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -6424,7 +6700,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c16 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -6433,12 +6709,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c20 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c15 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6462,25 +6738,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c15 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c15 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c12 div[type='checkbox'],
-.c12 div[type='checkbox'] input,
-.c12 div[type='checkbox'] label {
+.c15 div[type='checkbox'],
+.c15 div[type='checkbox'] input,
+.c15 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c14 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -6492,14 +6768,14 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c21 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c10 {
+.c13 {
   margin-bottom: 0 !important;
 }
 
@@ -6568,31 +6844,35 @@ Array [
                     Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                      
                     <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
+                        className="c7 c8 c9"
                     >
-                        Read the docs
+                        <a
+                            rel="noopener noreferrer"
+                            target="__blank"
+                            to="https://docs.joyent.com/private-cloud/install/cns"
+                        >
+                            Read the docs
+                        </a>
                     </a>
                 </p>
             </div>
         </div>
     </div>
     <div
-        className="c7"
+        className="c10"
     >
         <div
-            className="c8"
+            className="c11"
         >
             <div
-                className="c9"
+                className="c12"
             >
                 <form
-                    className="c10"
+                    className="c13"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c14"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -6600,11 +6880,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c15"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -6612,30 +6892,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c17 c18"
                                     disabled={false}
                                     id="D"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c19"
                                     htmlFor="D"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c20"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c21 c22"
                                     htmlFor="D"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c23"
                                     >
                                         Enable Firewall
                                     </div>
@@ -6647,7 +6927,7 @@ Array [
             </div>
         </div>
         <div
-            className="c8"
+            className="c11"
         />
     </div>
 </div>,
@@ -6655,43 +6935,43 @@ Array [
   margin-bottom: 1.125rem;
 }
 
-.c9 {
+.c12 {
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c23 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c21 {
+.c24 {
   margin-top: 1.875rem;
 }
 
-.c23 {
+.c26 {
   margin-top: 1.125rem;
 }
 
-.c24 {
+.c27 {
   margin-bottom: 0rem;
 }
 
-.c29 {
+.c32 {
   margin-right: 0.1875rem;
 }
 
-.c32 {
+.c35 {
   margin-left: 0.1875rem;
 }
 
-.c26 {
+.c29 {
   padding-top: 0.75rem;
   padding-right: 1.125rem;
   padding-bottom: 0.75rem;
   padding-left: 1.125rem;
 }
 
-.c7 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6711,37 +6991,6 @@ Array [
   align-content: stretch;
 }
 
-.c28 {
-  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-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;
-}
-
 .c31 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -6760,13 +7009,44 @@ Array [
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -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;
 }
 
-.c8 {
+.c34 {
+  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;
+}
+
+.c11 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -6783,7 +7063,13 @@ Array [
   display: block;
 }
 
-.c15 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c18 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -6791,38 +7077,56 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c18[type='checkbox'],
+.c18[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c18[type='number']::-webkit-inner-spin-button,
+.c18[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c18[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c15[type='search']::-webkit-search-cancel-button,
-.c15[type='search']::-webkit-search-decoration {
+.c18[type='search']::-webkit-search-cancel-button,
+.c18[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c18::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -6830,7 +7134,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c19 {
+.c22 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -6874,7 +7178,7 @@ Array [
   display: block;
 }
 
-.c27 {
+.c30 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -6884,7 +7188,7 @@ Array [
   display: block;
 }
 
-.c35 {
+.c38 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -6901,7 +7205,7 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c22 {
+.c25 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -6909,14 +7213,14 @@ Array [
   font-size: 1.3125rem;
 }
 
-.c30 {
+.c33 {
   color: rgb(73,73,73);
   font-weight: 700;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
 
-.c25 {
+.c28 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6942,33 +7246,33 @@ Array [
   cursor: default;
 }
 
-.c14 {
+.c17 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c17:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c17:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c17:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c17:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c17:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c19 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -6986,7 +7290,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c19::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -7003,7 +7307,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c16 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -7012,12 +7316,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c20 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c15 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7041,25 +7345,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c15 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c15 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c12 div[type='checkbox'],
-.c12 div[type='checkbox'] input,
-.c12 div[type='checkbox'] label {
+.c15 div[type='checkbox'],
+.c15 div[type='checkbox'] input,
+.c15 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c14 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -7071,14 +7375,14 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c21 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c34 {
+.c37 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -7099,7 +7403,7 @@ Array [
   align-items: center;
 }
 
-.c33 {
+.c36 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -7112,7 +7416,7 @@ Array [
   flex-wrap: wrap;
 }
 
-.c10 {
+.c13 {
   margin-bottom: 0 !important;
 }
 
@@ -7157,7 +7461,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c27 {
+  .c30 {
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
@@ -7166,7 +7470,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c35 {
+  .c38 {
     -webkit-flex-basis: 16.666666666666668%;
     -ms-flex-preferred-size: 16.666666666666668%;
     flex-basis: 16.666666666666668%;
@@ -7199,31 +7503,35 @@ Array [
                     Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                      
                     <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
+                        className="c7 c8 c9"
                     >
-                        Read the docs
+                        <a
+                            rel="noopener noreferrer"
+                            target="__blank"
+                            to="https://docs.joyent.com/private-cloud/install/cns"
+                        >
+                            Read the docs
+                        </a>
                     </a>
                 </p>
             </div>
         </div>
     </div>
     <div
-        className="c7"
+        className="c10"
     >
         <div
-            className="c8"
+            className="c11"
         >
             <div
-                className="c9"
+                className="c12"
             >
                 <form
-                    className="c10"
+                    className="c13"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c14"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -7231,11 +7539,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c15"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -7243,30 +7551,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c17 c18"
                                     disabled={false}
                                     id="F"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c19"
                                     htmlFor="F"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c20"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c21 c22"
                                     htmlFor="F"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c23"
                                     >
                                         Enable Firewall
                                     </div>
@@ -7278,13 +7586,13 @@ Array [
             </div>
         </div>
         <div
-            className="c8"
+            className="c11"
         >
             <form
-                className="c10"
+                className="c13"
             >
                 <div
-                    className="c11"
+                    className="c14"
                     id="fw-toggle-inactive"
                     name="inactive"
                     role="group"
@@ -7292,11 +7600,11 @@ Array [
                     type="checkbox"
                 >
                     <li
-                        className="c12"
+                        className="c15"
                     >
                         <div
                             checked={false}
-                            className="c13"
+                            className="c16"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
@@ -7304,30 +7612,30 @@ Array [
                         >
                             <input
                                 checked={false}
-                                className="c14 c15"
+                                className="c17 c18"
                                 disabled={false}
                                 id="H"
                                 onBlur={undefined}
                                 type="checkbox"
                             />
                             <label
-                                className="c16"
+                                className="c19"
                                 htmlFor="H"
                             />
                         </div>
                         <div
                             checked={false}
-                            className="c17"
+                            className="c20"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
                         >
                             <label
-                                className="c18 c19"
+                                className="c21 c22"
                                 htmlFor="H"
                             >
                                 <div
-                                    className="c20"
+                                    className="c23"
                                 >
                                     Show inactive rules
                                 </div>
@@ -7339,44 +7647,44 @@ Array [
         </div>
     </div>
     <div
-        className="c21"
+        className="c24"
     >
         <h3
-            className="c22"
+            className="c25"
         >
             Firewall rules from instance tags
         </h3>
         <div
-            className="c23"
+            className="c26"
         >
             <div
-                className="c24"
+                className="c27"
             >
                 <div
-                    className="c25"
+                    className="c28"
                     disabled={true}
                     name="card"
                 >
                     <div
-                        className="c26"
+                        className="c29"
                     >
                         <div
                             className="c3"
                         >
                             <div
-                                className="c27"
+                                className="c30"
                             >
                                 <div
-                                    className="c28"
+                                    className="c31"
                                 >
                                     <div
-                                        className="c29"
+                                        className="c32"
                                     >
                                         <div
-                                            className="c8"
+                                            className="c11"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c33"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -7388,7 +7696,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c31"
+                                        className="c34"
                                     >
                                         <p
                                             className="c6"
@@ -7404,19 +7712,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c27"
+                                className="c30"
                             >
                                 <div
-                                    className="c28"
+                                    className="c31"
                                 >
                                     <div
-                                        className="c29"
+                                        className="c32"
                                     >
                                         <div
-                                            className="c8"
+                                            className="c11"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c33"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -7428,16 +7736,16 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c31"
+                                        className="c34"
                                     >
                                         <div
-                                            className="c32"
+                                            className="c35"
                                         >
                                             <ul
-                                                className="c33"
+                                                className="c36"
                                             >
                                                 <li
-                                                    className="c34"
+                                                    className="c37"
                                                     fill={null}
                                                     name="wat"
                                                     style={
@@ -7453,19 +7761,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c35"
+                                className="c38"
                             >
                                 <div
-                                    className="c28"
+                                    className="c31"
                                 >
                                     <div
-                                        className="c29"
+                                        className="c32"
                                     >
                                         <div
-                                            className="c8"
+                                            className="c11"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c33"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -7477,7 +7785,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c31"
+                                        className="c34"
                                     >
                                         <p
                                             className="c6"
@@ -7493,19 +7801,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c35"
+                                className="c38"
                             >
                                 <div
-                                    className="c28"
+                                    className="c31"
                                 >
                                     <div
-                                        className="c29"
+                                        className="c32"
                                     >
                                         <div
-                                            className="c8"
+                                            className="c11"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c33"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -7517,7 +7825,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c31"
+                                        className="c34"
                                     >
                                         <p
                                             className="c6"
@@ -7533,19 +7841,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c35"
+                                className="c38"
                             >
                                 <div
-                                    className="c28"
+                                    className="c31"
                                 >
                                     <div
-                                        className="c29"
+                                        className="c32"
                                     >
                                         <div
-                                            className="c8"
+                                            className="c11"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c33"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -7557,7 +7865,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c31"
+                                        className="c34"
                                     >
                                         <p
                                             className="c6"
@@ -7588,16 +7896,16 @@ Array [
   margin-bottom: 1.125rem;
 }
 
-.c9 {
+.c12 {
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c23 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c7 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7617,7 +7925,7 @@ Array [
   align-content: stretch;
 }
 
-.c8 {
+.c11 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -7634,7 +7942,13 @@ Array [
   display: block;
 }
 
-.c15 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c18 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -7642,38 +7956,56 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c18[type='checkbox'],
+.c18[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c18[type='number']::-webkit-inner-spin-button,
+.c18[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c18[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c15[type='search']::-webkit-search-cancel-button,
-.c15[type='search']::-webkit-search-decoration {
+.c18[type='search']::-webkit-search-cancel-button,
+.c18[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c18::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -7681,7 +8013,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c19 {
+.c22 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -7732,33 +8064,33 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c14 {
+.c17 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c17:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c17:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c17:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c17:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c17:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c19 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -7776,7 +8108,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c19::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -7793,7 +8125,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c16 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -7802,12 +8134,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c20 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c15 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7831,25 +8163,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c15 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c15 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c12 div[type='checkbox'],
-.c12 div[type='checkbox'] input,
-.c12 div[type='checkbox'] label {
+.c15 div[type='checkbox'],
+.c15 div[type='checkbox'] input,
+.c15 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c14 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -7861,14 +8193,14 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c21 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c10 {
+.c13 {
   margin-bottom: 0 !important;
 }
 
@@ -7937,31 +8269,35 @@ Array [
                     Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                      
                     <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
+                        className="c7 c8 c9"
                     >
-                        Read the docs
+                        <a
+                            rel="noopener noreferrer"
+                            target="__blank"
+                            to="https://docs.joyent.com/private-cloud/install/cns"
+                        >
+                            Read the docs
+                        </a>
                     </a>
                 </p>
             </div>
         </div>
     </div>
     <div
-        className="c7"
+        className="c10"
     >
         <div
-            className="c8"
+            className="c11"
         >
             <div
-                className="c9"
+                className="c12"
             >
                 <form
-                    className="c10"
+                    className="c13"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c14"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -7969,11 +8305,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c15"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -7981,30 +8317,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c17 c18"
                                     disabled={false}
                                     id="J"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c19"
                                     htmlFor="J"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c20"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c21 c22"
                                     htmlFor="J"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c23"
                                     >
                                         Enable Firewall
                                     </div>
@@ -8016,7 +8352,7 @@ Array [
             </div>
         </div>
         <div
-            className="c8"
+            className="c11"
         />
     </div>
 </div>,
@@ -8024,16 +8360,16 @@ Array [
   margin-bottom: 1.125rem;
 }
 
-.c9 {
+.c12 {
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c23 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c7 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8053,7 +8389,7 @@ Array [
   align-content: stretch;
 }
 
-.c8 {
+.c11 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -8070,7 +8406,13 @@ Array [
   display: block;
 }
 
-.c15 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c18 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -8078,38 +8420,56 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c18[type='checkbox'],
+.c18[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c18[type='number']::-webkit-inner-spin-button,
+.c18[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c18[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c15[type='search']::-webkit-search-cancel-button,
-.c15[type='search']::-webkit-search-decoration {
+.c18[type='search']::-webkit-search-cancel-button,
+.c18[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c18::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -8117,7 +8477,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c19 {
+.c22 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -8168,33 +8528,33 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c14 {
+.c17 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c17:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c17:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c17:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c17:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c17:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c19 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -8212,7 +8572,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c19::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -8229,7 +8589,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c16 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -8238,12 +8598,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c20 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c15 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -8267,25 +8627,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c15 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c15 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c12 div[type='checkbox'],
-.c12 div[type='checkbox'] input,
-.c12 div[type='checkbox'] label {
+.c15 div[type='checkbox'],
+.c15 div[type='checkbox'] input,
+.c15 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c14 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -8297,14 +8657,14 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c21 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c10 {
+.c13 {
   margin-bottom: 0 !important;
 }
 
@@ -8373,31 +8733,35 @@ Array [
                     Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                      
                     <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
+                        className="c7 c8 c9"
                     >
-                        Read the docs
+                        <a
+                            rel="noopener noreferrer"
+                            target="__blank"
+                            to="https://docs.joyent.com/private-cloud/install/cns"
+                        >
+                            Read the docs
+                        </a>
                     </a>
                 </p>
             </div>
         </div>
     </div>
     <div
-        className="c7"
+        className="c10"
     >
         <div
-            className="c8"
+            className="c11"
         >
             <div
-                className="c9"
+                className="c12"
             >
                 <form
-                    className="c10"
+                    className="c13"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c14"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -8405,11 +8769,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c15"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -8417,30 +8781,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c17 c18"
                                     disabled={false}
                                     id="L"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c19"
                                     htmlFor="L"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c20"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c21 c22"
                                     htmlFor="L"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c23"
                                     >
                                         Enable Firewall
                                     </div>
@@ -8452,7 +8816,7 @@ Array [
             </div>
         </div>
         <div
-            className="c8"
+            className="c11"
         />
     </div>
 </div>,
@@ -8460,43 +8824,43 @@ Array [
   margin-bottom: 1.125rem;
 }
 
-.c9 {
+.c12 {
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c23 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c21 {
+.c24 {
   margin-top: 1.875rem;
 }
 
-.c23 {
+.c26 {
   margin-top: 1.125rem;
 }
 
-.c24 {
+.c27 {
   margin-bottom: 0rem;
 }
 
-.c29 {
+.c32 {
   margin-right: 0.1875rem;
 }
 
-.c32 {
+.c35 {
   margin-left: 0.1875rem;
 }
 
-.c26 {
+.c29 {
   padding-top: 0.75rem;
   padding-right: 1.125rem;
   padding-bottom: 0.75rem;
   padding-left: 1.125rem;
 }
 
-.c7 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8516,37 +8880,6 @@ Array [
   align-content: stretch;
 }
 
-.c28 {
-  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-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;
-}
-
 .c31 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -8565,13 +8898,44 @@ Array [
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
+  -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;
 }
 
-.c8 {
+.c34 {
+  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;
+}
+
+.c11 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -8588,7 +8952,13 @@ Array [
   display: block;
 }
 
-.c15 {
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c18 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -8596,38 +8966,56 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c18[type='checkbox'],
+.c18[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c18[type='number']::-webkit-inner-spin-button,
+.c18[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c18[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c15[type='search']::-webkit-search-cancel-button,
-.c15[type='search']::-webkit-search-decoration {
+.c18[type='search']::-webkit-search-cancel-button,
+.c18[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c18::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -8635,7 +9023,7 @@ Array [
   font-size: 0.9375rem;
 }
 
-.c19 {
+.c22 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -8679,7 +9067,7 @@ Array [
   display: block;
 }
 
-.c27 {
+.c30 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -8689,7 +9077,7 @@ Array [
   display: block;
 }
 
-.c35 {
+.c38 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -8706,7 +9094,7 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c22 {
+.c25 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -8714,14 +9102,14 @@ Array [
   font-size: 1.3125rem;
 }
 
-.c30 {
+.c33 {
   color: rgb(73,73,73);
   font-weight: 700;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
 
-.c25 {
+.c28 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -8747,33 +9135,33 @@ Array [
   cursor: default;
 }
 
-.c14 {
+.c17 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c17:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c17:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c17:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c17:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c17:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c19 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -8791,7 +9179,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c19::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -8808,7 +9196,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c16 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -8817,12 +9205,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c20 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c15 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -8846,25 +9234,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c15 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c15 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c12 div[type='checkbox'],
-.c12 div[type='checkbox'] input,
-.c12 div[type='checkbox'] label {
+.c15 div[type='checkbox'],
+.c15 div[type='checkbox'] input,
+.c15 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c14 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -8876,14 +9264,14 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c21 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c34 {
+.c37 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -8904,7 +9292,7 @@ Array [
   align-items: center;
 }
 
-.c33 {
+.c36 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -8917,7 +9305,7 @@ Array [
   flex-wrap: wrap;
 }
 
-.c10 {
+.c13 {
   margin-bottom: 0 !important;
 }
 
@@ -8962,7 +9350,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c27 {
+  .c30 {
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
@@ -8971,7 +9359,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c35 {
+  .c38 {
     -webkit-flex-basis: 16.666666666666668%;
     -ms-flex-preferred-size: 16.666666666666668%;
     flex-basis: 16.666666666666668%;
@@ -9004,31 +9392,35 @@ Array [
                     Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default set of rules and rules defined by your chosen tags.
                      
                     <a
-                        href="https://docs.joyent.com/private-cloud/install/cns"
-                        rel="noopener noreferrer"
-                        target="__blank"
+                        className="c7 c8 c9"
                     >
-                        Read the docs
+                        <a
+                            rel="noopener noreferrer"
+                            target="__blank"
+                            to="https://docs.joyent.com/private-cloud/install/cns"
+                        >
+                            Read the docs
+                        </a>
                     </a>
                 </p>
             </div>
         </div>
     </div>
     <div
-        className="c7"
+        className="c10"
     >
         <div
-            className="c8"
+            className="c11"
         >
             <div
-                className="c9"
+                className="c12"
             >
                 <form
-                    className="c10"
+                    className="c13"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c14"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -9036,11 +9428,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c15"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -9048,30 +9440,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c17 c18"
                                     disabled={false}
                                     id="N"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c19"
                                     htmlFor="N"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c20"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c21 c22"
                                     htmlFor="N"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c23"
                                     >
                                         Enable Firewall
                                     </div>
@@ -9083,13 +9475,13 @@ Array [
             </div>
         </div>
         <div
-            className="c8"
+            className="c11"
         >
             <form
-                className="c10"
+                className="c13"
             >
                 <div
-                    className="c11"
+                    className="c14"
                     id="fw-toggle-inactive"
                     name="inactive"
                     role="group"
@@ -9097,11 +9489,11 @@ Array [
                     type="checkbox"
                 >
                     <li
-                        className="c12"
+                        className="c15"
                     >
                         <div
                             checked={false}
-                            className="c13"
+                            className="c16"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
@@ -9109,30 +9501,30 @@ Array [
                         >
                             <input
                                 checked={false}
-                                className="c14 c15"
+                                className="c17 c18"
                                 disabled={false}
                                 id="P"
                                 onBlur={undefined}
                                 type="checkbox"
                             />
                             <label
-                                className="c16"
+                                className="c19"
                                 htmlFor="P"
                             />
                         </div>
                         <div
                             checked={false}
-                            className="c17"
+                            className="c20"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
                         >
                             <label
-                                className="c18 c19"
+                                className="c21 c22"
                                 htmlFor="P"
                             >
                                 <div
-                                    className="c20"
+                                    className="c23"
                                 >
                                     Show inactive rules
                                 </div>
@@ -9144,44 +9536,44 @@ Array [
         </div>
     </div>
     <div
-        className="c21"
+        className="c24"
     >
         <h3
-            className="c22"
+            className="c25"
         >
             Default firewall rules
         </h3>
         <div
-            className="c23"
+            className="c26"
         >
             <div
-                className="c24"
+                className="c27"
             >
                 <div
-                    className="c25"
+                    className="c28"
                     disabled={true}
                     name="card"
                 >
                     <div
-                        className="c26"
+                        className="c29"
                     >
                         <div
                             className="c3"
                         >
                             <div
-                                className="c27"
+                                className="c30"
                             >
                                 <div
-                                    className="c28"
+                                    className="c31"
                                 >
                                     <div
-                                        className="c29"
+                                        className="c32"
                                     >
                                         <div
-                                            className="c8"
+                                            className="c11"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c33"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -9193,7 +9585,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c31"
+                                        className="c34"
                                     >
                                         <p
                                             className="c6"
@@ -9209,19 +9601,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c27"
+                                className="c30"
                             >
                                 <div
-                                    className="c28"
+                                    className="c31"
                                 >
                                     <div
-                                        className="c29"
+                                        className="c32"
                                     >
                                         <div
-                                            className="c8"
+                                            className="c11"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c33"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -9233,16 +9625,16 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c31"
+                                        className="c34"
                                     >
                                         <div
-                                            className="c32"
+                                            className="c35"
                                         >
                                             <ul
-                                                className="c33"
+                                                className="c36"
                                             >
                                                 <li
-                                                    className="c34"
+                                                    className="c37"
                                                     fill={null}
                                                     name="wat"
                                                     style={
@@ -9258,19 +9650,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c35"
+                                className="c38"
                             >
                                 <div
-                                    className="c28"
+                                    className="c31"
                                 >
                                     <div
-                                        className="c29"
+                                        className="c32"
                                     >
                                         <div
-                                            className="c8"
+                                            className="c11"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c33"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -9282,7 +9674,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c31"
+                                        className="c34"
                                     >
                                         <p
                                             className="c6"
@@ -9298,19 +9690,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c35"
+                                className="c38"
                             >
                                 <div
-                                    className="c28"
+                                    className="c31"
                                 >
                                     <div
-                                        className="c29"
+                                        className="c32"
                                     >
                                         <div
-                                            className="c8"
+                                            className="c11"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c33"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -9322,7 +9714,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c31"
+                                        className="c34"
                                     >
                                         <p
                                             className="c6"
@@ -9338,19 +9730,19 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c35"
+                                className="c38"
                             >
                                 <div
-                                    className="c28"
+                                    className="c31"
                                 >
                                     <div
-                                        className="c29"
+                                        className="c32"
                                     >
                                         <div
-                                            className="c8"
+                                            className="c11"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c33"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -9362,7 +9754,7 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c31"
+                                        className="c34"
                                     >
                                         <p
                                             className="c6"
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
index 5b705666..e4a5de7e 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -2001,6 +2001,10 @@ exports[`renders <List instances /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c32 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c13 {
   display: inline-block;
 }
@@ -3540,6 +3544,10 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c32 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c56 {
   min-width: 7.5rem;
 }
@@ -6112,6 +6120,10 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   text-decoration: none;
 }
 
+.c32 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c56 {
   min-width: 7.5rem;
 }
@@ -8684,6 +8696,10 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   text-decoration: none;
 }
 
+.c32 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c56 {
   min-width: 7.5rem;
 }
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
index 5f183a05..7ae8d404 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
@@ -5,14 +5,38 @@ exports[`renders <Networks /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c12 {
+.c15 {
   margin-bottom: 0.75rem;
 }
 
-.c10 {
+.c13 {
   padding: 8rem;
 }
 
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -61,7 +85,7 @@ exports[`renders <Networks /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c7 {
+.c10 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -69,7 +93,7 @@ exports[`renders <Networks /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c11 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -100,7 +124,7 @@ exports[`renders <Networks /> without throwing 1`] = `
   align-items: center;
 }
 
-.c9 {
+.c12 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -122,12 +146,12 @@ exports[`renders <Networks /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c13 {
+.c16 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c8 {
+.c11 {
   width: calc(100% - 0.125rem);
   background: transparent;
 }
@@ -197,11 +221,15 @@ exports[`renders <Networks /> without throwing 1`] = `
           Use predefined or customized fabric networks which can be public-facing or private. All fabrics are isolated from other customers giving you complete control over the network environment. Read more on fabrics.
            
           <a
-            href="https://docs.joyent.com/public-cloud/network/sdn"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
           >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/public-cloud/network/sdn"
+            >
+              Read the docs
+            </a>
           </a>
         </p>
       </div>
@@ -211,24 +239,24 @@ exports[`renders <Networks /> without throwing 1`] = `
     className="c2"
   >
     <h3
-      className="c7"
+      className="c10"
     >
       Networks attached to this instance
     </h3>
   </div>
   <div
-    className="c8 c9"
+    className="c11 c12"
     disabled={false}
     name="card"
   >
     <div
-      className="c10"
+      className="c13"
     >
       <div
-        className="c11"
+        className="c14"
       >
         <div
-          className="c12"
+          className="c15"
         >
           <svg
             height={109}
@@ -517,7 +545,7 @@ exports[`renders <Networks /> without throwing 1`] = `
           </svg>
         </div>
         <h3
-          className="c13 c7"
+          className="c16 c10"
         >
           You have no networks attached to this instance
         </h3>
@@ -532,10 +560,34 @@ exports[`renders <Networks error /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c8 {
+.c11 {
   margin-bottom: 1.875rem;
 }
 
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -584,7 +636,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c7 {
+.c10 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -592,7 +644,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c12 {
+.c15 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -600,7 +652,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c9 {
+.c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -613,18 +665,18 @@ exports[`renders <Networks error /> without throwing 1`] = `
   width: 100%;
 }
 
-.c10 {
+.c13 {
   border-radius: 0.1875rem 0 0 0.1875rem;
   min-width: 0.75rem;
   background-color: rgb(0,152,88);
   background-color: rgb(210,67,58);
 }
 
-.c11 {
+.c14 {
   padding: 1.125rem 1.125rem;
 }
 
-.c13 {
+.c16 {
   line-height: 0.875rem;
   font-size: 0.8125rem;
 }
@@ -694,11 +746,15 @@ exports[`renders <Networks error /> without throwing 1`] = `
           Use predefined or customized fabric networks which can be public-facing or private. All fabrics are isolated from other customers giving you complete control over the network environment. Read more on fabrics.
            
           <a
-            href="https://docs.joyent.com/public-cloud/network/sdn"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
           >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/public-cloud/network/sdn"
+            >
+              Read the docs
+            </a>
           </a>
         </p>
       </div>
@@ -708,30 +764,30 @@ exports[`renders <Networks error /> without throwing 1`] = `
     className="c2"
   >
     <h3
-      className="c7"
+      className="c10"
     >
       Networks attached to this instance
     </h3>
   </div>
   <div
-    className="c8"
+    className="c11"
   >
     <div
-      className="c9"
+      className="c12"
     >
       <div
-        className="c10"
+        className="c13"
       />
       <div
-        className="c11"
+        className="c14"
       >
         <h4
-          className="c12"
+          className="c15"
         >
           Ooops!
         </h4>
         <p
-          className="c13 c6"
+          className="c16 c6"
         >
           An error occurred while loading your networks
         </p>
@@ -747,18 +803,42 @@ exports[`renders <Networks loading /> without throwing 1`] = `
 }
 
 .c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
+.c12 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
 }
 
-.c10 {
+.c13 {
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
 }
 
-.c11 {
+.c14 {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
 }
@@ -770,7 +850,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c8 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -798,7 +878,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c12 {
+.c15 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -849,7 +929,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c7 {
+.c10 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -922,11 +1002,15 @@ exports[`renders <Networks loading /> without throwing 1`] = `
           Use predefined or customized fabric networks which can be public-facing or private. All fabrics are isolated from other customers giving you complete control over the network environment. Read more on fabrics.
            
           <a
-            href="https://docs.joyent.com/public-cloud/network/sdn"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
           >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/public-cloud/network/sdn"
+            >
+              Read the docs
+            </a>
           </a>
         </p>
       </div>
@@ -936,34 +1020,34 @@ exports[`renders <Networks loading /> without throwing 1`] = `
     className="c2"
   >
     <h3
-      className="c7"
+      className="c10"
     >
       Networks attached to this instance
     </h3>
   </div>
   <div
-    className="c8"
+    className="c11"
   >
     <svg
       height="10"
       width="28"
     >
       <rect
-        className="c9"
+        className="c12"
         height="6"
         width="6"
         x="2"
         y="2"
       />
       <rect
-        className="c10 c9"
+        className="c13 c12"
         height="6"
         width="6"
         x="11"
         y="2"
       />
       <rect
-        className="c11 c9"
+        className="c14 c12"
         height="6"
         width="6"
         x="20"
@@ -971,7 +1055,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
       />
     </svg>
     <p
-      className="c12 c6"
+      className="c15 c6"
     >
       Loading...
     </p>
@@ -984,31 +1068,55 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c9 {
+.c12 {
   margin-bottom: 1.875rem;
 }
 
-.c19 {
+.c22 {
   margin-right: 1.875rem;
 }
 
-.c22 {
+.c25 {
   margin-right: 0.375rem;
 }
 
-.c23 {
+.c26 {
   margin-top: 1.125rem;
 }
 
-.c14 {
+.c17 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c17 {
+.c20 {
   padding: 1.875rem;
 }
 
+.c9 {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration-skip: objects;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c7 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c7:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c6 {
   color: rgb(73,73,73);
   margin: 0;
@@ -1050,7 +1158,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   display: block;
 }
 
-.c8 {
+.c11 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1067,7 +1175,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c7 {
+.c10 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -1075,7 +1183,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c15 {
+.c18 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -1085,7 +1193,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   color: rgb(255,255,255);
 }
 
-.c18 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1105,7 +1213,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c21 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1129,7 +1237,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   align-items: center;
 }
 
-.c20 {
+.c23 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1146,7 +1254,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   display: block;
 }
 
-.c10 {
+.c13 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1168,7 +1276,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c12 {
+.c15 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1198,7 +1306,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c24 {
+.c27 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1226,7 +1334,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c27 {
+.c30 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1253,7 +1361,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c16 {
+.c19 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1269,7 +1377,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c11 {
+.c14 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -1281,7 +1389,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c25 {
+.c28 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -1294,7 +1402,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c26 {
+.c29 {
   width: 2.875rem;
   min-width: 2.875rem;
   min-height: 2.875rem;
@@ -1323,7 +1431,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c13 {
+.c16 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -1398,7 +1506,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c8 {
+  .c11 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1407,7 +1515,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c8 {
+  .c11 {
     -webkit-flex-basis: 66.66666666666667%;
     -ms-flex-preferred-size: 66.66666666666667%;
     flex-basis: 66.66666666666667%;
@@ -1440,11 +1548,15 @@ exports[`renders <Networks networks /> without throwing 1`] = `
           Use predefined or customized fabric networks which can be public-facing or private. All fabrics are isolated from other customers giving you complete control over the network environment. Read more on fabrics.
            
           <a
-            href="https://docs.joyent.com/public-cloud/network/sdn"
-            rel="noopener noreferrer"
-            target="__blank"
+            className="c7 c8 c9"
           >
-            Read the docs
+            <a
+              rel="noopener noreferrer"
+              target="__blank"
+              to="https://docs.joyent.com/public-cloud/network/sdn"
+            >
+              Read the docs
+            </a>
           </a>
         </p>
       </div>
@@ -1454,7 +1566,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
     className="c2"
   >
     <h3
-      className="c7"
+      className="c10"
     >
       Networks attached to this instance
     </h3>
@@ -1463,31 +1575,31 @@ exports[`renders <Networks networks /> without throwing 1`] = `
     className="c3"
   >
     <div
-      className="c8"
+      className="c11"
     >
       <div
-        className="c9"
+        className="c12"
       >
         <div
-          className="c10"
+          className="c13"
           disabled={false}
           name="card"
         >
           <div
-            className="c11 c12"
+            className="c14 c15"
             disabled={false}
             name="card-header"
           >
             <div
-              className="c13 c12"
+              className="c16 c15"
               disabled={false}
               name="card-header-meta"
             >
               <div
-                className="c14"
+                className="c17"
               >
                 <h4
-                  className="c15"
+                  className="c18"
                 >
                   name
                 </h4>
@@ -1495,12 +1607,12 @@ exports[`renders <Networks networks /> without throwing 1`] = `
             </div>
           </div>
           <div
-            className="c16 c10"
+            className="c19 c13"
             disabled={false}
             name="card-outlet"
           >
             <div
-              className="c17"
+              className="c20"
             >
               <div
                 className="c2"
@@ -1512,22 +1624,22 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                 </p>
               </div>
               <div
-                className="c18"
+                className="c21"
               >
                 <div
-                  className="c19"
+                  className="c22"
                 >
                   <div
-                    className="c20"
+                    className="c23"
                   >
                     <div
-                      className="c21"
+                      className="c24"
                     >
                       <div
-                        className="c20"
+                        className="c23"
                       >
                         <div
-                          className="c22"
+                          className="c25"
                         >
                           <svg
                             height="16"
@@ -1548,7 +1660,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                         </div>
                       </div>
                       <div
-                        className="c20"
+                        className="c23"
                       >
                         <p
                           className="c6"
@@ -1560,19 +1672,19 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                   </div>
                 </div>
                 <div
-                  className="c19"
+                  className="c22"
                 >
                   <div
-                    className="c20"
+                    className="c23"
                   >
                     <div
-                      className="c21"
+                      className="c24"
                     >
                       <div
-                        className="c20"
+                        className="c23"
                       >
                         <div
-                          className="c22"
+                          className="c25"
                         >
                           <svg
                             height="16.2"
@@ -1588,7 +1700,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                         </div>
                       </div>
                       <div
-                        className="c20"
+                        className="c23"
                       >
                         <p
                           className="c6"
@@ -1600,19 +1712,19 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                   </div>
                 </div>
                 <div
-                  className="c19"
+                  className="c22"
                 >
                   <div
-                    className="c20"
+                    className="c23"
                   >
                     <div
-                      className="c21"
+                      className="c24"
                     >
                       <div
-                        className="c20"
+                        className="c23"
                       >
                         <div
-                          className="c22"
+                          className="c25"
                         >
                           <svg
                             height="17"
@@ -1720,7 +1832,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                         </div>
                       </div>
                       <div
-                        className="c20"
+                        className="c23"
                       >
                         <p
                           className="c6"
@@ -1733,26 +1845,26 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                 </div>
               </div>
               <div
-                className="c23"
+                className="c26"
               >
                 <div
-                  className="c24"
+                  className="c27"
                   disabled={false}
                   name="card"
                 >
                   <div
-                    className="c25 c24"
+                    className="c28 c27"
                     disabled={false}
                     name="card-header"
                     onClick={[Function]}
                   >
                     <div
-                      className="c13 c24"
+                      className="c16 c27"
                       disabled={false}
                       name="card-header-meta"
                     >
                       <div
-                        className="c14"
+                        className="c17"
                       >
                         <p
                           className="c6"
@@ -1762,7 +1874,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c26 c27"
+                      className="c29 c30"
                       disabled={false}
                       name="card-header-box"
                     >
@@ -1787,26 +1899,26 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                 </div>
               </div>
               <div
-                className="c23"
+                className="c26"
               >
                 <div
-                  className="c24"
+                  className="c27"
                   disabled={false}
                   name="card"
                 >
                   <div
-                    className="c25 c24"
+                    className="c28 c27"
                     disabled={false}
                     name="card-header"
                     onClick={[Function]}
                   >
                     <div
-                      className="c13 c24"
+                      className="c16 c27"
                       disabled={false}
                       name="card-header-meta"
                     >
                       <div
-                        className="c14"
+                        className="c17"
                       >
                         <p
                           className="c6"
@@ -1816,7 +1928,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c26 c27"
+                      className="c29 c30"
                       disabled={false}
                       name="card-header-box"
                     >
@@ -1850,31 +1962,31 @@ exports[`renders <Networks networks /> without throwing 1`] = `
     className="c3"
   >
     <div
-      className="c8"
+      className="c11"
     >
       <div
-        className="c9"
+        className="c12"
       >
         <div
-          className="c10"
+          className="c13"
           disabled={false}
           name="card"
         >
           <div
-            className="c11 c12"
+            className="c14 c15"
             disabled={false}
             name="card-header"
           >
             <div
-              className="c13 c12"
+              className="c16 c15"
               disabled={false}
               name="card-header-meta"
             >
               <div
-                className="c14"
+                className="c17"
               >
                 <h4
-                  className="c15"
+                  className="c18"
                 >
                   name2
                 </h4>
@@ -1882,12 +1994,12 @@ exports[`renders <Networks networks /> without throwing 1`] = `
             </div>
           </div>
           <div
-            className="c16 c10"
+            className="c19 c13"
             disabled={false}
             name="card-outlet"
           >
             <div
-              className="c17"
+              className="c20"
             >
               <div
                 className="c2"
@@ -1899,22 +2011,22 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                 </p>
               </div>
               <div
-                className="c18"
+                className="c21"
               >
                 <div
-                  className="c19"
+                  className="c22"
                 >
                   <div
-                    className="c20"
+                    className="c23"
                   >
                     <div
-                      className="c21"
+                      className="c24"
                     >
                       <div
-                        className="c20"
+                        className="c23"
                       >
                         <div
-                          className="c22"
+                          className="c25"
                         >
                           <svg
                             height="16"
@@ -1935,7 +2047,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                         </div>
                       </div>
                       <div
-                        className="c20"
+                        className="c23"
                       >
                         <p
                           className="c6"
@@ -1947,19 +2059,19 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                   </div>
                 </div>
                 <div
-                  className="c19"
+                  className="c22"
                 >
                   <div
-                    className="c20"
+                    className="c23"
                   >
                     <div
-                      className="c21"
+                      className="c24"
                     >
                       <div
-                        className="c20"
+                        className="c23"
                       >
                         <div
-                          className="c22"
+                          className="c25"
                         >
                           <svg
                             height="13"
@@ -1975,7 +2087,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
                         </div>
                       </div>
                       <div
-                        className="c20"
+                        className="c23"
                       >
                         <p
                           className="c6"
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
index 966eab49..ebec4517 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -919,6 +919,10 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-decoration: none;
 }
 
+.c37 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c31 {
   min-width: 7.5rem;
 }
@@ -2887,6 +2891,10 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-decoration: none;
 }
 
+.c37 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c31 {
   min-width: 7.5rem;
 }
diff --git a/packages/instance-steps/src/firewall/index.js b/packages/instance-steps/src/firewall/index.js
index 330c53d9..f1e0eeab 100644
--- a/packages/instance-steps/src/firewall/index.js
+++ b/packages/instance-steps/src/firewall/index.js
@@ -159,9 +159,7 @@ const Firewall = ({
 export default compose(
   connect(({ form, values }, ownProps) => ({
     ...ownProps,
-    enabled:
-      console.log(form, values) ||
-      get(form, `${IC_FW_F_ENABLED}.values.enabled`, false),
+    enabled: get(form, `${IC_FW_F_ENABLED}.values.enabled`, false),
     showInactive: get(form, `${IC_FW_F_INACTIVE}.values.inactive`, false),
     tags: get(values, IC_TAG_V_TAGS, [])
   })),
diff --git a/packages/instance-steps/src/package/components.js b/packages/instance-steps/src/package/components.js
index 1ab3687c..661d294d 100644
--- a/packages/instance-steps/src/package/components.js
+++ b/packages/instance-steps/src/package/components.js
@@ -34,7 +34,7 @@ import { EmptyState } from 'joyent-icons';
 
 const GroupIcons = {
   MEMORY: <MemoryIcon fill="#32ABCF" />,
-  STORAGE: <StorageIcon fill="#A88A83" />,
+  STORAGE: <StorageIcon fill="#DADADA" />,
   GENERAL: <GeneralIcon fill="#E08A0E" />,
   COMPUTE: <CpuIcon fill="#8043DC" />
 };
@@ -106,7 +106,7 @@ export const Filters = ({ onResetFilters }) => (
         <Checkbox>
           <FormLabel noMargin actionable>
             <Flex alignCenter>
-              <Margin left={1}>{GroupIcons.GENERAL}</Margin>
+              <Margin left={1}>{GroupIcons.STORAGE}</Margin>
               <Margin left={1} right={3}>
                 Storage Optimized
               </Margin>
diff --git a/packages/instance-steps/src/user-script/components.js b/packages/instance-steps/src/user-script/components.js
index 1fd1bdd4..53bb54d7 100644
--- a/packages/instance-steps/src/user-script/components.js
+++ b/packages/instance-steps/src/user-script/components.js
@@ -9,7 +9,12 @@ class EditorField extends PureComponent {
   render() {
     return (
       <Fragment>
-        <Editor {...this.props} onBlur={null} mode="sh" />
+        <Editor
+          value="&#13;&#13;&#13;&#13;"
+          {...this.props}
+          onBlur={null}
+          mode="sh"
+        />
       </Fragment>
     );
   }
diff --git a/packages/resource-step/src/index.js b/packages/resource-step/src/index.js
index 20ecf0e6..58ec1bcb 100644
--- a/packages/resource-step/src/index.js
+++ b/packages/resource-step/src/index.js
@@ -1,6 +1,6 @@
 import React, { Fragment, PureComponent } from 'react';
 import { Broadcast, Subscriber } from 'joy-react-broadcast';
-import { Link as BaseLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import Flex, { FlexItem } from 'styled-flex-component';
 import { Margin, Padding } from 'styled-components-spacing';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
@@ -14,7 +14,8 @@ import {
   Divider,
   H3,
   P,
-  ArrowIcon
+  ArrowIcon,
+  Anchor
 } from 'joyent-ui-toolkit';
 
 import { Saved as SavedIcon, Error as ErrorIcon } from './status-icon';
@@ -29,14 +30,6 @@ const Card = styled(BaseCard)`
   `};
 }`;
 
-const Link = styled(BaseLink)`
-  color: ${props => props.theme.primary};
-
-  :active {
-    color: #436275;
-  }
-`;
-
 export const Header = ({ icon = null, children }) => (
   <Subscriber channel="create-resource-group">
     {({ namespace }) => (
@@ -68,19 +61,23 @@ export const Header = ({ icon = null, children }) => (
                 </Flex>
               </FlexItem>
               <FlexItem alignCenter>
-                <Link to={expanded ? `/${namespace}` : `/${namespace}/${name}`}>
-                  <Flex alignCenter>
-                    {expanded ? 'Save and Collase' : 'Edit'}
-                    <Margin left="1">
-                      <Flex>
-                        <ArrowIcon
-                          fill="primary"
-                          direction={expanded ? 'up' : 'down'}
-                        />
-                      </Flex>
-                    </Margin>
-                  </Flex>
-                </Link>
+                <Anchor>
+                  <Link
+                    to={expanded ? `/${namespace}` : `/${namespace}/${name}`}
+                  >
+                    <Flex alignCenter>
+                      {expanded ? 'Save and Collase' : 'Edit'}
+                      <Margin left="1">
+                        <Flex>
+                          <ArrowIcon
+                            fill="primary"
+                            direction={expanded ? 'up' : 'down'}
+                          />
+                        </Flex>
+                      </Margin>
+                    </Flex>
+                  </Link>
+                </Anchor>
               </FlexItem>
               {!expanded && !isValid ? (
                 <FlexItem>
@@ -107,7 +104,14 @@ export const Description = ({ href = '', children }) => (
         <Row>
           <Col xs={12} sm={8}>
             <P>
-              {children} {href ? <Link to={href}>Read the docs</Link> : null}
+              {children}{' '}
+              {href ? (
+                <Anchor>
+                  <Link to={href} target={'_blank'}>
+                    Read the docs
+                  </Link>
+                </Anchor>
+              ) : null}
             </P>
           </Col>
         </Row>
diff --git a/packages/resource-step/src/status-icon.js b/packages/resource-step/src/status-icon.js
index bf625122..2b8672c2 100644
--- a/packages/resource-step/src/status-icon.js
+++ b/packages/resource-step/src/status-icon.js
@@ -60,7 +60,6 @@ export const Saved = ({ inverted, children }) => {
 export const Error = ({ inverted = false, noLabel = false, children }) => {
   const fill = inverted ? 'red' : 'white';
   const iconFill = inverted ? 'white' : 'redDark';
-  console.log(inverted, fill, iconFill);
 
   return (
     <StatusIcon
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap
index aed08500..14b8c31b 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap
@@ -909,7 +909,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
-  color: rgb(250,250,250);
+  color: rgb(73,73,73);
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -918,9 +918,6 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -947,18 +944,6 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c9::-webkit-input-placeholder {
-  color: rgb(216,216,216);
-}
-
-.c9::-moz-placeholder {
-  color: rgb(216,216,216);
-}
-
-.c9:-ms-input-placeholder {
-  color: rgb(216,216,216);
-}
-
 .c9:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
@@ -1052,7 +1037,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   >
     <input
       className="c9"
-      disabled={true}
+      disabled={false}
       id=""
       onBlur={null}
       value="111"
@@ -1063,7 +1048,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   >
     <input
       className="c9"
-      disabled={true}
+      disabled={false}
       id=""
       onBlur={null}
       value="111"
diff --git a/packages/resource-widgets/src/cns/index.js b/packages/resource-widgets/src/cns/index.js
index 9cd29b8f..b144016e 100644
--- a/packages/resource-widgets/src/cns/index.js
+++ b/packages/resource-widgets/src/cns/index.js
@@ -170,9 +170,9 @@ export const Hostname = ({
           }
         >
           {copy ? (
-            <CopiableField disabled md={12} text={value} />
+            <CopiableField md={12} text={value} />
           ) : (
-            <Input onBlur={null} disabled monospace fluid value={value} />
+            <Input onBlur={null} monospace fluid value={value} />
           )}
         </Margin>
       ))}
diff --git a/packages/ui-toolkit/src/anchor/__tests___/__snapshots__/anchor.spec.js.snap b/packages/ui-toolkit/src/anchor/__tests___/__snapshots__/anchor.spec.js.snap
index 0a6a4bb5..69b8b963 100644
--- a/packages/ui-toolkit/src/anchor/__tests___/__snapshots__/anchor.spec.js.snap
+++ b/packages/ui-toolkit/src/anchor/__tests___/__snapshots__/anchor.spec.js.snap
@@ -21,6 +21,10 @@ exports[`Anchor Default Anchor 1`] = `
   text-decoration: none;
 }
 
+.c0 a:hover {
+  color: rgb(45,56,132);
+}
+
 <a
   className="c0 c1 c2"
   href="https://joyent.com"
@@ -53,6 +57,10 @@ exports[`Anchor Disabled Anchor 1`] = `
   text-decoration: none;
 }
 
+.c0 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -90,6 +98,10 @@ exports[`Anchor Reversed Anchor 1`] = `
   text-decoration: none;
 }
 
+.c0 a:hover {
+  color: rgb(45,56,132);
+}
+
 <a
   className="c0 c1 c2"
   href="https://joyent.com"
diff --git a/packages/ui-toolkit/src/anchor/index.js b/packages/ui-toolkit/src/anchor/index.js
index 7ea926a1..014c5714 100644
--- a/packages/ui-toolkit/src/anchor/index.js
+++ b/packages/ui-toolkit/src/anchor/index.js
@@ -11,6 +11,7 @@ const A = styled(BaseA)`
 const BaseLink = styled(({ component, children, ...rest }) =>
   React.createElement(component, rest, children)
 )`
+  ${props => console.log(props.theme)}
   color: ${props => props.theme.primary};
   -webkit-text-fill-color: currentcolor;
 
@@ -18,6 +19,10 @@ const BaseLink = styled(({ component, children, ...rest }) =>
     text-decoration: none;
   }
 
+  a:hover{
+    color: ${props => props.theme.primaryActive};
+  }
+
   ${isOr('secondary', 'reversed')`
     color: ${props => props.theme.white};
     -webkit-text-fill-color: currentcolor;
diff --git a/packages/ui-toolkit/src/base/global.js b/packages/ui-toolkit/src/base/global.js
index 7586c71e..d24b303f 100644
--- a/packages/ui-toolkit/src/base/global.js
+++ b/packages/ui-toolkit/src/base/global.js
@@ -44,11 +44,18 @@ export default ({ theme }) => css`
   }
 
   .CodeMirror {
+    height: 130px;
     border: solid ${remcalc(1)} ${theme.grey};
     margin: ${remcalc(8)} 0 ${remcalc(8)} 0;
     font-family: "Roboto Mono", monospace !important;
   }
-
+  
+  .CodeMirror.cm-s-eclipse.CodeMirror-wrap,
+  .CodeMirror-gutter,
+  .CodeMirror-scroll {
+    height: auto !important;
+  }
+  
   [name=user-script] .CodeMirror {
     margin: 0;
   }
diff --git a/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap b/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap
index 9c704622..a0296903 100644
--- a/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap
+++ b/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap
@@ -21,6 +21,10 @@ exports[`Button Default Button 1`] = `
   text-decoration: none;
 }
 
+.c2 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c1 {
   display: inline-block;
 }
@@ -124,6 +128,10 @@ exports[`Button Disabled Button 1`] = `
   text-decoration: none;
 }
 
+.c2 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c2:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -252,6 +260,10 @@ exports[`Button Error Button 1`] = `
   text-decoration: none;
 }
 
+.c2 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c1 {
   display: inline-block;
 }
@@ -378,6 +390,10 @@ exports[`Button Loading Button 1`] = `
   text-decoration: none;
 }
 
+.c2 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c2:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -508,6 +524,10 @@ exports[`Button Secondary Button 1`] = `
   text-decoration: none;
 }
 
+.c2 a:hover {
+  color: rgb(45,56,132);
+}
+
 .c1 {
   display: inline-block;
 }