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 16944213..f6740201 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
@@ -21,11 +21,9 @@ exports[`renders <Menu links /> without throwing 1`] = `
 .c6 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c6:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c1 {
@@ -57,10 +55,10 @@ exports[`renders <Menu links /> without throwing 1`] = `
   position: relative;
 }
 
-.c5.active:after {
+.c5:after {
   width: 100%;
   height: 0.0625rem;
-  background: rgb(73,73,73);
+  background: rgb(216,216,216);
   content: '';
   position: absolute;
   bottom: 0;
@@ -68,6 +66,14 @@ exports[`renders <Menu links /> without throwing 1`] = `
   z-index: 2;
 }
 
+.c5.active:after {
+  background: rgb(73,73,73);
+}
+
+.c5.active {
+  font-weight: 600;
+}
+
 .c3 {
   background: rgb(250,250,250);
   list-style-type: none;
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 a1e93cb6..ffe17897 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
@@ -54,11 +54,9 @@ exports[`renders <InstanceList /> without throwing 1`] = `
 .c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c21:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c11 {
@@ -798,11 +796,9 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
 .c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c21:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c11 {
@@ -1542,11 +1538,9 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
 .c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c21:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c12 {
@@ -2286,11 +2280,9 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
 .c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c21:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c12 {
@@ -3030,11 +3022,9 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
 .c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c21:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c11 {
@@ -3774,11 +3764,9 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
 .c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c21:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c11 {
@@ -4512,11 +4500,9 @@ exports[`renders <Item /> without throwing 1`] = `
 .c11 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c11:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c12 {
@@ -5039,11 +5025,9 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
 .c11 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c11:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c12 {
@@ -5568,11 +5552,9 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
 .c11 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c11:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c12 {
@@ -6095,11 +6077,9 @@ exports[`renders <Item mutating /> without throwing 1`] = `
 .c11 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c11:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c13 {
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
index b8ac1df2..48c4b63c 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -691,8 +691,8 @@ exports[`renders <AddForm /> without throwing 1`] = `
 .c23 {
   box-sizing: border-box;
   width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
+  height: 12rem;
+  min-height: 12rem;
   padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -706,6 +706,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -1760,8 +1761,8 @@ exports[`renders <EditForm /> without throwing 1`] = `
 .c23 {
   box-sizing: border-box;
   width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
+  height: 12rem;
+  min-height: 12rem;
   padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -1775,6 +1776,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
index be955b0d..983b7d38 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
@@ -497,7 +497,7 @@ Array [
   .c6 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -2401,7 +2401,7 @@ Array [
   .c6 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -3289,7 +3289,7 @@ Array [
   .c6 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -4177,7 +4177,7 @@ Array [
   .c6 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -5065,7 +5065,7 @@ Array [
   .c6 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -5953,7 +5953,7 @@ Array [
   .c6 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
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 df263450..3df51641 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
@@ -231,15 +231,13 @@ exports[`renders <Summary /> without throwing 1`] = `
 .c36 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c36:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c29 {
   min-width: 7.5rem;
 }
@@ -885,7 +883,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 .c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -952,6 +950,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -1031,6 +1030,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -2087,15 +2087,13 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 .c35 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c35:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c29 {
   min-width: 7.5rem;
 }
@@ -2580,7 +2578,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 .c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -2647,6 +2645,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -4020,15 +4019,13 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 .c35 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c35:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c29 {
   min-width: 7.5rem;
 }
@@ -4513,7 +4510,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 .c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -4580,6 +4577,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -5949,15 +5947,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c39 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c39:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c32 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
@@ -6648,7 +6644,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -6715,6 +6711,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -6794,6 +6791,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -7874,15 +7872,13 @@ exports[`renders <Summary state /> without throwing 1`] = `
 .c35 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c35:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c29 {
   min-width: 7.5rem;
 }
@@ -8367,7 +8363,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 .c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -8434,6 +8430,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -8513,6 +8510,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -9569,15 +9567,13 @@ exports[`renders <Summary state /> without throwing 2`] = `
 .c35 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c35:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c29 {
   min-width: 7.5rem;
 }
@@ -10062,7 +10058,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 .c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -10129,6 +10125,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -10208,6 +10205,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -11264,15 +11262,13 @@ exports[`renders <Summary state /> without throwing 3`] = `
 .c36 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c36:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c29 {
   min-width: 7.5rem;
 }
@@ -11919,7 +11915,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 .c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -11986,6 +11982,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -12065,6 +12062,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
diff --git a/consoles/my-joy-instances/src/components/instances/footer.js b/consoles/my-joy-instances/src/components/instances/footer.js
index 3723ae4e..8bf8d1ef 100644
--- a/consoles/my-joy-instances/src/components/instances/footer.js
+++ b/consoles/my-joy-instances/src/components/instances/footer.js
@@ -24,7 +24,7 @@ export default ({
   onReboot,
   onRemove
 }) => (
-  <StickyFooter fill="#FAFAFA" fixed bottom>
+  <StickyFooter fill="disabled" fixed bottom>
     <Row between="xs" middle="xs">
       <Col xs="7">
         <Flex>
diff --git a/consoles/my-joy-instances/src/constants.js b/consoles/my-joy-instances/src/constants.js
index d06c2c34..892e1dd2 100644
--- a/consoles/my-joy-instances/src/constants.js
+++ b/consoles/my-joy-instances/src/constants.js
@@ -18,6 +18,7 @@ export const Forms = {
 };
 
 export const Values = {
+  IC_SHOW_CLI: 'INSTANCE_CREATION_SHOW_CLI',
   IC_AFF_V_ADD_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_ADD_OPEN',
   IC_AFF_V_EDIT_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_EDIT_OPEN',
   IC_AFF_V_AFF: 'INSTANCE_CREATION_AFFINITY_VALUE_AFFINITY',
diff --git a/consoles/my-joy-instances/src/containers/create.js b/consoles/my-joy-instances/src/containers/create.js
index b87ba73b..3cbe6b2d 100644
--- a/consoles/my-joy-instances/src/containers/create.js
+++ b/consoles/my-joy-instances/src/containers/create.js
@@ -1,15 +1,14 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Margin, Padding } from 'styled-components-spacing';
 import { graphql, compose } from 'react-apollo';
 import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
 import { SubmissionError, destroy } from 'redux-form';
 import { set, destroyAll } from 'react-redux-values';
+import Flex, { FlexItem } from 'styled-flex-component';
 import intercept from 'apr-intercept';
 import get from 'lodash.get';
-
-import { H3, ViewContainer, Button } from 'joyent-ui-toolkit';
-import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
+import styled from 'styled-components';
 
 import {
   Name,
@@ -22,14 +21,20 @@ import {
   Firewall,
   CNS,
   Affinity,
-  generatePayload
+  generatePayload,
+  Footer
 } from 'joyent-ui-instance-steps';
 
-import { Forms } from '@root/constants';
+import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
+import { Anchor, H3, ViewContainer, Button } from 'joyent-ui-toolkit';
+
+import { Forms, Values } from '@root/constants';
 import parseError from '@state/parse-error';
 import CreateInstanceMutation from '@graphql/create-instance.gql';
 
 const { IC_F } = Forms;
+const { IC_SHOW_CLI } = Values;
+
 const names = {
   name: 'IC_NAME',
   image: 'IC_IMAGE',
@@ -86,7 +91,16 @@ class CreateInstance extends Component {
   };
 
   render() {
-    const { match, steps, handleDefocus, handleSubmit, disabled } = this.props;
+    const {
+      match,
+      steps,
+      showCli = false,
+      handleDefocus,
+      handleToggleShowCli,
+      handleSubmit,
+      disabled
+    } = this.props;
+
     const { params } = match;
     const { step } = params;
 
@@ -102,6 +116,16 @@ class CreateInstance extends Component {
       affinity
     } = steps;
 
+    const Mask = styled.div`
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.25);
+      position: absolute;
+      display: ${showCli ? 'block' : 'none'};
+    `;
+
     return (
       <ViewContainer main>
         <Margin top="5">
@@ -218,20 +242,43 @@ class CreateInstance extends Component {
             </Margin>
           </ResourceSteps>
           <Margin bottom="5">
-            <ReduxForm form={IC_F} onSubmit={handleSubmit}>
-              {({ handleSubmit, submitting }) => (
-                <form onSubmit={handleSubmit}>
-                  <Button
+            <Flex alignCenter>
+              <FlexItem>
+                <ReduxForm form={IC_F} onSubmit={handleSubmit}>
+                  {({ handleSubmit, submitting }) => (
+                    <form onSubmit={handleSubmit}>
+                      <Button
+                        disabled={disabled || !this.isFormValid()}
+                        loading={submitting}
+                      >
+                        Deploy
+                      </Button>
+                    </form>
+                  )}
+                </ReduxForm>
+              </FlexItem>
+              <FlexItem>
+                <Margin left={3}>
+                  <Anchor
                     disabled={disabled || !this.isFormValid()}
-                    loading={submitting}
+                    onClick={() => handleToggleShowCli(!showCli)}
                   >
-                    Deploy
-                  </Button>
-                </form>
-              )}
-            </ReduxForm>
+                    View CLI Details
+                  </Anchor>
+                </Margin>
+              </FlexItem>
+            </Flex>
           </Margin>
         </Padding>
+        {showCli ? (
+          <Fragment>
+            <Footer
+              getData={() => generatePayload(steps)}
+              onCloseCli={() => handleToggleShowCli(!showCli)}
+            />
+            <Mask onClick={() => handleToggleShowCli(!showCli)} />
+          </Fragment>
+        ) : null}
       </ViewContainer>
     );
   }
@@ -254,6 +301,7 @@ export default compose(
     };
 
     const error = get(form, `${IC_F}.error`, null);
+    const showCli = Boolean(values[IC_SHOW_CLI]);
 
     // Maybe re-use saved to only write the rule once
     const disabled = !(
@@ -270,6 +318,7 @@ export default compose(
 
     return {
       disabled,
+      showCli,
       forms: Object.keys(form), // improve this
       error,
       steps
@@ -277,10 +326,12 @@ export default compose(
   }),
   connect(null, (dispatch, { steps = {}, forms, history, createInstance }) => {
     return {
+      handleToggleShowCli: value => {
+        return dispatch(set({ name: IC_SHOW_CLI, value }));
+      },
       handleDefocus: name => value => {
         return dispatch(set({ name: names[name], value }));
       },
-
       handleSubmit: async () => {
         const [err, res] = await intercept(
           createInstance({
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 f5f4df20..eecb1481 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
@@ -66,15 +66,15 @@ exports[`renders <Cns /> without throwing 1`] = `
   margin-bottom: 1.875rem;
 }
 
-.c28 {
+.c27 {
   margin-top: 0.1875rem;
 }
 
-.c30 {
+.c29 {
   margin-left: 0.75rem;
 }
 
-.c36 {
+.c35 {
   margin-left: 0.375rem;
 }
 
@@ -82,7 +82,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   padding: 1.875rem;
 }
 
-.c34 {
+.c33 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -94,18 +94,18 @@ exports[`renders <Cns /> without throwing 1`] = `
   appearance: button;
 }
 
-.c34::-moz-focus-inner,
-.c34[type='button']::-moz-focus-inner,
-.c34[type='reset']::-moz-focus-inner,
-.c34[type='submit']::-moz-focus-inner {
+.c33::-moz-focus-inner,
+.c33[type='button']::-moz-focus-inner,
+.c33[type='reset']::-moz-focus-inner,
+.c33[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c34:-moz-focusring,
-.c34[type='button']:-moz-focusring,
-.c34[type='reset']:-moz-focusring,
-.c34[type='submit']:-moz-focusring {
+.c33:-moz-focusring,
+.c33[type='button']:-moz-focusring,
+.c33[type='reset']:-moz-focusring,
+.c33[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -117,15 +117,15 @@ exports[`renders <Cns /> without throwing 1`] = `
   margin: 0;
 }
 
-.c33 {
+.c32 {
   min-width: 7.5rem;
 }
 
-.c32 {
+.c31 {
   display: inline-block;
 }
 
-.c31 {
+.c30 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -164,7 +164,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c31:focus {
+.c30:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -172,26 +172,26 @@ exports[`renders <Cns /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c30:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c30:active,
+.c30:active:hover,
+.c30:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c31[disabled] {
+.c30[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27 {
+.c26 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -211,7 +211,7 @@ exports[`renders <Cns /> without throwing 1`] = `
 .c13 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -260,7 +260,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c25 {
+.c24 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -295,7 +295,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   flex-direction: column;
 }
 
-.c22 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -322,7 +322,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c24 {
+.c23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -342,7 +342,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c35 {
+.c34 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -366,7 +366,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   align-items: center;
 }
 
-.c23 {
+.c22 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -383,7 +383,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   display: block;
 }
 
-.c29 {
+.c28 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -405,52 +405,52 @@ exports[`renders <Cns /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c29:focus {
+.c28:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c29::-webkit-input-placeholder {
+.c28::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29::-moz-placeholder {
+.c28::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:-ms-input-placeholder {
+.c28:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:invalid {
+.c28:invalid {
   box-shadow: none;
 }
 
-.c29:disabled {
+.c28:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c29:disabled::-webkit-input-placeholder {
+.c28:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:disabled::-moz-placeholder {
+.c28:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:disabled:-ms-input-placeholder {
+.c28:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26 {
+.c25 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c37 {
+.c36 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -463,27 +463,27 @@ exports[`renders <Cns /> without throwing 1`] = `
   align-items: center;
 }
 
-.c39 {
+.c38 {
   display: none;
 }
 
-.c39:checked + label {
+.c38:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c39:checked + label:after {
+.c38: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);
 }
 
-.c39:checked + label:active {
+.c38:checked + label:active {
   box-shadow: none;
 }
 
-.c40 {
+.c39 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -502,24 +502,24 @@ exports[`renders <Cns /> without throwing 1`] = `
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c40::selection {
+.c39::selection {
   background: none;
 }
 
-.c40:active {
+.c39:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c40:hover {
+.c39:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c40:hover:after {
+.c39:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c40:after,
-.c40:before {
+.c39:after,
+.c39:before {
   position: relative;
   display: block;
   content: '';
@@ -527,7 +527,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   height: 100%;
 }
 
-.c40:after {
+.c39:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -539,11 +539,11 @@ exports[`renders <Cns /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c40:active {
+.c39:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c40:before {
+.c39:before {
   display: none;
 }
 
@@ -555,7 +555,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   margin: 0;
 }
 
-.c38 {
+.c37 {
   margin: 0 6px;
 }
 
@@ -564,10 +564,6 @@ exports[`renders <Cns /> without throwing 1`] = `
   margin-right: 0;
 }
 
-.c21 {
-  margin-bottom: 0;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -757,36 +753,35 @@ exports[`renders <Cns /> without throwing 1`] = `
                 className="c2"
               >
                 <form
-                  className="c21"
                   onSubmit={undefined}
                 >
                   <div
-                    className="c22"
+                    className="c21"
                     wrap={true}
                   >
                     <div
-                      className="c23"
+                      className="c22"
                     >
                       <div
-                        className="c24"
+                        className="c23"
                       >
                         <div
-                          className="c25"
+                          className="c24"
                           name="name"
                           role="group"
                           style={undefined}
                         >
                           <label
-                            className="c26 c27"
+                            className="c25 c26"
                             htmlFor="k"
                           >
                             Attach to new CNS service name
                           </label>
                           <div
-                            className="c28"
+                            className="c27"
                           >
                             <input
-                              className="c29"
+                              className="c28"
                               disabled={false}
                               id="k"
                               onBlur={null}
@@ -797,13 +792,13 @@ exports[`renders <Cns /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c23"
+                      className="c22"
                     >
                       <div
-                        className="c30"
+                        className="c29"
                       >
                         <button
-                          className="c31 c32 c33 c34"
+                          className="c30 c31 c32 c33"
                           data-ui-button="true"
                           disabled={undefined}
                           href=""
@@ -827,30 +822,30 @@ exports[`renders <Cns /> without throwing 1`] = `
           className="c2"
         >
           <div
-            className="c25"
+            className="c24"
             name="cns-enabled"
             role="group"
             style={undefined}
           >
             <div
-              className="c35"
+              className="c34"
             >
               <label
-                className="c26 c27"
+                className="c25 c26"
                 disabled={false}
                 htmlFor="l"
               >
                 Disabled CNS
               </label>
               <div
-                className="c36"
+                className="c35"
               >
                 <div
-                  className="c37"
+                  className="c36"
                 >
                   <input
                     checked={true}
-                    className="c38 c39"
+                    className="c37 c38"
                     disabled={false}
                     id="l"
                     onBlur={undefined}
@@ -859,7 +854,7 @@ exports[`renders <Cns /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c38 c40"
+                    className="c37 c39"
                     disabled={false}
                     htmlFor="l"
                     id="l"
@@ -868,7 +863,7 @@ exports[`renders <Cns /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c38 c26 c27"
+                    className="c37 c25 c26"
                     disabled={false}
                     htmlFor="l"
                     id="l"
@@ -1442,11 +1437,11 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c40 {
+.c39 {
   margin-left: 0.75rem;
 }
 
-.c48 {
+.c47 {
   margin-left: 0.375rem;
 }
 
@@ -1459,12 +1454,12 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   margin-bottom: 0.1875rem;
 }
 
-.c45 {
+.c44 {
   margin-top: 0.1875rem;
   margin-bottom: 0.375rem;
 }
 
-.c46 {
+.c45 {
   margin-bottom: 0rem;
 }
 
@@ -1476,7 +1471,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   font-size: 80%;
 }
 
-.c44 {
+.c43 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1488,18 +1483,18 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   appearance: button;
 }
 
-.c44::-moz-focus-inner,
-.c44[type='button']::-moz-focus-inner,
-.c44[type='reset']::-moz-focus-inner,
-.c44[type='submit']::-moz-focus-inner {
+.c43::-moz-focus-inner,
+.c43[type='button']::-moz-focus-inner,
+.c43[type='reset']::-moz-focus-inner,
+.c43[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c44:-moz-focusring,
-.c44[type='button']:-moz-focusring,
-.c44[type='reset']:-moz-focusring,
-.c44[type='submit']:-moz-focusring {
+.c43:-moz-focusring,
+.c43[type='button']:-moz-focusring,
+.c43[type='reset']:-moz-focusring,
+.c43[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -1511,15 +1506,15 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   margin: 0;
 }
 
-.c43 {
+.c42 {
   min-width: 7.5rem;
 }
 
-.c42 {
+.c41 {
   display: inline-block;
 }
 
-.c41 {
+.c40 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1558,7 +1553,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c41:focus {
+.c40:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1566,26 +1561,26 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c41:hover {
+.c40:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c41:active,
-.c41:active:hover,
-.c41:active:focus {
+.c40:active,
+.c40:active:hover,
+.c40:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c41[disabled] {
+.c40[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c38 {
+.c37 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -1605,7 +1600,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
 .c13 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -1669,7 +1664,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c36 {
+.c35 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -1704,7 +1699,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   flex-direction: column;
 }
 
-.c35 {
+.c34 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1751,7 +1746,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c47 {
+.c46 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1792,7 +1787,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   display: block;
 }
 
-.c39 {
+.c38 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1814,42 +1809,42 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c39:focus {
+.c38:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c39::-webkit-input-placeholder {
+.c38::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c39::-moz-placeholder {
+.c38::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c39:-ms-input-placeholder {
+.c38:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c39:invalid {
+.c38:invalid {
   box-shadow: none;
 }
 
-.c39:disabled {
+.c38:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c39:disabled::-webkit-input-placeholder {
+.c38:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c39:disabled::-moz-placeholder {
+.c38:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c39:disabled:-ms-input-placeholder {
+.c38:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
@@ -1874,6 +1869,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -1946,13 +1942,13 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   color: rgb(73,73,73);
 }
 
-.c37 {
+.c36 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c49 {
+.c48 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -1965,27 +1961,27 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   align-items: center;
 }
 
-.c51 {
+.c50 {
   display: none;
 }
 
-.c51:checked + label {
+.c50:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c51:checked + label:after {
+.c50: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);
 }
 
-.c51:checked + label:active {
+.c50:checked + label:active {
   box-shadow: none;
 }
 
-.c52 {
+.c51 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -2004,24 +2000,24 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c52::selection {
+.c51::selection {
   background: none;
 }
 
-.c52:active {
+.c51:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c52:hover {
+.c51:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c52:hover:after {
+.c51:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c52:after,
-.c52:before {
+.c51:after,
+.c51:before {
   position: relative;
   display: block;
   content: '';
@@ -2029,7 +2025,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   height: 100%;
 }
 
-.c52:after {
+.c51:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -2041,11 +2037,11 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c52:active {
+.c51:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c52:before {
+.c51:before {
   display: none;
 }
 
@@ -2087,7 +2083,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   margin: 0;
 }
 
-.c50 {
+.c49 {
   margin: 0 6px;
 }
 
@@ -2096,10 +2092,6 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   margin-right: 0;
 }
 
-.c34 {
-  margin-bottom: 0;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -2519,11 +2511,10 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                 className="c2"
               >
                 <form
-                  className="c34"
                   onSubmit={undefined}
                 >
                   <div
-                    className="c35"
+                    className="c34"
                     wrap={true}
                   >
                     <div
@@ -2533,13 +2524,13 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                         className="c17"
                       >
                         <div
-                          className="c36"
+                          className="c35"
                           name="name"
                           role="group"
                           style={undefined}
                         >
                           <label
-                            className="c37 c38"
+                            className="c36 c37"
                             htmlFor="u"
                           >
                             Attach to new CNS service name
@@ -2548,7 +2539,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                             className="c24"
                           >
                             <input
-                              className="c39"
+                              className="c38"
                               disabled={false}
                               id="u"
                               onBlur={null}
@@ -2562,10 +2553,10 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                       className="c21"
                     >
                       <div
-                        className="c40"
+                        className="c39"
                       >
                         <button
-                          className="c41 c42 c43 c44"
+                          className="c40 c41 c42 c43"
                           data-ui-button="true"
                           disabled={undefined}
                           href=""
@@ -2632,7 +2623,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c45"
+                      className="c44"
                     >
                       <div
                         className="c3"
@@ -2689,7 +2680,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c45"
+                      className="c44"
                     >
                       <div
                         className="c3"
@@ -2804,7 +2795,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c46"
+                    className="c45"
                   >
                     <div
                       className="c17"
@@ -2852,7 +2843,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c45"
+                      className="c44"
                     >
                       <div
                         className="c3"
@@ -2909,7 +2900,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c45"
+                      className="c44"
                     >
                       <div
                         className="c3"
@@ -3036,30 +3027,30 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
           className="c2"
         >
           <div
-            className="c36"
+            className="c35"
             name="cns-enabled"
             role="group"
             style={undefined}
           >
             <div
-              className="c47"
+              className="c46"
             >
               <label
-                className="c37 c38"
+                className="c36 c37"
                 disabled={false}
                 htmlFor="v"
               >
                 Disabled CNS
               </label>
               <div
-                className="c48"
+                className="c47"
               >
                 <div
-                  className="c49"
+                  className="c48"
                 >
                   <input
                     checked={true}
-                    className="c50 c51"
+                    className="c49 c50"
                     disabled={false}
                     id="v"
                     onBlur={undefined}
@@ -3068,7 +3059,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c50 c52"
+                    className="c49 c51"
                     disabled={false}
                     htmlFor="v"
                     id="v"
@@ -3077,7 +3068,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c50 c37 c38"
+                    className="c49 c36 c37"
                     disabled={false}
                     htmlFor="v"
                     id="v"
@@ -3503,11 +3494,11 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   margin-bottom: 1.875rem;
 }
 
-.c33 {
+.c32 {
   margin-top: 0.1875rem;
 }
 
-.c35 {
+.c34 {
   margin-left: 0.75rem;
 }
 
@@ -3515,7 +3506,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   padding: 1.875rem;
 }
 
-.c39 {
+.c38 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -3527,18 +3518,18 @@ exports[`renders <Cns loadingError /> 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 {
+.c38::-moz-focus-inner,
+.c38[type='button']::-moz-focus-inner,
+.c38[type='reset']::-moz-focus-inner,
+.c38[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 {
+.c38:-moz-focusring,
+.c38[type='button']:-moz-focusring,
+.c38[type='reset']:-moz-focusring,
+.c38[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -3550,15 +3541,15 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c38 {
+.c37 {
   min-width: 7.5rem;
 }
 
-.c37 {
+.c36 {
   display: inline-block;
 }
 
-.c36 {
+.c35 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3597,7 +3588,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c36:focus {
+.c35:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3605,26 +3596,26 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c36:hover {
+.c35:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c36:active,
-.c36:active:hover,
-.c36:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c36[disabled] {
+.c35[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32 {
+.c31 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -3644,7 +3635,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
 .c18 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -3701,7 +3692,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c30 {
+.c29 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -3736,7 +3727,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   flex-direction: column;
 }
 
-.c27 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3763,7 +3754,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c29 {
+.c28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3783,7 +3774,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c28 {
+.c27 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3800,7 +3791,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   display: block;
 }
 
-.c34 {
+.c33 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -3822,46 +3813,46 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c34:focus {
+.c33:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c34::-webkit-input-placeholder {
+.c33::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34::-moz-placeholder {
+.c33::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:-ms-input-placeholder {
+.c33:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:invalid {
+.c33:invalid {
   box-shadow: none;
 }
 
-.c34:disabled {
+.c33:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c34:disabled::-webkit-input-placeholder {
+.c33:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:disabled::-moz-placeholder {
+.c33:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:disabled:-ms-input-placeholder {
+.c33:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c31 {
+.c30 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
@@ -3909,10 +3900,6 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   margin-right: 0;
 }
 
-.c26 {
-  margin-bottom: 0;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -4127,36 +4114,35 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
                 className="c2"
               >
                 <form
-                  className="c26"
                   onSubmit={undefined}
                 >
                   <div
-                    className="c27"
+                    className="c26"
                     wrap={true}
                   >
                     <div
-                      className="c28"
+                      className="c27"
                     >
                       <div
-                        className="c29"
+                        className="c28"
                       >
                         <div
-                          className="c30"
+                          className="c29"
                           name="name"
                           role="group"
                           style={undefined}
                         >
                           <label
-                            className="c31 c32"
+                            className="c30 c31"
                             htmlFor="m"
                           >
                             Attach to new CNS service name
                           </label>
                           <div
-                            className="c33"
+                            className="c32"
                           >
                             <input
-                              className="c34"
+                              className="c33"
                               disabled={false}
                               id="m"
                               onBlur={null}
@@ -4167,13 +4153,13 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c28"
+                      className="c27"
                     >
                       <div
-                        className="c35"
+                        className="c34"
                       >
                         <button
-                          className="c36 c37 c38 c39"
+                          className="c35 c36 c37 c38"
                           data-ui-button="true"
                           disabled={undefined}
                           href=""
@@ -4275,11 +4261,11 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c40 {
+.c39 {
   margin-left: 0.75rem;
 }
 
-.c54 {
+.c53 {
   margin-left: 0.375rem;
 }
 
@@ -4292,21 +4278,21 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   margin-bottom: 0.1875rem;
 }
 
-.c45 {
+.c44 {
   margin-top: 0.375rem;
 }
 
-.c48 {
+.c47 {
   margin-right: 0.375rem;
   margin-bottom: 0.375rem;
 }
 
-.c50 {
+.c49 {
   margin-top: 0.1875rem;
   margin-bottom: 0.375rem;
 }
 
-.c51 {
+.c50 {
   margin-bottom: 0rem;
 }
 
@@ -4318,7 +4304,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   font-size: 80%;
 }
 
-.c44 {
+.c43 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -4330,18 +4316,18 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   appearance: button;
 }
 
-.c44::-moz-focus-inner,
-.c44[type='button']::-moz-focus-inner,
-.c44[type='reset']::-moz-focus-inner,
-.c44[type='submit']::-moz-focus-inner {
+.c43::-moz-focus-inner,
+.c43[type='button']::-moz-focus-inner,
+.c43[type='reset']::-moz-focus-inner,
+.c43[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c44:-moz-focusring,
-.c44[type='button']:-moz-focusring,
-.c44[type='reset']:-moz-focusring,
-.c44[type='submit']:-moz-focusring {
+.c43:-moz-focusring,
+.c43[type='button']:-moz-focusring,
+.c43[type='reset']:-moz-focusring,
+.c43[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -4353,15 +4339,15 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   margin: 0;
 }
 
-.c43 {
+.c42 {
   min-width: 7.5rem;
 }
 
-.c42 {
+.c41 {
   display: inline-block;
 }
 
-.c41 {
+.c40 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4400,7 +4386,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c41:focus {
+.c40:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -4408,26 +4394,26 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c41:hover {
+.c40:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c41:active,
-.c41:active:hover,
-.c41:active:focus {
+.c40:active,
+.c40:active:hover,
+.c40:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c41[disabled] {
+.c40[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c38 {
+.c37 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -4447,7 +4433,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
 .c13 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -4511,7 +4497,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c36 {
+.c35 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -4546,7 +4532,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   flex-direction: column;
 }
 
-.c35 {
+.c34 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4593,7 +4579,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c52 {
+.c51 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4655,6 +4641,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -4727,7 +4714,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   color: rgb(73,73,73);
 }
 
-.c39 {
+.c38 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -4752,71 +4739,71 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c39:focus {
+.c38:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c39::-webkit-input-placeholder {
+.c38::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c39::-moz-placeholder {
+.c38::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c39:-ms-input-placeholder {
+.c38:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c39:invalid {
+.c38:invalid {
   box-shadow: none;
 }
 
-.c39::-webkit-input-placeholder {
+.c38::-webkit-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c39::-moz-placeholder {
+.c38::-moz-placeholder {
   color: rgb(216,216,216);
 }
 
-.c39:-ms-input-placeholder {
+.c38:-ms-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c39:disabled {
+.c38:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c39:disabled::-webkit-input-placeholder {
+.c38:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c39:disabled::-moz-placeholder {
+.c38:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c39:disabled:-ms-input-placeholder {
+.c38:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c37 {
+.c36 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c53 {
+.c52 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   color: rgb(216,216,216);
 }
 
-.c55 {
+.c54 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -4829,36 +4816,36 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   align-items: center;
 }
 
-.c57 {
+.c56 {
   display: none;
 }
 
-.c57:checked + label {
+.c56:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c57:checked + label:after {
+.c56: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);
 }
 
-.c57:checked + label:active {
+.c56:checked + label:active {
   box-shadow: none;
 }
 
-.c57:checked + label {
+.c56:checked + label {
   background: rgb(250,250,250);
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c57:checked + label:after {
+.c56:checked + label:after {
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c58 {
+.c57 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -4878,24 +4865,24 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   cursor: not-allowed;
 }
 
-.c58::selection {
+.c57::selection {
   background: none;
 }
 
-.c58:active {
+.c57:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c58:hover {
+.c57:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c58:hover:after {
+.c57:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c58:after,
-.c58:before {
+.c57:after,
+.c57:before {
   position: relative;
   display: block;
   content: '';
@@ -4903,7 +4890,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   height: 100%;
 }
 
-.c58:after {
+.c57:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -4915,36 +4902,36 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c58:active {
+.c57:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c58:before {
+.c57:before {
   display: none;
 }
 
-.c58:active {
+.c57:active {
   box-shadow: none;
 }
 
-.c58:active:after {
+.c57:active:after {
   padding-right: 0;
 }
 
-.c58:before {
+.c57:before {
   cursor: not-allowed;
 }
 
-.c58:after {
+.c57:after {
   cursor: not-allowed;
   background: rgb(230,230,230);
 }
 
-.c58:hover {
+.c57:hover {
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c58:hover:after {
+.c57:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
@@ -4972,7 +4959,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c49 {
+.c48 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -4995,7 +4982,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   border: 0.0625rem solid rgb(45,56,132);
 }
 
-.c47 {
+.c46 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -5008,7 +4995,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   flex-wrap: wrap;
 }
 
-.c46 {
+.c45 {
   margin-bottom: -0.375rem;
 }
 
@@ -5026,7 +5013,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   margin: 0;
 }
 
-.c56 {
+.c55 {
   margin: 0 6px;
 }
 
@@ -5035,10 +5022,6 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   margin-right: 0;
 }
 
-.c34 {
-  margin-bottom: 0;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -5458,11 +5441,10 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                 className="c2"
               >
                 <form
-                  className="c34"
                   onSubmit={undefined}
                 >
                   <div
-                    className="c35"
+                    className="c34"
                     wrap={true}
                   >
                     <div
@@ -5472,13 +5454,13 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                         className="c17"
                       >
                         <div
-                          className="c36"
+                          className="c35"
                           name="name"
                           role="group"
                           style={undefined}
                         >
                           <label
-                            className="c37 c38"
+                            className="c36 c37"
                             htmlFor="p"
                           >
                             Attach to new CNS service name
@@ -5487,7 +5469,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                             className="c24"
                           >
                             <input
-                              className="c39"
+                              className="c38"
                               disabled={true}
                               id="p"
                               onBlur={null}
@@ -5501,10 +5483,10 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       className="c21"
                     >
                       <div
-                        className="c40"
+                        className="c39"
                       >
                         <button
-                          className="c41 c42 c43 c44"
+                          className="c40 c41 c42 c43"
                           data-ui-button="true"
                           disabled={undefined}
                           href=""
@@ -5521,22 +5503,22 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                 className="c2"
               >
                 <label
-                  className="c37 c38"
+                  className="c36 c37"
                   htmlFor=""
                 >
                   Existing CNS service name(s)
                 </label>
                 <div
-                  className="c45"
+                  className="c44"
                 >
                   <ul
-                    className="c46 c47"
+                    className="c45 c46"
                   >
                     <div
-                      className="c48"
+                      className="c47"
                     >
                       <li
-                        className="c49"
+                        className="c48"
                         fill="rgba(66, 134, 244, 0.1)"
                         id="cns-tag-0"
                       >
@@ -5544,10 +5526,10 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </li>
                     </div>
                     <div
-                      className="c48"
+                      className="c47"
                     >
                       <li
-                        className="c49"
+                        className="c48"
                         fill="rgba(66, 134, 244, 0.1)"
                         id="cns-tag-1"
                       >
@@ -5555,10 +5537,10 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </li>
                     </div>
                     <div
-                      className="c48"
+                      className="c47"
                     >
                       <li
-                        className="c49"
+                        className="c48"
                         fill="rgba(66, 134, 244, 0.1)"
                         id="cns-tag-2"
                       >
@@ -5622,7 +5604,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c50"
+                      className="c49"
                     >
                       <div
                         className="c3"
@@ -5679,7 +5661,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c50"
+                      className="c49"
                     >
                       <div
                         className="c3"
@@ -5794,7 +5776,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c51"
+                    className="c50"
                   >
                     <div
                       className="c17"
@@ -5842,7 +5824,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c50"
+                      className="c49"
                     >
                       <div
                         className="c3"
@@ -5899,7 +5881,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c50"
+                      className="c49"
                     >
                       <div
                         className="c3"
@@ -6026,30 +6008,30 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
           className="c2"
         >
           <div
-            className="c36"
+            className="c35"
             name="cns-enabled"
             role="group"
             style={undefined}
           >
             <div
-              className="c52"
+              className="c51"
             >
               <label
-                className="c53 c38"
+                className="c52 c37"
                 disabled={true}
                 htmlFor="q"
               >
                 Disabled CNS
               </label>
               <div
-                className="c54"
+                className="c53"
               >
                 <div
-                  className="c55"
+                  className="c54"
                 >
                   <input
                     checked={true}
-                    className="c56 c57"
+                    className="c55 c56"
                     disabled={true}
                     id="q"
                     onBlur={undefined}
@@ -6058,7 +6040,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c56 c58"
+                    className="c55 c57"
                     disabled={true}
                     htmlFor="q"
                     id="q"
@@ -6067,7 +6049,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c56 c53 c38"
+                    className="c55 c52 c37"
                     disabled={true}
                     htmlFor="q"
                     id="q"
@@ -6154,15 +6136,15 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   margin-bottom: 1.875rem;
 }
 
-.c33 {
+.c32 {
   margin-top: 0.1875rem;
 }
 
-.c35 {
+.c34 {
   margin-left: 0.75rem;
 }
 
-.c41 {
+.c40 {
   margin-left: 0.375rem;
 }
 
@@ -6170,7 +6152,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   padding: 1.875rem;
 }
 
-.c39 {
+.c38 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -6182,18 +6164,18 @@ exports[`renders <Cns mutationError /> 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 {
+.c38::-moz-focus-inner,
+.c38[type='button']::-moz-focus-inner,
+.c38[type='reset']::-moz-focus-inner,
+.c38[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 {
+.c38:-moz-focusring,
+.c38[type='button']:-moz-focusring,
+.c38[type='reset']:-moz-focusring,
+.c38[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -6205,15 +6187,15 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c38 {
+.c37 {
   min-width: 7.5rem;
 }
 
-.c37 {
+.c36 {
   display: inline-block;
 }
 
-.c36 {
+.c35 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6252,7 +6234,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c36:focus {
+.c35:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -6260,26 +6242,26 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c36:hover {
+.c35:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c36:active,
-.c36:active:hover,
-.c36:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c36[disabled] {
+.c35[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32 {
+.c31 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -6299,7 +6281,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
 .c18 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -6356,7 +6338,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c30 {
+.c29 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -6391,7 +6373,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   flex-direction: column;
 }
 
-.c27 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6418,7 +6400,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c29 {
+.c28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6438,7 +6420,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c40 {
+.c39 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6462,7 +6444,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   align-items: center;
 }
 
-.c28 {
+.c27 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -6479,7 +6461,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   display: block;
 }
 
-.c34 {
+.c33 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -6501,52 +6483,52 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c34:focus {
+.c33:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c34::-webkit-input-placeholder {
+.c33::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34::-moz-placeholder {
+.c33::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:-ms-input-placeholder {
+.c33:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:invalid {
+.c33:invalid {
   box-shadow: none;
 }
 
-.c34:disabled {
+.c33:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c34:disabled::-webkit-input-placeholder {
+.c33:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:disabled::-moz-placeholder {
+.c33:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c34:disabled:-ms-input-placeholder {
+.c33:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c31 {
+.c30 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c42 {
+.c41 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -6559,27 +6541,27 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   align-items: center;
 }
 
-.c44 {
+.c43 {
   display: none;
 }
 
-.c44:checked + label {
+.c43:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c44:checked + label:after {
+.c43: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 {
+.c43:checked + label:active {
   box-shadow: none;
 }
 
-.c45 {
+.c44 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -6598,24 +6580,24 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c45::selection {
+.c44::selection {
   background: none;
 }
 
-.c45:active {
+.c44:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c45:hover {
+.c44:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c45:hover:after {
+.c44:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c45:after,
-.c45:before {
+.c44:after,
+.c44:before {
   position: relative;
   display: block;
   content: '';
@@ -6623,7 +6605,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   height: 100%;
 }
 
-.c45:after {
+.c44:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -6635,11 +6617,11 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c45:active {
+.c44:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c45:before {
+.c44:before {
   display: none;
 }
 
@@ -6680,7 +6662,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c43 {
+.c42 {
   margin: 0 6px;
 }
 
@@ -6689,10 +6671,6 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   margin-right: 0;
 }
 
-.c26 {
-  margin-bottom: 0;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -6907,36 +6885,35 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
                 className="c2"
               >
                 <form
-                  className="c26"
                   onSubmit={undefined}
                 >
                   <div
-                    className="c27"
+                    className="c26"
                     wrap={true}
                   >
                     <div
-                      className="c28"
+                      className="c27"
                     >
                       <div
-                        className="c29"
+                        className="c28"
                       >
                         <div
-                          className="c30"
+                          className="c29"
                           name="name"
                           role="group"
                           style={undefined}
                         >
                           <label
-                            className="c31 c32"
+                            className="c30 c31"
                             htmlFor="n"
                           >
                             Attach to new CNS service name
                           </label>
                           <div
-                            className="c33"
+                            className="c32"
                           >
                             <input
-                              className="c34"
+                              className="c33"
                               disabled={false}
                               id="n"
                               onBlur={null}
@@ -6947,13 +6924,13 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c28"
+                      className="c27"
                     >
                       <div
-                        className="c35"
+                        className="c34"
                       >
                         <button
-                          className="c36 c37 c38 c39"
+                          className="c35 c36 c37 c38"
                           data-ui-button="true"
                           disabled={undefined}
                           href=""
@@ -6977,30 +6954,30 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
           className="c2"
         >
           <div
-            className="c30"
+            className="c29"
             name="cns-enabled"
             role="group"
             style={undefined}
           >
             <div
-              className="c40"
+              className="c39"
             >
               <label
-                className="c31 c32"
+                className="c30 c31"
                 disabled={false}
                 htmlFor="o"
               >
                 Disabled CNS
               </label>
               <div
-                className="c41"
+                className="c40"
               >
                 <div
-                  className="c42"
+                  className="c41"
                 >
                   <input
                     checked={true}
-                    className="c43 c44"
+                    className="c42 c43"
                     disabled={false}
                     id="o"
                     onBlur={undefined}
@@ -7009,7 +6986,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c43 c45"
+                    className="c42 c44"
                     disabled={false}
                     htmlFor="o"
                     id="o"
@@ -7018,7 +6995,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c43 c31 c32"
+                    className="c42 c30 c31"
                     disabled={false}
                     htmlFor="o"
                     id="o"
@@ -7105,23 +7082,23 @@ exports[`renders <Cns services /> without throwing 1`] = `
   margin-bottom: 1.875rem;
 }
 
-.c28 {
+.c27 {
   margin-top: 0.1875rem;
 }
 
-.c30 {
+.c29 {
   margin-left: 0.75rem;
 }
 
-.c42 {
+.c41 {
   margin-left: 0.375rem;
 }
 
-.c35 {
+.c34 {
   margin-top: 0.375rem;
 }
 
-.c38 {
+.c37 {
   margin-right: 0.375rem;
   margin-bottom: 0.375rem;
 }
@@ -7130,7 +7107,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   padding: 1.875rem;
 }
 
-.c34 {
+.c33 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -7142,18 +7119,18 @@ exports[`renders <Cns services /> without throwing 1`] = `
   appearance: button;
 }
 
-.c34::-moz-focus-inner,
-.c34[type='button']::-moz-focus-inner,
-.c34[type='reset']::-moz-focus-inner,
-.c34[type='submit']::-moz-focus-inner {
+.c33::-moz-focus-inner,
+.c33[type='button']::-moz-focus-inner,
+.c33[type='reset']::-moz-focus-inner,
+.c33[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c34:-moz-focusring,
-.c34[type='button']:-moz-focusring,
-.c34[type='reset']:-moz-focusring,
-.c34[type='submit']:-moz-focusring {
+.c33:-moz-focusring,
+.c33[type='button']:-moz-focusring,
+.c33[type='reset']:-moz-focusring,
+.c33[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -7165,15 +7142,15 @@ exports[`renders <Cns services /> without throwing 1`] = `
   margin: 0;
 }
 
-.c33 {
+.c32 {
   min-width: 7.5rem;
 }
 
-.c32 {
+.c31 {
   display: inline-block;
 }
 
-.c31 {
+.c30 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -7212,7 +7189,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c31:focus {
+.c30:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -7220,26 +7197,26 @@ exports[`renders <Cns services /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c30:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c30:active,
+.c30:active:hover,
+.c30:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c31[disabled] {
+.c30[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27 {
+.c26 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -7259,7 +7236,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
 .c13 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -7308,7 +7285,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c25 {
+.c24 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -7343,7 +7320,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   flex-direction: column;
 }
 
-.c22 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7370,7 +7347,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c24 {
+.c23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7390,7 +7367,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c41 {
+.c40 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7414,7 +7391,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   align-items: center;
 }
 
-.c23 {
+.c22 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -7431,7 +7408,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   display: block;
 }
 
-.c29 {
+.c28 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -7453,52 +7430,52 @@ exports[`renders <Cns services /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c29:focus {
+.c28:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c29::-webkit-input-placeholder {
+.c28::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29::-moz-placeholder {
+.c28::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:-ms-input-placeholder {
+.c28:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:invalid {
+.c28:invalid {
   box-shadow: none;
 }
 
-.c29:disabled {
+.c28:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c29:disabled::-webkit-input-placeholder {
+.c28:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:disabled::-moz-placeholder {
+.c28:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:disabled:-ms-input-placeholder {
+.c28:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26 {
+.c25 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c43 {
+.c42 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -7511,27 +7488,27 @@ exports[`renders <Cns services /> without throwing 1`] = `
   align-items: center;
 }
 
-.c45 {
+.c44 {
   display: none;
 }
 
-.c45:checked + label {
+.c44:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c45:checked + label:after {
+.c44: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);
 }
 
-.c45:checked + label:active {
+.c44:checked + label:active {
   box-shadow: none;
 }
 
-.c46 {
+.c45 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -7550,24 +7527,24 @@ exports[`renders <Cns services /> without throwing 1`] = `
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c46::selection {
+.c45::selection {
   background: none;
 }
 
-.c46:active {
+.c45:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c46:hover {
+.c45:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c46:hover:after {
+.c45:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c46:after,
-.c46:before {
+.c45:after,
+.c45:before {
   position: relative;
   display: block;
   content: '';
@@ -7575,7 +7552,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   height: 100%;
 }
 
-.c46:after {
+.c45:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -7587,20 +7564,20 @@ exports[`renders <Cns services /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c46:active {
+.c45:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c46:before {
+.c45:before {
   display: none;
 }
 
-.c40 {
+.c39 {
   margin-left: 0.75rem;
   cursor: pointer;
 }
 
-.c39 {
+.c38 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -7623,7 +7600,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   border: 0.0625rem solid rgb(45,56,132);
 }
 
-.c37 {
+.c36 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -7636,7 +7613,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   flex-wrap: wrap;
 }
 
-.c36 {
+.c35 {
   margin-bottom: -0.375rem;
 }
 
@@ -7648,7 +7625,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   margin: 0;
 }
 
-.c44 {
+.c43 {
   margin: 0 6px;
 }
 
@@ -7657,10 +7634,6 @@ exports[`renders <Cns services /> without throwing 1`] = `
   margin-right: 0;
 }
 
-.c21 {
-  margin-bottom: 0;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -7850,36 +7823,35 @@ exports[`renders <Cns services /> without throwing 1`] = `
                 className="c2"
               >
                 <form
-                  className="c21"
                   onSubmit={undefined}
                 >
                   <div
-                    className="c22"
+                    className="c21"
                     wrap={true}
                   >
                     <div
-                      className="c23"
+                      className="c22"
                     >
                       <div
-                        className="c24"
+                        className="c23"
                       >
                         <div
-                          className="c25"
+                          className="c24"
                           name="name"
                           role="group"
                           style={undefined}
                         >
                           <label
-                            className="c26 c27"
+                            className="c25 c26"
                             htmlFor="s"
                           >
                             Attach to new CNS service name
                           </label>
                           <div
-                            className="c28"
+                            className="c27"
                           >
                             <input
-                              className="c29"
+                              className="c28"
                               disabled={false}
                               id="s"
                               onBlur={null}
@@ -7890,13 +7862,13 @@ exports[`renders <Cns services /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c23"
+                      className="c22"
                     >
                       <div
-                        className="c30"
+                        className="c29"
                       >
                         <button
-                          className="c31 c32 c33 c34"
+                          className="c30 c31 c32 c33"
                           data-ui-button="true"
                           disabled={undefined}
                           href=""
@@ -7913,28 +7885,28 @@ exports[`renders <Cns services /> without throwing 1`] = `
                 className="c2"
               >
                 <label
-                  className="c26 c27"
+                  className="c25 c26"
                   htmlFor=""
                 >
                   Existing CNS service name(s)
                 </label>
                 <div
-                  className="c35"
+                  className="c34"
                 >
                   <ul
-                    className="c36 c37"
+                    className="c35 c36"
                   >
                     <div
-                      className="c38"
+                      className="c37"
                     >
                       <li
-                        className="c39"
+                        className="c38"
                         fill="rgba(66, 134, 244, 0.1)"
                         id="cns-tag-0"
                       >
                         serbice
                         <svg
-                          className="c40"
+                          className="c39"
                           height="11.31"
                           innerRef={undefined}
                           onClick={[Function]}
@@ -7955,16 +7927,16 @@ exports[`renders <Cns services /> without throwing 1`] = `
                       </li>
                     </div>
                     <div
-                      className="c38"
+                      className="c37"
                     >
                       <li
-                        className="c39"
+                        className="c38"
                         fill="rgba(66, 134, 244, 0.1)"
                         id="cns-tag-1"
                       >
                         dssasda
                         <svg
-                          className="c40"
+                          className="c39"
                           height="11.31"
                           innerRef={undefined}
                           onClick={[Function]}
@@ -7985,16 +7957,16 @@ exports[`renders <Cns services /> without throwing 1`] = `
                       </li>
                     </div>
                     <div
-                      className="c38"
+                      className="c37"
                     >
                       <li
-                        className="c39"
+                        className="c38"
                         fill="rgba(66, 134, 244, 0.1)"
                         id="cns-tag-2"
                       >
                         dsasd
                         <svg
-                          className="c40"
+                          className="c39"
                           height="11.31"
                           innerRef={undefined}
                           onClick={[Function]}
@@ -8028,30 +8000,30 @@ exports[`renders <Cns services /> without throwing 1`] = `
           className="c2"
         >
           <div
-            className="c25"
+            className="c24"
             name="cns-enabled"
             role="group"
             style={undefined}
           >
             <div
-              className="c41"
+              className="c40"
             >
               <label
-                className="c26 c27"
+                className="c25 c26"
                 disabled={false}
                 htmlFor="t"
               >
                 Disabled CNS
               </label>
               <div
-                className="c42"
+                className="c41"
               >
                 <div
-                  className="c43"
+                  className="c42"
                 >
                   <input
                     checked={true}
-                    className="c44 c45"
+                    className="c43 c44"
                     disabled={false}
                     id="t"
                     onBlur={undefined}
@@ -8060,7 +8032,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c44 c46"
+                    className="c43 c45"
                     disabled={false}
                     htmlFor="t"
                     id="t"
@@ -8069,7 +8041,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c44 c26 c27"
+                    className="c43 c25 c26"
                     disabled={false}
                     htmlFor="t"
                     id="t"
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 d6d6949c..fb400259 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
@@ -10,20 +10,20 @@ Array [
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c19 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c21 {
+.c20 {
   margin-top: 1.875rem;
 }
 
-.c26 {
+.c25 {
   margin-bottom: 0.75rem;
 }
 
-.c24 {
+.c23 {
   padding: 8rem;
 }
 
@@ -47,7 +47,7 @@ Array [
   align-content: stretch;
 }
 
-.c25 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -95,7 +95,7 @@ Array [
   display: block;
 }
 
-.c15 {
+.c14 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -103,32 +103,32 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c14[type='checkbox'],
+.c14[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c14[type='number']::-webkit-inner-spin-button,
+.c14[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c14[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 {
+.c14[type='search']::-webkit-search-cancel-button,
+.c14[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c14::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
@@ -143,7 +143,7 @@ Array [
   margin: 0;
 }
 
-.c19 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -194,15 +194,15 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c28 {
+.c27 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
 
-.c23 {
+.c22 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -224,33 +224,33 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c14 {
+.c13 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c13:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c13:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c13:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c13:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c13:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c15 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -267,7 +267,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c15::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -284,7 +284,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c12 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -293,12 +293,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c16 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c11 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -322,25 +322,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c11 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c11 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 {
+.c11 div[type='checkbox'],
+.c11 div[type='checkbox'] input,
+.c11 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c10 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -352,26 +352,22 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c27 {
+.c26 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c22 {
+.c21 {
   width: calc(100% - 0.125rem);
 }
 
-.c10 {
-  margin-bottom: 0 !important;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -471,11 +467,10 @@ Array [
                 className="c9"
             >
                 <form
-                    className="c10"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c10"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -483,11 +478,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c11"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c12"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -495,30 +490,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c13 c14"
                                     disabled={false}
                                     id="l"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c15"
                                     htmlFor="l"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c17 c18"
                                     htmlFor="l"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c19"
                                     >
                                         Enable Firewall
                                     </div>
@@ -534,21 +529,21 @@ Array [
         />
     </div>
     <div
-        className="c21"
+        className="c20"
     >
         <div
-            className="c22 c23"
+            className="c21 c22"
             disabled={false}
             name="card"
         >
             <div
-                className="c24"
+                className="c23"
             >
                 <div
-                    className="c25"
+                    className="c24"
                 >
                     <div
-                        className="c26"
+                        className="c25"
                     >
                         <svg
                             height="109"
@@ -842,7 +837,7 @@ Array [
                         </svg>
                     </div>
                     <h3
-                        className="c27 c28"
+                        className="c26 c27"
                     >
                         Sorry, but we weren’t able to find any firewall rules.
                     </h3>
@@ -859,20 +854,20 @@ Array [
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c19 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c21 {
+.c20 {
   margin-top: 1.875rem;
 }
 
-.c26 {
+.c25 {
   margin-bottom: 0.75rem;
 }
 
-.c24 {
+.c23 {
   padding: 8rem;
 }
 
@@ -896,7 +891,7 @@ Array [
   align-content: stretch;
 }
 
-.c25 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -944,7 +939,7 @@ Array [
   display: block;
 }
 
-.c15 {
+.c14 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -952,32 +947,32 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c14[type='checkbox'],
+.c14[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c14[type='number']::-webkit-inner-spin-button,
+.c14[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c14[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 {
+.c14[type='search']::-webkit-search-cancel-button,
+.c14[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c14::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
@@ -992,7 +987,7 @@ Array [
   margin: 0;
 }
 
-.c19 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -1043,15 +1038,15 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c28 {
+.c27 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
 
-.c23 {
+.c22 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1073,33 +1068,33 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c14 {
+.c13 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c13:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c13:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c13:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c13:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c13:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c15 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -1116,7 +1111,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c15::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -1133,7 +1128,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c12 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -1142,12 +1137,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c16 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c11 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1171,25 +1166,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c11 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c11 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 {
+.c11 div[type='checkbox'],
+.c11 div[type='checkbox'] input,
+.c11 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c10 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -1201,26 +1196,22 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c27 {
+.c26 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c22 {
+.c21 {
   width: calc(100% - 0.125rem);
 }
 
-.c10 {
-  margin-bottom: 0 !important;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -1320,11 +1311,10 @@ Array [
                 className="c9"
             >
                 <form
-                    className="c10"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c10"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -1332,11 +1322,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c11"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c12"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -1344,30 +1334,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c13 c14"
                                     disabled={false}
                                     id="n"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c15"
                                     htmlFor="n"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c17 c18"
                                     htmlFor="n"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c19"
                                     >
                                         Enable Firewall
                                     </div>
@@ -1381,11 +1371,9 @@ Array [
         <div
             className="c8"
         >
-            <form
-                className="c10"
-            >
+            <form>
                 <div
-                    className="c11"
+                    className="c10"
                     id="fw-toggle-inactive"
                     name="inactive"
                     role="group"
@@ -1393,11 +1381,11 @@ Array [
                     type="checkbox"
                 >
                     <li
-                        className="c12"
+                        className="c11"
                     >
                         <div
                             checked={false}
-                            className="c13"
+                            className="c12"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
@@ -1405,30 +1393,30 @@ Array [
                         >
                             <input
                                 checked={false}
-                                className="c14 c15"
+                                className="c13 c14"
                                 disabled={false}
                                 id="p"
                                 onBlur={undefined}
                                 type="checkbox"
                             />
                             <label
-                                className="c16"
+                                className="c15"
                                 htmlFor="p"
                             />
                         </div>
                         <div
                             checked={false}
-                            className="c17"
+                            className="c16"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
                         >
                             <label
-                                className="c18 c19"
+                                className="c17 c18"
                                 htmlFor="p"
                             >
                                 <div
-                                    className="c20"
+                                    className="c19"
                                 >
                                     Show inactive rules
                                 </div>
@@ -1440,21 +1428,21 @@ Array [
         </div>
     </div>
     <div
-        className="c21"
+        className="c20"
     >
         <div
-            className="c22 c23"
+            className="c21 c22"
             disabled={false}
             name="card"
         >
             <div
-                className="c24"
+                className="c23"
             >
                 <div
-                    className="c25"
+                    className="c24"
                 >
                     <div
-                        className="c26"
+                        className="c25"
                     >
                         <svg
                             height="109"
@@ -1748,7 +1736,7 @@ Array [
                         </svg>
                     </div>
                     <h3
-                        className="c27 c28"
+                        className="c26 c27"
                     >
                         Sorry, but we weren’t able to find any firewall rules.
                     </h3>
@@ -1770,20 +1758,20 @@ Array [
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c19 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c21 {
+.c20 {
   margin-top: 1.875rem;
 }
 
-.c26 {
+.c25 {
   margin-bottom: 0.75rem;
 }
 
-.c24 {
+.c23 {
   padding: 8rem;
 }
 
@@ -1807,7 +1795,7 @@ Array [
   align-content: stretch;
 }
 
-.c25 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1855,7 +1843,7 @@ Array [
   display: block;
 }
 
-.c15 {
+.c14 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1863,32 +1851,32 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c14[type='checkbox'],
+.c14[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c14[type='number']::-webkit-inner-spin-button,
+.c14[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c14[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 {
+.c14[type='search']::-webkit-search-cancel-button,
+.c14[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c14::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
@@ -1903,7 +1891,7 @@ Array [
   margin: 0;
 }
 
-.c19 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -1954,15 +1942,15 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c28 {
+.c27 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
 
-.c23 {
+.c22 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1984,33 +1972,33 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c14 {
+.c13 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c13:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c13:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c13:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c13:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c13:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c15 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -2027,7 +2015,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c15::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -2044,7 +2032,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c12 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -2053,12 +2041,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c16 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c11 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2082,25 +2070,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c11 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c11 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 {
+.c11 div[type='checkbox'],
+.c11 div[type='checkbox'] input,
+.c11 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c10 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -2112,26 +2100,22 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c27 {
+.c26 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c22 {
+.c21 {
   width: calc(100% - 0.125rem);
 }
 
-.c10 {
-  margin-bottom: 0 !important;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -2231,11 +2215,10 @@ Array [
                 className="c9"
             >
                 <form
-                    className="c10"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c10"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -2243,11 +2226,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c11"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c12"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -2255,30 +2238,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c13 c14"
                                     disabled={false}
                                     id="r"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c15"
                                     htmlFor="r"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c17 c18"
                                     htmlFor="r"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c19"
                                     >
                                         Enable Firewall
                                     </div>
@@ -2294,21 +2277,21 @@ Array [
         />
     </div>
     <div
-        className="c21"
+        className="c20"
     >
         <div
-            className="c22 c23"
+            className="c21 c22"
             disabled={false}
             name="card"
         >
             <div
-                className="c24"
+                className="c23"
             >
                 <div
-                    className="c25"
+                    className="c24"
                 >
                     <div
-                        className="c26"
+                        className="c25"
                     >
                         <svg
                             height="109"
@@ -2602,7 +2585,7 @@ Array [
                         </svg>
                     </div>
                     <h3
-                        className="c27 c28"
+                        className="c26 c27"
                     >
                         Sorry, but we weren’t able to find any firewall rules.
                     </h3>
@@ -2619,20 +2602,20 @@ Array [
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c19 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c21 {
+.c20 {
   margin-top: 1.875rem;
 }
 
-.c26 {
+.c25 {
   margin-bottom: 0.75rem;
 }
 
-.c24 {
+.c23 {
   padding: 8rem;
 }
 
@@ -2656,7 +2639,7 @@ Array [
   align-content: stretch;
 }
 
-.c25 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2704,7 +2687,7 @@ Array [
   display: block;
 }
 
-.c15 {
+.c14 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2712,32 +2695,32 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c14[type='checkbox'],
+.c14[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c14[type='number']::-webkit-inner-spin-button,
+.c14[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c14[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 {
+.c14[type='search']::-webkit-search-cancel-button,
+.c14[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c14::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
@@ -2752,7 +2735,7 @@ Array [
   margin: 0;
 }
 
-.c19 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -2803,15 +2786,15 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c28 {
+.c27 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
 
-.c23 {
+.c22 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2833,33 +2816,33 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c14 {
+.c13 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c13:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c13:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c13:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c13:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c13:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c15 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -2876,7 +2859,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c15::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -2893,7 +2876,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c12 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -2902,12 +2885,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c16 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c11 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2931,25 +2914,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c11 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c11 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 {
+.c11 div[type='checkbox'],
+.c11 div[type='checkbox'] input,
+.c11 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c10 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -2961,26 +2944,22 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c27 {
+.c26 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c22 {
+.c21 {
   width: calc(100% - 0.125rem);
 }
 
-.c10 {
-  margin-bottom: 0 !important;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -3080,11 +3059,10 @@ Array [
                 className="c9"
             >
                 <form
-                    className="c10"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c10"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -3092,11 +3070,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c11"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c12"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -3104,30 +3082,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c13 c14"
                                     disabled={false}
                                     id="t"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c15"
                                     htmlFor="t"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c17 c18"
                                     htmlFor="t"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c19"
                                     >
                                         Enable Firewall
                                     </div>
@@ -3141,11 +3119,9 @@ Array [
         <div
             className="c8"
         >
-            <form
-                className="c10"
-            >
+            <form>
                 <div
-                    className="c11"
+                    className="c10"
                     id="fw-toggle-inactive"
                     name="inactive"
                     role="group"
@@ -3153,11 +3129,11 @@ Array [
                     type="checkbox"
                 >
                     <li
-                        className="c12"
+                        className="c11"
                     >
                         <div
                             checked={false}
-                            className="c13"
+                            className="c12"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
@@ -3165,30 +3141,30 @@ Array [
                         >
                             <input
                                 checked={false}
-                                className="c14 c15"
+                                className="c13 c14"
                                 disabled={false}
                                 id="v"
                                 onBlur={undefined}
                                 type="checkbox"
                             />
                             <label
-                                className="c16"
+                                className="c15"
                                 htmlFor="v"
                             />
                         </div>
                         <div
                             checked={false}
-                            className="c17"
+                            className="c16"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
                         >
                             <label
-                                className="c18 c19"
+                                className="c17 c18"
                                 htmlFor="v"
                             >
                                 <div
-                                    className="c20"
+                                    className="c19"
                                 >
                                     Show inactive rules
                                 </div>
@@ -3200,21 +3176,21 @@ Array [
         </div>
     </div>
     <div
-        className="c21"
+        className="c20"
     >
         <div
-            className="c22 c23"
+            className="c21 c22"
             disabled={false}
             name="card"
         >
             <div
-                className="c24"
+                className="c23"
             >
                 <div
-                    className="c25"
+                    className="c24"
                 >
                     <div
-                        className="c26"
+                        className="c25"
                     >
                         <svg
                             height="109"
@@ -3508,7 +3484,7 @@ Array [
                         </svg>
                     </div>
                     <h3
-                        className="c27 c28"
+                        className="c26 c27"
                     >
                         Sorry, but we weren’t able to find any firewall rules.
                     </h3>
@@ -4094,16 +4070,16 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   margin-right: 1.875rem;
 }
 
-.c26 {
+.c25 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c27 {
+.c26 {
   margin-top: 1.875rem;
 }
 
-.c32 {
+.c31 {
   margin-bottom: 0.75rem;
 }
 
@@ -4111,7 +4087,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   margin-bottom: 1.875rem;
 }
 
-.c30 {
+.c29 {
   padding: 8rem;
 }
 
@@ -4135,7 +4111,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c31 {
+.c30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4183,7 +4159,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   display: block;
 }
 
-.c21 {
+.c20 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -4191,32 +4167,32 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   overflow: visible;
 }
 
-.c21[type='checkbox'],
-.c21[type='radio'] {
+.c20[type='checkbox'],
+.c20[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c21[type='number']::-webkit-inner-spin-button,
-.c21[type='number']::-webkit-outer-spin-button {
+.c20[type='number']::-webkit-inner-spin-button,
+.c20[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c21[type='search'] {
+.c20[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 {
+.c20[type='search']::-webkit-search-cancel-button,
+.c20[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c21::-webkit-file-upload-button {
+.c20::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
@@ -4231,7 +4207,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c25 {
+.c24 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -4282,10 +4258,10 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c34 {
+.c33 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -4298,7 +4274,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c29 {
+.c28 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4320,33 +4296,33 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c20 {
+.c19 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c20:checked + label::after {
+.c19:checked + label::after {
   opacity: 1;
 }
 
-.c20:selected + label::after {
+.c19:selected + label::after {
   opacity: 1;
 }
 
-.c20:checked + label {
+.c19:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c20:selected + label {
+.c19:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c20:disabled + label {
+.c19:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c22 {
+.c21 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -4363,7 +4339,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c22::after {
+.c21::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -4380,7 +4356,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c19 {
+.c18 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -4389,12 +4365,12 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c23 label {
+.c22 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c18 {
+.c17 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4418,25 +4394,25 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c18 label {
+.c17 label {
   font-weight: 400;
 }
 
-.c18 label::after {
+.c17 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 {
+.c17 div[type='checkbox'],
+.c17 div[type='checkbox'] input,
+.c17 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c17 {
+.c16 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -4448,7 +4424,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c24 {
+.c23 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
@@ -4484,19 +4460,15 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c33 {
+.c32 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c28 {
+.c27 {
   width: calc(100% - 0.125rem);
 }
 
-.c16 {
-  margin-bottom: 0 !important;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -4621,11 +4593,10 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
         className="c15"
       >
         <form
-          className="c16"
           onChange={[Function]}
         >
           <div
-            className="c17"
+            className="c16"
             id="fw-toggle-firewall"
             name="enabled"
             role="group"
@@ -4633,11 +4604,11 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
             type="checkbox"
           >
             <li
-              className="c18"
+              className="c17"
             >
               <div
                 checked={false}
-                className="c19"
+                className="c18"
                 disabled={false}
                 id="fw-toggle-firewall"
                 onBlur={undefined}
@@ -4645,30 +4616,30 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
               >
                 <input
                   checked={false}
-                  className="c20 c21"
+                  className="c19 c20"
                   disabled={false}
                   id="x"
                   onBlur={undefined}
                   type="checkbox"
                 />
                 <label
-                  className="c22"
+                  className="c21"
                   htmlFor="x"
                 />
               </div>
               <div
                 checked={false}
-                className="c23"
+                className="c22"
                 disabled={false}
                 id="fw-toggle-firewall"
                 onBlur={undefined}
               >
                 <label
-                  className="c24 c25"
+                  className="c23 c24"
                   htmlFor="x"
                 >
                   <div
-                    className="c26"
+                    className="c25"
                   >
                     Enable Firewall
                   </div>
@@ -4684,21 +4655,21 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
     />
   </div>
   <div
-    className="c27"
+    className="c26"
   >
     <div
-      className="c28 c29"
+      className="c27 c28"
       disabled={false}
       name="card"
     >
       <div
-        className="c30"
+        className="c29"
       >
         <div
-          className="c31"
+          className="c30"
         >
           <div
-            className="c32"
+            className="c31"
           >
             <svg
               height="109"
@@ -4992,7 +4963,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
             </svg>
           </div>
           <h3
-            className="c33 c34"
+            className="c32 c33"
           >
             Sorry, but we weren’t able to find any firewall rules.
           </h3>
@@ -5012,16 +4983,16 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   margin-right: 1.875rem;
 }
 
-.c26 {
+.c25 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c27 {
+.c26 {
   margin-top: 1.875rem;
 }
 
-.c32 {
+.c31 {
   margin-bottom: 0.75rem;
 }
 
@@ -5029,7 +5000,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   margin-bottom: 1.875rem;
 }
 
-.c30 {
+.c29 {
   padding: 8rem;
 }
 
@@ -5053,7 +5024,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c31 {
+.c30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5101,7 +5072,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   display: block;
 }
 
-.c21 {
+.c20 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -5109,32 +5080,32 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   overflow: visible;
 }
 
-.c21[type='checkbox'],
-.c21[type='radio'] {
+.c20[type='checkbox'],
+.c20[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c21[type='number']::-webkit-inner-spin-button,
-.c21[type='number']::-webkit-outer-spin-button {
+.c20[type='number']::-webkit-inner-spin-button,
+.c20[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c21[type='search'] {
+.c20[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 {
+.c20[type='search']::-webkit-search-cancel-button,
+.c20[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c21::-webkit-file-upload-button {
+.c20::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
@@ -5149,7 +5120,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   margin: 0;
 }
 
-.c25 {
+.c24 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -5200,10 +5171,10 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c34 {
+.c33 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -5216,7 +5187,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c29 {
+.c28 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5238,33 +5209,33 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c20 {
+.c19 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c20:checked + label::after {
+.c19:checked + label::after {
   opacity: 1;
 }
 
-.c20:selected + label::after {
+.c19:selected + label::after {
   opacity: 1;
 }
 
-.c20:checked + label {
+.c19:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c20:selected + label {
+.c19:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c20:disabled + label {
+.c19:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c22 {
+.c21 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -5281,7 +5252,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c22::after {
+.c21::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -5298,7 +5269,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c19 {
+.c18 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -5307,12 +5278,12 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c23 label {
+.c22 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c18 {
+.c17 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5336,25 +5307,25 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c18 label {
+.c17 label {
   font-weight: 400;
 }
 
-.c18 label::after {
+.c17 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 {
+.c17 div[type='checkbox'],
+.c17 div[type='checkbox'] input,
+.c17 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c17 {
+.c16 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -5366,7 +5337,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c24 {
+.c23 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
@@ -5402,19 +5373,15 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c33 {
+.c32 {
   color: rgb(151,151,151);
   text-align: center;
 }
 
-.c28 {
+.c27 {
   width: calc(100% - 0.125rem);
 }
 
-.c16 {
-  margin-bottom: 0 !important;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -5539,11 +5506,10 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
         className="c15"
       >
         <form
-          className="c16"
           onChange={[Function]}
         >
           <div
-            className="c17"
+            className="c16"
             id="fw-toggle-firewall"
             name="enabled"
             role="group"
@@ -5551,11 +5517,11 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
             type="checkbox"
           >
             <li
-              className="c18"
+              className="c17"
             >
               <div
                 checked={false}
-                className="c19"
+                className="c18"
                 disabled={false}
                 id="fw-toggle-firewall"
                 onBlur={undefined}
@@ -5563,30 +5529,30 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
               >
                 <input
                   checked={false}
-                  className="c20 c21"
+                  className="c19 c20"
                   disabled={false}
                   id="z"
                   onBlur={undefined}
                   type="checkbox"
                 />
                 <label
-                  className="c22"
+                  className="c21"
                   htmlFor="z"
                 />
               </div>
               <div
                 checked={false}
-                className="c23"
+                className="c22"
                 disabled={false}
                 id="fw-toggle-firewall"
                 onBlur={undefined}
               >
                 <label
-                  className="c24 c25"
+                  className="c23 c24"
                   htmlFor="z"
                 >
                   <div
-                    className="c26"
+                    className="c25"
                   >
                     Enable Firewall
                   </div>
@@ -5602,21 +5568,21 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
     />
   </div>
   <div
-    className="c27"
+    className="c26"
   >
     <div
-      className="c28 c29"
+      className="c27 c28"
       disabled={false}
       name="card"
     >
       <div
-        className="c30"
+        className="c29"
       >
         <div
-          className="c31"
+          className="c30"
         >
           <div
-            className="c32"
+            className="c31"
           >
             <svg
               height="109"
@@ -5910,7 +5876,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
             </svg>
           </div>
           <h3
-            className="c33 c34"
+            className="c32 c33"
           >
             Sorry, but we weren’t able to find any firewall rules.
           </h3>
@@ -5931,7 +5897,7 @@ Array [
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c19 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
@@ -5973,7 +5939,7 @@ Array [
   display: block;
 }
 
-.c15 {
+.c14 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -5981,32 +5947,32 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c14[type='checkbox'],
+.c14[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c14[type='number']::-webkit-inner-spin-button,
+.c14[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c14[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 {
+.c14[type='search']::-webkit-search-cancel-button,
+.c14[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c14::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
@@ -6021,7 +5987,7 @@ Array [
   margin: 0;
 }
 
-.c19 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -6072,33 +6038,33 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c14 {
+.c13 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c13:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c13:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c13:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c13:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c13:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c15 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -6115,7 +6081,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c15::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -6132,7 +6098,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c12 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -6141,12 +6107,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c16 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c11 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6170,25 +6136,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c11 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c11 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 {
+.c11 div[type='checkbox'],
+.c11 div[type='checkbox'] input,
+.c11 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c10 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -6200,17 +6166,13 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c10 {
-  margin-bottom: 0 !important;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -6310,11 +6272,10 @@ Array [
                 className="c9"
             >
                 <form
-                    className="c10"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c10"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -6322,11 +6283,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c11"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c12"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -6334,30 +6295,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c13 c14"
                                     disabled={false}
                                     id="B"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c15"
                                     htmlFor="B"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c17 c18"
                                     htmlFor="B"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c19"
                                     >
                                         Enable Firewall
                                     </div>
@@ -6381,7 +6342,7 @@ Array [
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c19 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
@@ -6423,7 +6384,7 @@ Array [
   display: block;
 }
 
-.c15 {
+.c14 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -6431,32 +6392,32 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c14[type='checkbox'],
+.c14[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c14[type='number']::-webkit-inner-spin-button,
+.c14[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c14[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 {
+.c14[type='search']::-webkit-search-cancel-button,
+.c14[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c14::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
@@ -6471,7 +6432,7 @@ Array [
   margin: 0;
 }
 
-.c19 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -6522,33 +6483,33 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c14 {
+.c13 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c13:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c13:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c13:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c13:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c13:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c15 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -6565,7 +6526,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c15::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -6582,7 +6543,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c12 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -6591,12 +6552,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c16 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c11 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6620,25 +6581,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c11 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c11 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 {
+.c11 div[type='checkbox'],
+.c11 div[type='checkbox'] input,
+.c11 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c10 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -6650,17 +6611,13 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c10 {
-  margin-bottom: 0 !important;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -6760,11 +6717,10 @@ Array [
                 className="c9"
             >
                 <form
-                    className="c10"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c10"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -6772,11 +6728,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c11"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c12"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -6784,30 +6740,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c13 c14"
                                     disabled={false}
                                     id="D"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c15"
                                     htmlFor="D"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c17 c18"
                                     htmlFor="D"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c19"
                                     >
                                         Enable Firewall
                                     </div>
@@ -6831,69 +6787,69 @@ Array [
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c19 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c21 {
+.c20 {
   margin-top: 1.875rem;
 }
 
-.c23 {
+.c22 {
   margin-top: 1.125rem;
 }
 
-.c24 {
+.c23 {
   margin-bottom: 0rem;
 }
 
-.c29 {
+.c28 {
   display: inline-block;
   margin-left: 0.375rem;
   margin-right: 0.375rem;
 }
 
-.c31 {
+.c30 {
   display: inline-block;
   margin-right: 0.375rem;
   margin-left: 1.875rem;
 }
 
-.c32 {
+.c31 {
   margin-left: 0.1875rem;
 }
 
-.c35 {
+.c34 {
   display: inline-block;
   margin-right: 1.5rem;
   margin-left: 0.375rem;
 }
 
-.c36 {
+.c35 {
   display: inline-block;
   margin-left: 1.5rem;
   margin-right: 1.5rem;
 }
 
-.c37 {
+.c36 {
   display: inline-block;
   margin-right: 0.375rem;
   margin-left: 1.5rem;
 }
 
-.c41 {
+.c40 {
   margin-right: 0.1875rem;
 }
 
-.c27 {
+.c26 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
 
-.c38 {
+.c37 {
   padding-top: 0.75rem;
   padding-right: 1.125rem;
   padding-bottom: 0.75rem;
@@ -6920,7 +6876,7 @@ Array [
   align-content: stretch;
 }
 
-.c26 {
+.c25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6943,7 +6899,7 @@ Array [
   flex-direction: column;
 }
 
-.c28 {
+.c27 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6966,7 +6922,7 @@ Array [
   flex-direction: row;
 }
 
-.c40 {
+.c39 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6997,7 +6953,7 @@ Array [
   align-items: center;
 }
 
-.c42 {
+.c41 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7038,7 +6994,7 @@ Array [
   display: block;
 }
 
-.c15 {
+.c14 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -7046,32 +7002,32 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c14[type='checkbox'],
+.c14[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c14[type='number']::-webkit-inner-spin-button,
+.c14[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c14[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 {
+.c14[type='search']::-webkit-search-cancel-button,
+.c14[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c14::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
@@ -7086,7 +7042,7 @@ Array [
   margin: 0;
 }
 
-.c19 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -7130,7 +7086,7 @@ Array [
   display: block;
 }
 
-.c39 {
+.c38 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7140,7 +7096,7 @@ Array [
   display: block;
 }
 
-.c43 {
+.c42 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7157,22 +7113,22 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c22 {
+.c21 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
 
-.c30 {
+.c29 {
   color: rgb(73,73,73);
   font-weight: 700;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
 
-.c25 {
+.c24 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7198,33 +7154,33 @@ Array [
   cursor: default;
 }
 
-.c14 {
+.c13 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c13:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c13:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c13:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c13:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c13:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c15 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -7241,7 +7197,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c15::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -7258,7 +7214,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c12 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -7267,12 +7223,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c16 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c11 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7296,25 +7252,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c11 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c11 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 {
+.c11 div[type='checkbox'],
+.c11 div[type='checkbox'] input,
+.c11 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c10 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -7326,14 +7282,14 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c34 {
+.c33 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -7354,7 +7310,7 @@ Array [
   align-items: center;
 }
 
-.c33 {
+.c32 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -7367,10 +7323,6 @@ Array [
   flex-wrap: wrap;
 }
 
-.c10 {
-  margin-bottom: 0 !important;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -7412,7 +7364,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c39 {
+  .c38 {
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
@@ -7421,7 +7373,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c43 {
+  .c42 {
     -webkit-flex-basis: 16.666666666666668%;
     -ms-flex-preferred-size: 16.666666666666668%;
     flex-basis: 16.666666666666668%;
@@ -7488,11 +7440,10 @@ Array [
                 className="c9"
             >
                 <form
-                    className="c10"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c10"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -7500,11 +7451,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c11"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c12"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -7512,30 +7463,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c13 c14"
                                     disabled={false}
                                     id="F"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c15"
                                     htmlFor="F"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c17 c18"
                                     htmlFor="F"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c19"
                                     >
                                         Enable Firewall
                                     </div>
@@ -7549,11 +7500,9 @@ Array [
         <div
             className="c8"
         >
-            <form
-                className="c10"
-            >
+            <form>
                 <div
-                    className="c11"
+                    className="c10"
                     id="fw-toggle-inactive"
                     name="inactive"
                     role="group"
@@ -7561,11 +7510,11 @@ Array [
                     type="checkbox"
                 >
                     <li
-                        className="c12"
+                        className="c11"
                     >
                         <div
                             checked={false}
-                            className="c13"
+                            className="c12"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
@@ -7573,30 +7522,30 @@ Array [
                         >
                             <input
                                 checked={false}
-                                className="c14 c15"
+                                className="c13 c14"
                                 disabled={false}
                                 id="H"
                                 onBlur={undefined}
                                 type="checkbox"
                             />
                             <label
-                                className="c16"
+                                className="c15"
                                 htmlFor="H"
                             />
                         </div>
                         <div
                             checked={false}
-                            className="c17"
+                            className="c16"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
                         >
                             <label
-                                className="c18 c19"
+                                className="c17 c18"
                                 htmlFor="H"
                             >
                                 <div
-                                    className="c20"
+                                    className="c19"
                                 >
                                     Show inactive rules
                                 </div>
@@ -7608,21 +7557,21 @@ Array [
         </div>
     </div>
     <div
-        className="c21"
+        className="c20"
     >
         <h3
-            className="c22"
+            className="c21"
         >
             Firewall rules from instance tags
         </h3>
         <div
-            className="c23"
+            className="c22"
         >
             <div
-                className="c24"
+                className="c23"
             >
                 <div
-                    className="c25"
+                    className="c24"
                     disabled={true}
                     name="card"
                 >
@@ -7631,19 +7580,19 @@ Array [
                         query="only screen and (max-width: 62.4375rem)"
                     >
                         <div
-                            className="c26"
+                            className="c25"
                         >
                             <div
-                                className="c27"
+                                className="c26"
                             >
                                 <div
-                                    className="c28"
+                                    className="c27"
                                 >
                                     <div
-                                        className="c29"
+                                        className="c28"
                                     >
                                         <strong
-                                            className="c30"
+                                            className="c29"
                                             style={
                                                 Object {
                                                     "color": "#D8D8D8",
@@ -7653,7 +7602,7 @@ Array [
                                             From: 
                                         </strong>
                                         <div
-                                            className="c29"
+                                            className="c28"
                                         >
                                             <p
                                                 className="c6"
@@ -7668,10 +7617,10 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c31"
+                                        className="c30"
                                     >
                                         <strong
-                                            className="c30"
+                                            className="c29"
                                             style={
                                                 Object {
                                                     "color": "#D8D8D8",
@@ -7681,16 +7630,16 @@ Array [
                                             To: 
                                         </strong>
                                         <div
-                                            className="c29"
+                                            className="c28"
                                         >
                                             <div
-                                                className="c32"
+                                                className="c31"
                                             >
                                                 <ul
-                                                    className="c33"
+                                                    className="c32"
                                                 >
                                                     <li
-                                                        className="c34"
+                                                        className="c33"
                                                         fill={null}
                                                         name="wat"
                                                         style={
@@ -7707,7 +7656,7 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c27"
+                                className="c26"
                                 style={
                                     Object {
                                         "border-top": "1px solid #D8D8D8",
@@ -7719,13 +7668,13 @@ Array [
                                     query="only screen and (max-width: 37.4375rem)"
                                 >
                                     <div
-                                        className="c26"
+                                        className="c25"
                                     >
                                         <div
-                                            className="c29"
+                                            className="c28"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c29"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -7735,16 +7684,16 @@ Array [
                                                 Protocol: 
                                             </strong>
                                             <div
-                                                className="c29"
+                                                className="c28"
                                             >
                                                 tcp
                                             </div>
                                         </div>
                                         <div
-                                            className="c29"
+                                            className="c28"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c29"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -7754,16 +7703,16 @@ Array [
                                                 Ports: 
                                             </strong>
                                             <div
-                                                className="c29"
+                                                className="c28"
                                             >
                                                 all
                                             </div>
                                         </div>
                                         <div
-                                            className="c29"
+                                            className="c28"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c29"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -7773,7 +7722,7 @@ Array [
                                                 Action: 
                                             </strong>
                                             <div
-                                                className="c29"
+                                                className="c28"
                                             >
                                                 Allow
                                             </div>
@@ -7785,13 +7734,13 @@ Array [
                                     query="only screen and (min-width: 37.5rem)"
                                 >
                                     <div
-                                        className="c28"
+                                        className="c27"
                                     >
                                         <div
-                                            className="c35"
+                                            className="c34"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c29"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -7801,16 +7750,16 @@ Array [
                                                 Protocol: 
                                             </strong>
                                             <div
-                                                className="c29"
+                                                className="c28"
                                             >
                                                 tcp
                                             </div>
                                         </div>
                                         <div
-                                            className="c36"
+                                            className="c35"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c29"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -7820,16 +7769,16 @@ Array [
                                                 Ports: 
                                             </strong>
                                             <div
-                                                className="c29"
+                                                className="c28"
                                             >
                                                 all
                                             </div>
                                         </div>
                                         <div
-                                            className="c37"
+                                            className="c36"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c29"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -7839,7 +7788,7 @@ Array [
                                                 Action: 
                                             </strong>
                                             <div
-                                                className="c29"
+                                                className="c28"
                                             >
                                                 Allow
                                             </div>
@@ -7854,25 +7803,25 @@ Array [
                         query="only screen and (min-width: 62.5rem)"
                     >
                         <div
-                            className="c38"
+                            className="c37"
                         >
                             <div
                                 className="c3"
                             >
                                 <div
-                                    className="c39"
+                                    className="c38"
                                 >
                                     <div
-                                        className="c40"
+                                        className="c39"
                                     >
                                         <div
-                                            className="c41"
+                                            className="c40"
                                         >
                                             <div
                                                 className="c8"
                                             >
                                                 <strong
-                                                    className="c30"
+                                                    className="c29"
                                                     style={
                                                         Object {
                                                             "color": "#D8D8D8",
@@ -7884,7 +7833,7 @@ Array [
                                             </div>
                                         </div>
                                         <div
-                                            className="c42"
+                                            className="c41"
                                         >
                                             <p
                                                 className="c6"
@@ -7900,19 +7849,19 @@ Array [
                                     </div>
                                 </div>
                                 <div
-                                    className="c39"
+                                    className="c38"
                                 >
                                     <div
-                                        className="c40"
+                                        className="c39"
                                     >
                                         <div
-                                            className="c41"
+                                            className="c40"
                                         >
                                             <div
                                                 className="c8"
                                             >
                                                 <strong
-                                                    className="c30"
+                                                    className="c29"
                                                     style={
                                                         Object {
                                                             "color": "#D8D8D8",
@@ -7924,16 +7873,16 @@ Array [
                                             </div>
                                         </div>
                                         <div
-                                            className="c42"
+                                            className="c41"
                                         >
                                             <div
-                                                className="c32"
+                                                className="c31"
                                             >
                                                 <ul
-                                                    className="c33"
+                                                    className="c32"
                                                 >
                                                     <li
-                                                        className="c34"
+                                                        className="c33"
                                                         fill={null}
                                                         name="wat"
                                                         style={
@@ -7949,19 +7898,19 @@ Array [
                                     </div>
                                 </div>
                                 <div
-                                    className="c43"
+                                    className="c42"
                                 >
                                     <div
-                                        className="c40"
+                                        className="c39"
                                     >
                                         <div
-                                            className="c41"
+                                            className="c40"
                                         >
                                             <div
                                                 className="c8"
                                             >
                                                 <strong
-                                                    className="c30"
+                                                    className="c29"
                                                     style={
                                                         Object {
                                                             "color": "#D8D8D8",
@@ -7973,7 +7922,7 @@ Array [
                                             </div>
                                         </div>
                                         <div
-                                            className="c42"
+                                            className="c41"
                                         >
                                             <p
                                                 className="c6"
@@ -7989,19 +7938,19 @@ Array [
                                     </div>
                                 </div>
                                 <div
-                                    className="c43"
+                                    className="c42"
                                 >
                                     <div
-                                        className="c40"
+                                        className="c39"
                                     >
                                         <div
-                                            className="c41"
+                                            className="c40"
                                         >
                                             <div
                                                 className="c8"
                                             >
                                                 <strong
-                                                    className="c30"
+                                                    className="c29"
                                                     style={
                                                         Object {
                                                             "color": "#D8D8D8",
@@ -8013,7 +7962,7 @@ Array [
                                             </div>
                                         </div>
                                         <div
-                                            className="c42"
+                                            className="c41"
                                         >
                                             <p
                                                 className="c6"
@@ -8029,19 +7978,19 @@ Array [
                                     </div>
                                 </div>
                                 <div
-                                    className="c43"
+                                    className="c42"
                                 >
                                     <div
-                                        className="c40"
+                                        className="c39"
                                     >
                                         <div
-                                            className="c41"
+                                            className="c40"
                                         >
                                             <div
                                                 className="c8"
                                             >
                                                 <strong
-                                                    className="c30"
+                                                    className="c29"
                                                     style={
                                                         Object {
                                                             "color": "#D8D8D8",
@@ -8053,7 +8002,7 @@ Array [
                                             </div>
                                         </div>
                                         <div
-                                            className="c42"
+                                            className="c41"
                                         >
                                             <p
                                                 className="c6"
@@ -8089,7 +8038,7 @@ Array [
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c19 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
@@ -8131,7 +8080,7 @@ Array [
   display: block;
 }
 
-.c15 {
+.c14 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -8139,32 +8088,32 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c14[type='checkbox'],
+.c14[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c14[type='number']::-webkit-inner-spin-button,
+.c14[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c14[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 {
+.c14[type='search']::-webkit-search-cancel-button,
+.c14[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c14::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
@@ -8179,7 +8128,7 @@ Array [
   margin: 0;
 }
 
-.c19 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -8230,33 +8179,33 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c14 {
+.c13 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c13:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c13:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c13:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c13:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c13:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c15 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -8273,7 +8222,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c15::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -8290,7 +8239,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c12 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -8299,12 +8248,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c16 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c11 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -8328,25 +8277,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c11 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c11 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 {
+.c11 div[type='checkbox'],
+.c11 div[type='checkbox'] input,
+.c11 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c10 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -8358,17 +8307,13 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c10 {
-  margin-bottom: 0 !important;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -8468,11 +8413,10 @@ Array [
                 className="c9"
             >
                 <form
-                    className="c10"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c10"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -8480,11 +8424,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c11"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c12"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -8492,30 +8436,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c13 c14"
                                     disabled={false}
                                     id="J"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c15"
                                     htmlFor="J"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c17 c18"
                                     htmlFor="J"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c19"
                                     >
                                         Enable Firewall
                                     </div>
@@ -8539,7 +8483,7 @@ Array [
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c19 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
@@ -8581,7 +8525,7 @@ Array [
   display: block;
 }
 
-.c15 {
+.c14 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -8589,32 +8533,32 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c14[type='checkbox'],
+.c14[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c14[type='number']::-webkit-inner-spin-button,
+.c14[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c14[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 {
+.c14[type='search']::-webkit-search-cancel-button,
+.c14[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c14::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
@@ -8629,7 +8573,7 @@ Array [
   margin: 0;
 }
 
-.c19 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -8680,33 +8624,33 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c14 {
+.c13 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c13:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c13:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c13:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c13:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c13:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c15 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -8723,7 +8667,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c15::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -8740,7 +8684,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c12 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -8749,12 +8693,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c16 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c11 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -8778,25 +8722,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c11 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c11 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 {
+.c11 div[type='checkbox'],
+.c11 div[type='checkbox'] input,
+.c11 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c10 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -8808,17 +8752,13 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c10 {
-  margin-bottom: 0 !important;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -8918,11 +8858,10 @@ Array [
                 className="c9"
             >
                 <form
-                    className="c10"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c10"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -8930,11 +8869,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c11"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c12"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -8942,30 +8881,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c13 c14"
                                     disabled={false}
                                     id="L"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c15"
                                     htmlFor="L"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c17 c18"
                                     htmlFor="L"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c19"
                                     >
                                         Enable Firewall
                                     </div>
@@ -8989,69 +8928,69 @@ Array [
   margin-right: 1.875rem;
 }
 
-.c20 {
+.c19 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c21 {
+.c20 {
   margin-top: 1.875rem;
 }
 
-.c23 {
+.c22 {
   margin-top: 1.125rem;
 }
 
-.c24 {
+.c23 {
   margin-bottom: 0rem;
 }
 
-.c29 {
+.c28 {
   display: inline-block;
   margin-left: 0.375rem;
   margin-right: 0.375rem;
 }
 
-.c31 {
+.c30 {
   display: inline-block;
   margin-right: 0.375rem;
   margin-left: 1.875rem;
 }
 
-.c32 {
+.c31 {
   margin-left: 0.1875rem;
 }
 
-.c35 {
+.c34 {
   display: inline-block;
   margin-right: 1.5rem;
   margin-left: 0.375rem;
 }
 
-.c36 {
+.c35 {
   display: inline-block;
   margin-left: 1.5rem;
   margin-right: 1.5rem;
 }
 
-.c37 {
+.c36 {
   display: inline-block;
   margin-right: 0.375rem;
   margin-left: 1.5rem;
 }
 
-.c41 {
+.c40 {
   margin-right: 0.1875rem;
 }
 
-.c27 {
+.c26 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
 
-.c38 {
+.c37 {
   padding-top: 0.75rem;
   padding-right: 1.125rem;
   padding-bottom: 0.75rem;
@@ -9078,7 +9017,7 @@ Array [
   align-content: stretch;
 }
 
-.c26 {
+.c25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9101,7 +9040,7 @@ Array [
   flex-direction: column;
 }
 
-.c28 {
+.c27 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9124,7 +9063,7 @@ Array [
   flex-direction: row;
 }
 
-.c40 {
+.c39 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9155,7 +9094,7 @@ Array [
   align-items: center;
 }
 
-.c42 {
+.c41 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9196,7 +9135,7 @@ Array [
   display: block;
 }
 
-.c15 {
+.c14 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -9204,32 +9143,32 @@ Array [
   overflow: visible;
 }
 
-.c15[type='checkbox'],
-.c15[type='radio'] {
+.c14[type='checkbox'],
+.c14[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c15[type='number']::-webkit-inner-spin-button,
-.c15[type='number']::-webkit-outer-spin-button {
+.c14[type='number']::-webkit-inner-spin-button,
+.c14[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c15[type='search'] {
+.c14[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 {
+.c14[type='search']::-webkit-search-cancel-button,
+.c14[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c15::-webkit-file-upload-button {
+.c14::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
@@ -9244,7 +9183,7 @@ Array [
   margin: 0;
 }
 
-.c19 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -9288,7 +9227,7 @@ Array [
   display: block;
 }
 
-.c39 {
+.c38 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -9298,7 +9237,7 @@ Array [
   display: block;
 }
 
-.c43 {
+.c42 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -9315,22 +9254,22 @@ Array [
   padding-bottom: 1.125rem;
 }
 
-.c22 {
+.c21 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
 
-.c30 {
+.c29 {
   color: rgb(73,73,73);
   font-weight: 700;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
 
-.c25 {
+.c24 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -9356,33 +9295,33 @@ Array [
   cursor: default;
 }
 
-.c14 {
+.c13 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c14:checked + label::after {
+.c13:checked + label::after {
   opacity: 1;
 }
 
-.c14:selected + label::after {
+.c13:selected + label::after {
   opacity: 1;
 }
 
-.c14:checked + label {
+.c13:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:selected + label {
+.c13:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c14:disabled + label {
+.c13:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c16 {
+.c15 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -9399,7 +9338,7 @@ Array [
   height: 1.125rem;
 }
 
-.c16::after {
+.c15::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -9416,7 +9355,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c13 {
+.c12 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -9425,12 +9364,12 @@ Array [
   cursor: pointer;
 }
 
-.c17 label {
+.c16 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c12 {
+.c11 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -9454,25 +9393,25 @@ Array [
   height: 1.5rem;
 }
 
-.c12 label {
+.c11 label {
   font-weight: 400;
 }
 
-.c12 label::after {
+.c11 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 {
+.c11 div[type='checkbox'],
+.c11 div[type='checkbox'] input,
+.c11 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c11 {
+.c10 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -9484,14 +9423,14 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c18 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c34 {
+.c33 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -9512,7 +9451,7 @@ Array [
   align-items: center;
 }
 
-.c33 {
+.c32 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -9525,10 +9464,6 @@ Array [
   flex-wrap: wrap;
 }
 
-.c10 {
-  margin-bottom: 0 !important;
-}
-
 .c5 {
   font-weight: 200;
 }
@@ -9570,7 +9505,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c39 {
+  .c38 {
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
@@ -9579,7 +9514,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c43 {
+  .c42 {
     -webkit-flex-basis: 16.666666666666668%;
     -ms-flex-preferred-size: 16.666666666666668%;
     flex-basis: 16.666666666666668%;
@@ -9646,11 +9581,10 @@ Array [
                 className="c9"
             >
                 <form
-                    className="c10"
                     onChange={[Function]}
                 >
                     <div
-                        className="c11"
+                        className="c10"
                         id="fw-toggle-firewall"
                         name="enabled"
                         role="group"
@@ -9658,11 +9592,11 @@ Array [
                         type="checkbox"
                     >
                         <li
-                            className="c12"
+                            className="c11"
                         >
                             <div
                                 checked={false}
-                                className="c13"
+                                className="c12"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
@@ -9670,30 +9604,30 @@ Array [
                             >
                                 <input
                                     checked={false}
-                                    className="c14 c15"
+                                    className="c13 c14"
                                     disabled={false}
                                     id="N"
                                     onBlur={undefined}
                                     type="checkbox"
                                 />
                                 <label
-                                    className="c16"
+                                    className="c15"
                                     htmlFor="N"
                                 />
                             </div>
                             <div
                                 checked={false}
-                                className="c17"
+                                className="c16"
                                 disabled={false}
                                 id="fw-toggle-firewall"
                                 onBlur={undefined}
                             >
                                 <label
-                                    className="c18 c19"
+                                    className="c17 c18"
                                     htmlFor="N"
                                 >
                                     <div
-                                        className="c20"
+                                        className="c19"
                                     >
                                         Enable Firewall
                                     </div>
@@ -9707,11 +9641,9 @@ Array [
         <div
             className="c8"
         >
-            <form
-                className="c10"
-            >
+            <form>
                 <div
-                    className="c11"
+                    className="c10"
                     id="fw-toggle-inactive"
                     name="inactive"
                     role="group"
@@ -9719,11 +9651,11 @@ Array [
                     type="checkbox"
                 >
                     <li
-                        className="c12"
+                        className="c11"
                     >
                         <div
                             checked={false}
-                            className="c13"
+                            className="c12"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
@@ -9731,30 +9663,30 @@ Array [
                         >
                             <input
                                 checked={false}
-                                className="c14 c15"
+                                className="c13 c14"
                                 disabled={false}
                                 id="P"
                                 onBlur={undefined}
                                 type="checkbox"
                             />
                             <label
-                                className="c16"
+                                className="c15"
                                 htmlFor="P"
                             />
                         </div>
                         <div
                             checked={false}
-                            className="c17"
+                            className="c16"
                             disabled={false}
                             id="fw-toggle-inactive"
                             onBlur={undefined}
                         >
                             <label
-                                className="c18 c19"
+                                className="c17 c18"
                                 htmlFor="P"
                             >
                                 <div
-                                    className="c20"
+                                    className="c19"
                                 >
                                     Show inactive rules
                                 </div>
@@ -9766,21 +9698,21 @@ Array [
         </div>
     </div>
     <div
-        className="c21"
+        className="c20"
     >
         <h3
-            className="c22"
+            className="c21"
         >
             Default firewall rules
         </h3>
         <div
-            className="c23"
+            className="c22"
         >
             <div
-                className="c24"
+                className="c23"
             >
                 <div
-                    className="c25"
+                    className="c24"
                     disabled={true}
                     name="card"
                 >
@@ -9789,19 +9721,19 @@ Array [
                         query="only screen and (max-width: 62.4375rem)"
                     >
                         <div
-                            className="c26"
+                            className="c25"
                         >
                             <div
-                                className="c27"
+                                className="c26"
                             >
                                 <div
-                                    className="c28"
+                                    className="c27"
                                 >
                                     <div
-                                        className="c29"
+                                        className="c28"
                                     >
                                         <strong
-                                            className="c30"
+                                            className="c29"
                                             style={
                                                 Object {
                                                     "color": "#D8D8D8",
@@ -9811,7 +9743,7 @@ Array [
                                             From: 
                                         </strong>
                                         <div
-                                            className="c29"
+                                            className="c28"
                                         >
                                             <p
                                                 className="c6"
@@ -9826,10 +9758,10 @@ Array [
                                         </div>
                                     </div>
                                     <div
-                                        className="c31"
+                                        className="c30"
                                     >
                                         <strong
-                                            className="c30"
+                                            className="c29"
                                             style={
                                                 Object {
                                                     "color": "#D8D8D8",
@@ -9839,16 +9771,16 @@ Array [
                                             To: 
                                         </strong>
                                         <div
-                                            className="c29"
+                                            className="c28"
                                         >
                                             <div
-                                                className="c32"
+                                                className="c31"
                                             >
                                                 <ul
-                                                    className="c33"
+                                                    className="c32"
                                                 >
                                                     <li
-                                                        className="c34"
+                                                        className="c33"
                                                         fill={null}
                                                         name="wat"
                                                         style={
@@ -9865,7 +9797,7 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c27"
+                                className="c26"
                                 style={
                                     Object {
                                         "border-top": "1px solid #D8D8D8",
@@ -9877,13 +9809,13 @@ Array [
                                     query="only screen and (max-width: 37.4375rem)"
                                 >
                                     <div
-                                        className="c26"
+                                        className="c25"
                                     >
                                         <div
-                                            className="c29"
+                                            className="c28"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c29"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -9893,16 +9825,16 @@ Array [
                                                 Protocol: 
                                             </strong>
                                             <div
-                                                className="c29"
+                                                className="c28"
                                             >
                                                 tcp
                                             </div>
                                         </div>
                                         <div
-                                            className="c29"
+                                            className="c28"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c29"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -9912,16 +9844,16 @@ Array [
                                                 Ports: 
                                             </strong>
                                             <div
-                                                className="c29"
+                                                className="c28"
                                             >
                                                 all
                                             </div>
                                         </div>
                                         <div
-                                            className="c29"
+                                            className="c28"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c29"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -9931,7 +9863,7 @@ Array [
                                                 Action: 
                                             </strong>
                                             <div
-                                                className="c29"
+                                                className="c28"
                                             >
                                                 Allow
                                             </div>
@@ -9943,13 +9875,13 @@ Array [
                                     query="only screen and (min-width: 37.5rem)"
                                 >
                                     <div
-                                        className="c28"
+                                        className="c27"
                                     >
                                         <div
-                                            className="c35"
+                                            className="c34"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c29"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -9959,16 +9891,16 @@ Array [
                                                 Protocol: 
                                             </strong>
                                             <div
-                                                className="c29"
+                                                className="c28"
                                             >
                                                 tcp
                                             </div>
                                         </div>
                                         <div
-                                            className="c36"
+                                            className="c35"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c29"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -9978,16 +9910,16 @@ Array [
                                                 Ports: 
                                             </strong>
                                             <div
-                                                className="c29"
+                                                className="c28"
                                             >
                                                 all
                                             </div>
                                         </div>
                                         <div
-                                            className="c37"
+                                            className="c36"
                                         >
                                             <strong
-                                                className="c30"
+                                                className="c29"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
@@ -9997,7 +9929,7 @@ Array [
                                                 Action: 
                                             </strong>
                                             <div
-                                                className="c29"
+                                                className="c28"
                                             >
                                                 Allow
                                             </div>
@@ -10012,25 +9944,25 @@ Array [
                         query="only screen and (min-width: 62.5rem)"
                     >
                         <div
-                            className="c38"
+                            className="c37"
                         >
                             <div
                                 className="c3"
                             >
                                 <div
-                                    className="c39"
+                                    className="c38"
                                 >
                                     <div
-                                        className="c40"
+                                        className="c39"
                                     >
                                         <div
-                                            className="c41"
+                                            className="c40"
                                         >
                                             <div
                                                 className="c8"
                                             >
                                                 <strong
-                                                    className="c30"
+                                                    className="c29"
                                                     style={
                                                         Object {
                                                             "color": "#D8D8D8",
@@ -10042,7 +9974,7 @@ Array [
                                             </div>
                                         </div>
                                         <div
-                                            className="c42"
+                                            className="c41"
                                         >
                                             <p
                                                 className="c6"
@@ -10058,19 +9990,19 @@ Array [
                                     </div>
                                 </div>
                                 <div
-                                    className="c39"
+                                    className="c38"
                                 >
                                     <div
-                                        className="c40"
+                                        className="c39"
                                     >
                                         <div
-                                            className="c41"
+                                            className="c40"
                                         >
                                             <div
                                                 className="c8"
                                             >
                                                 <strong
-                                                    className="c30"
+                                                    className="c29"
                                                     style={
                                                         Object {
                                                             "color": "#D8D8D8",
@@ -10082,16 +10014,16 @@ Array [
                                             </div>
                                         </div>
                                         <div
-                                            className="c42"
+                                            className="c41"
                                         >
                                             <div
-                                                className="c32"
+                                                className="c31"
                                             >
                                                 <ul
-                                                    className="c33"
+                                                    className="c32"
                                                 >
                                                     <li
-                                                        className="c34"
+                                                        className="c33"
                                                         fill={null}
                                                         name="wat"
                                                         style={
@@ -10107,19 +10039,19 @@ Array [
                                     </div>
                                 </div>
                                 <div
-                                    className="c43"
+                                    className="c42"
                                 >
                                     <div
-                                        className="c40"
+                                        className="c39"
                                     >
                                         <div
-                                            className="c41"
+                                            className="c40"
                                         >
                                             <div
                                                 className="c8"
                                             >
                                                 <strong
-                                                    className="c30"
+                                                    className="c29"
                                                     style={
                                                         Object {
                                                             "color": "#D8D8D8",
@@ -10131,7 +10063,7 @@ Array [
                                             </div>
                                         </div>
                                         <div
-                                            className="c42"
+                                            className="c41"
                                         >
                                             <p
                                                 className="c6"
@@ -10147,19 +10079,19 @@ Array [
                                     </div>
                                 </div>
                                 <div
-                                    className="c43"
+                                    className="c42"
                                 >
                                     <div
-                                        className="c40"
+                                        className="c39"
                                     >
                                         <div
-                                            className="c41"
+                                            className="c40"
                                         >
                                             <div
                                                 className="c8"
                                             >
                                                 <strong
-                                                    className="c30"
+                                                    className="c29"
                                                     style={
                                                         Object {
                                                             "color": "#D8D8D8",
@@ -10171,7 +10103,7 @@ Array [
                                             </div>
                                         </div>
                                         <div
-                                            className="c42"
+                                            className="c41"
                                         >
                                             <p
                                                 className="c6"
@@ -10187,19 +10119,19 @@ Array [
                                     </div>
                                 </div>
                                 <div
-                                    className="c43"
+                                    className="c42"
                                 >
                                     <div
-                                        className="c40"
+                                        className="c39"
                                     >
                                         <div
-                                            className="c41"
+                                            className="c40"
                                         >
                                             <div
                                                 className="c8"
                                             >
                                                 <strong
-                                                    className="c30"
+                                                    className="c29"
                                                     style={
                                                         Object {
                                                             "color": "#D8D8D8",
@@ -10211,7 +10143,7 @@ Array [
                                             </div>
                                         </div>
                                         <div
-                                            className="c42"
+                                            className="c41"
                                         >
                                             <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 a6926a54..830fce04 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
@@ -172,7 +172,7 @@ exports[`renders <List /> without throwing 1`] = `
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -1153,7 +1153,7 @@ exports[`renders <List error /> without throwing 1`] = `
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -2090,11 +2090,9 @@ exports[`renders <List instances /> without throwing 1`] = `
 .c33 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c33:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c13 {
@@ -2230,7 +2228,7 @@ exports[`renders <List instances /> without throwing 1`] = `
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -3669,11 +3667,9 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 .c33 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c33:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c58 {
@@ -4384,7 +4380,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -4425,12 +4421,10 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  background-color: rgb(250,250,250);
   border-top: 0.0625rem solid rgb(216,216,216);
-  max-height: 3.3125rem;
-  min-height: 3.3125rem;
   line-height: 1.5625rem;
   height: 4.375rem;
-  max-height: 4.375rem;
   z-index: 1;
   position: fixed;
   left: 0;
@@ -5843,10 +5837,11 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   </form>
   <div
     className="c51"
-    fill="#FAFAFA"
+    fill="disabled"
   >
     <div
       className="c52 c53 c1"
+      fill="disabled"
     >
       <div
         className="c54"
@@ -6294,11 +6289,9 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 .c33 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c33:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c58 {
@@ -7009,7 +7002,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -7050,12 +7043,10 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  background-color: rgb(250,250,250);
   border-top: 0.0625rem solid rgb(216,216,216);
-  max-height: 3.3125rem;
-  min-height: 3.3125rem;
   line-height: 1.5625rem;
   height: 4.375rem;
-  max-height: 4.375rem;
   z-index: 1;
   position: fixed;
   left: 0;
@@ -8468,10 +8459,11 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   </form>
   <div
     className="c51"
-    fill="#FAFAFA"
+    fill="disabled"
   >
     <div
       className="c52 c53 c1"
+      fill="disabled"
     >
       <div
         className="c54"
@@ -8919,11 +8911,9 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 .c33 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c33:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c58 {
@@ -9829,7 +9819,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -9870,12 +9860,10 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  background-color: rgb(250,250,250);
   border-top: 0.0625rem solid rgb(216,216,216);
-  max-height: 3.3125rem;
-  min-height: 3.3125rem;
   line-height: 1.5625rem;
   height: 4.375rem;
-  max-height: 4.375rem;
   z-index: 1;
   position: fixed;
   left: 0;
@@ -11288,10 +11276,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   </form>
   <div
     className="c51"
-    fill="#FAFAFA"
+    fill="disabled"
   >
     <div
       className="c52 c53 c1"
+      fill="disabled"
     >
       <div
         className="c54"
@@ -11831,7 +11820,7 @@ exports[`renders <List loading /> without throwing 1`] = `
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
index f0f0a4f0..fddcf701 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -169,7 +169,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
 .c19 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -977,7 +977,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 .c19 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -1309,8 +1309,8 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 .c39 {
   box-sizing: border-box;
   width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
+  height: 12rem;
+  min-height: 12rem;
   padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -1324,6 +1324,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -1986,7 +1987,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
 .c25 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -3578,7 +3579,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 .c19 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -3904,8 +3905,8 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 .c39 {
   box-sizing: border-box;
   width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
+  height: 12rem;
+  min-height: 12rem;
   padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -3919,6 +3920,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
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 39dcdf46..51186804 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
@@ -65,7 +65,7 @@ exports[`renders <Networks /> without throwing 1`] = `
 .c7 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -608,7 +608,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
 .c7 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -888,7 +888,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
 .c7 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -1121,7 +1121,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
 .c7 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
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 4e4d8db3..457c3702 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
@@ -985,15 +985,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c37 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c37:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c31 {
   min-width: 7.5rem;
 }
@@ -1597,7 +1595,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c11 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -1701,6 +1699,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -2973,15 +2972,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c37 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c37:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c31 {
   min-width: 7.5rem;
 }
@@ -3585,7 +3582,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c11 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -3689,6 +3686,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
index 0c6f74d2..099a7bf9 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -169,7 +169,7 @@ exports[`renders <Tags /> without throwing 1`] = `
 .c19 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -998,7 +998,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 .c47 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -1995,7 +1995,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
 .c19 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -2846,7 +2846,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 .c49 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -4354,7 +4354,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 .c52 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -5407,7 +5407,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
 .c19 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -6368,7 +6368,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
 .c19 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
diff --git a/packages/instance-steps/package.json b/packages/instance-steps/package.json
index 65550078..e1a4c063 100644
--- a/packages/instance-steps/package.json
+++ b/packages/instance-steps/package.json
@@ -26,6 +26,7 @@
     "apr-reduce": "^3.0.3",
     "constant-case": "^2.0.0",
     "declarative-redux-form": "^2.0.8",
+    "force-array": "^3.1.0",
     "joyent-ui-resource-step": "^1.0.0",
     "joyent-ui-resource-widgets": "^1.0.0",
     "joyent-ui-toolkit": "^6.0.0",
diff --git a/packages/instance-steps/src/footer/cli-details.js b/packages/instance-steps/src/footer/cli-details.js
new file mode 100644
index 00000000..8d086951
--- /dev/null
+++ b/packages/instance-steps/src/footer/cli-details.js
@@ -0,0 +1,131 @@
+const ForceArray = require('force-array');
+
+export const generateTerraform = data => {
+  const {
+    name,
+    package: pkg,
+    image,
+    affinity,
+    metadata: _metadata,
+    tags: _tags,
+    firewall_enabled,
+    networks
+  } = formatData(data);
+
+  const cns = ForceArray(
+    (_tags.filter(({ name }) => name === 'triton.cns.services').pop() || {})
+      .value
+  );
+  const userScript = (
+    _metadata.filter(({ name }) => name === 'user-script').pop() || {}
+  ).value;
+
+  const tags = _tags.filter(({ name }) => !/^triton./.test(name));
+  const metadata = _metadata.filter(({ name }) => name !== 'user-script');
+
+  return (
+    `resource "triton_machine" ${name} {
+  name     = "${name}"
+  package  = "${pkg}"
+  image    = "${image}"
+  networks = ["${networks.join('","')}"]
+  firewall_enabled = ${Boolean(firewall_enabled)}` +
+    `${
+      affinity
+        ? `
+  affinity = ["${affinity}"]`
+        : ''
+    }` +
+    `${
+      userScript && userScript.length
+        ? `\n
+  user_script = "${userScript}"`
+        : ''
+    }` +
+    `${
+      cns.length
+        ? `\n
+  cns {
+    services = ["${cns.join('", "')}"]
+  }`
+        : ''
+    }` +
+    `${
+      tags.length
+        ? `\n
+  tags {
+    ${tags.map(e => `${e.name} = "${e.value}"`).join('\n    ')}
+  }`
+        : ''
+    }` +
+    `${
+      metadata.length
+        ? `\n
+  metadata {
+    ${metadata.map(e => `${e.name} = "${e.value}"`).join('\n    ')}
+  }`
+        : ''
+    }` +
+    `\n}`
+  );
+};
+
+export const generateCLI = data => {
+  const {
+    metadata,
+    tags,
+    firewall_enabled,
+    networks,
+    name,
+    package: pkg,
+    image
+  } = data;
+
+  const { affinity } = formatData(data);
+
+  const _networks = `--network="${networks.join('","')}"`;
+  const _affinity = affinity ? `--affinity="${affinity}"` : '';
+
+  const _tags = tags.length
+    ? `--tag=${JSON.stringify(
+        tags.reduce((acc, t) => Object.assign(acc, { [t.name]: t.value }))
+      )}`
+    : '';
+
+  const _metadata = metadata.length
+    ? `--metadata=${JSON.stringify(
+        metadata.reduce(
+          (acc, m) => Object.assign(acc, { [m.name]: m.value }),
+          {}
+        )
+      )}`
+    : '';
+
+  const _firewall = firewall_enabled ? `--firewall` : '';
+  return `triton instance create -w --name=${name} ${_networks} ${_affinity} ${_tags} ${_metadata} ${_firewall} ${image} ${pkg}`;
+};
+
+const formatData = ({ affinity, metadata = [], tags = [], ...rest }) => ({
+  affinity:
+    affinity &&
+    affinity.length &&
+    `${affinity[0].key}${getAffinityOp(affinity[0].type)}${affinity[0].value}`,
+  tags: tags.filter(
+    e => e.name !== 'triton.cns.services' || e.name !== 'triton.cns.disable'
+  ),
+  metadata: metadata.filter(e => e.name !== 'user-script'),
+  ...rest
+});
+
+const getAffinityOp = type => {
+  switch (type.toUpperCase()) {
+    case 'MUST_EQUAL':
+      return '==';
+    case 'MUST_NOT_EQUAL':
+      return '!=';
+    case 'SHOULD_EQUAL':
+      return '==~';
+    case 'SHOULD_NOT_EQUAL':
+      return '!=~';
+  }
+};
diff --git a/packages/instance-steps/src/footer/index.js b/packages/instance-steps/src/footer/index.js
new file mode 100644
index 00000000..f5a623f3
--- /dev/null
+++ b/packages/instance-steps/src/footer/index.js
@@ -0,0 +1,141 @@
+import React from 'react';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
+import { Margin, Padding } from 'styled-components-spacing';
+import Flex from 'styled-flex-component';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+import {
+  Anchor,
+  CloseIcon as Close,
+  H3,
+  Textarea,
+  Input,
+  P,
+  SectionList,
+  SectionListAnchor,
+  SectionListItem,
+  StickyFooter,
+  ViewContainer
+} from 'joyent-ui-toolkit';
+
+import { generateTerraform, generateCLI } from './cli-details';
+
+export default class CLIFooter extends React.Component {
+  state = {
+    active: 'triton'
+  };
+
+  render() {
+    const { active } = this.state;
+    const { getData, onCloseCli } = this.props;
+
+    return (
+      <StickyFooter borderless auto fixed bottom fill="#494949">
+        <div>
+          <Padding vertical="8">
+            <CloseIcon onClick={onCloseCli} />
+            <Row>
+              <Col xs="12" sm="8">
+                <Margin bottom="2">
+                  <Flex>
+                    <H3 white>CLI details</H3>
+                  </Flex>
+                </Margin>
+                <Margin bottom="5">
+                  <P white>
+                    Below you can find the command line instructions to deploy
+                    this exact instance, or a copy of it, directly from either
+                    the Triton CLI or Terraform.
+                  </P>
+                </Margin>
+              </Col>
+            </Row>
+            <Row>
+              <Col sm="12">
+                <ViewContainer plain>
+                  <Margin bottom="3">
+                    <SectionList clear>
+                      <SectionListItem>
+                        <SectionListAnchor
+                          white
+                          active={active === 'triton'}
+                          onClick={() => this.setState({ active: 'triton' })}
+                        >
+                          Triton CLI
+                        </SectionListAnchor>
+                      </SectionListItem>
+                      <SectionListItem>
+                        <SectionListAnchor
+                          white
+                          active={active === 'terraform'}
+                          onClick={() => this.setState({ active: 'terraform' })}
+                        >
+                          Terraform
+                        </SectionListAnchor>
+                      </SectionListItem>
+                    </SectionList>
+                  </Margin>
+                </ViewContainer>
+                <Margin bottom="3">
+                  {active === 'triton' ? (
+                    <Input
+                      readOnly
+                      borderless
+                      monospace
+                      fluid
+                      white
+                      dark
+                      resize
+                      rows="15"
+                      value={generateCLI(getData())}
+                    />
+                  ) : (
+                    <Textarea
+                      readOnly
+                      borderless
+                      monospace
+                      fluid
+                      white
+                      dark
+                      resize
+                      value={generateTerraform(getData())}
+                    />
+                  )}
+                </Margin>
+                <Margin>
+                  <Anchor white>{`Learn how to configure ${
+                    active === 'triton' ? 'Triton CLI' : 'Terraform'
+                  }`}</Anchor>
+                </Margin>
+              </Col>
+            </Row>
+          </Padding>
+        </div>
+      </StickyFooter>
+    );
+  }
+}
+
+const Frame = styled.div`
+  border-radius: 50%;
+  border: ${remcalc(1)} solid ${props => props.theme.white};
+  height: ${remcalc(30)};
+  width: ${remcalc(30)};
+  background: none;
+  cursor: pointer;
+  z-index: 1;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  float: right;
+`;
+
+const CloseIcon = props => (
+  <Frame {...props}>
+    <Margin all="1">
+      <Close fill="white" />
+    </Margin>
+  </Frame>
+);
diff --git a/packages/instance-steps/src/index.js b/packages/instance-steps/src/index.js
index 25262a5a..0004ac52 100644
--- a/packages/instance-steps/src/index.js
+++ b/packages/instance-steps/src/index.js
@@ -66,7 +66,7 @@ export const generatePayload = steps => {
   });
 
   if (cns.serviceNames.length) {
-    metadata.push({
+    tags.push({
       name: 'triton.cns.services',
       value: cns.serviceNames.join(',')
     });
@@ -94,3 +94,4 @@ export { default as UserScript } from './user-script';
 export { default as Firewall, Preview as FirewallPreview } from './firewall';
 export { default as CNS, Preview as CnsPreview } from './cns';
 export { default as Affinity } from './affinity';
+export { default as Footer } from './footer';
diff --git a/packages/instance-steps/src/name/index.js b/packages/instance-steps/src/name/index.js
index 997bf507..815f4642 100644
--- a/packages/instance-steps/src/name/index.js
+++ b/packages/instance-steps/src/name/index.js
@@ -45,10 +45,6 @@ const RandomizeIcon = styled(BaseRandomizeIcon)`
   width: ${remcalc(16)};
 `;
 
-const Form = styled.form`
-  margin-bottom: 0;
-`;
-
 const NameContainer = ({
   history,
   randomizable = false,
@@ -86,7 +82,7 @@ const NameContainer = ({
             keepDirtyOnReinitialize
           >
             {({ invalid }) => (
-              <Form onSubmit={() => history.push(next)}>
+              <form onSubmit={() => history.push(next)}>
                 <FormGroup id="input-name" name="name" fluid field={Field}>
                   <FormLabel>Instance name</FormLabel>
                   <Margin top="0.5">
@@ -159,7 +155,7 @@ const NameContainer = ({
                     Next
                   </Button>
                 </Margin>
-              </Form>
+              </form>
             )}
           </ReduxForm>
         </Margin>
diff --git a/packages/instance-steps/src/networks/index.js b/packages/instance-steps/src/networks/index.js
index 312dac3d..25634f37 100644
--- a/packages/instance-steps/src/networks/index.js
+++ b/packages/instance-steps/src/networks/index.js
@@ -9,8 +9,7 @@ import get from 'lodash.get';
 import forceArray from 'force-array';
 import includes from 'lodash.includes';
 import find from 'lodash.find';
-import styled, { withTheme } from 'styled-components';
-import remcalc from 'remcalc';
+import { withTheme } from 'styled-components';
 
 import Step, {
   Header as StepHeader,
diff --git a/packages/instance-steps/src/tags/index.js b/packages/instance-steps/src/tags/index.js
index 60292eb9..89586dff 100644
--- a/packages/instance-steps/src/tags/index.js
+++ b/packages/instance-steps/src/tags/index.js
@@ -223,4 +223,4 @@ export default compose(
       ]);
     }
   }))
-)(withTheme(({ ...rest }) => <Metadata {...rest} />));
+)(withTheme(({ ...rest }) => <TagsContainer {...rest} />));
diff --git a/packages/resource-step/src/status-icon.js b/packages/resource-step/src/status-icon.js
index 2b8672c2..24c62e90 100644
--- a/packages/resource-step/src/status-icon.js
+++ b/packages/resource-step/src/status-icon.js
@@ -58,13 +58,13 @@ export const Saved = ({ inverted, children }) => {
 };
 
 export const Error = ({ inverted = false, noLabel = false, children }) => {
-  const fill = inverted ? 'red' : 'white';
+  const statusFill = inverted ? 'red' : 'white';
   const iconFill = inverted ? 'white' : 'redDark';
 
   return (
     <StatusIcon
-      border="redDark"
-      fill={fill}
+      border={'redDark'}
+      fill={statusFill}
       Icon={() => <CloseIcon fill={iconFill} />}
     >
       {noLabel ? null : (
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 e3feff0b..1aeb74e6 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap
@@ -5,15 +5,15 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c8 {
+.c7 {
   margin-top: 0.1875rem;
 }
 
-.c10 {
+.c9 {
   margin-left: 0.75rem;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -40,7 +40,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -60,7 +60,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -77,7 +77,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   display: block;
 }
 
-.c14 {
+.c13 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -89,30 +89,30 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   appearance: button;
 }
 
-.c14::-moz-focus-inner,
-.c14[type='button']::-moz-focus-inner,
-.c14[type='reset']::-moz-focus-inner,
-.c14[type='submit']::-moz-focus-inner {
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c14:-moz-focusring,
-.c14[type='button']:-moz-focusring,
-.c14[type='reset']:-moz-focusring,
-.c14[type='submit']:-moz-focusring {
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c13 {
+.c12 {
   min-width: 7.5rem;
 }
 
-.c12 {
+.c11 {
   display: inline-block;
 }
 
-.c11 {
+.c10 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -151,7 +151,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c11:focus {
+.c10:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -159,26 +159,26 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c11:hover {
+.c10:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c11:active,
-.c11:active:hover,
-.c11:active:focus {
+.c10:active,
+.c10:active:hover,
+.c10:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c11[disabled] {
+.c10[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 {
+.c6 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -188,7 +188,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   text-align: left;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -200,7 +200,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c9 {
+.c8 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -222,89 +222,84 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9:focus {
+.c8:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c9::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9::-moz-placeholder {
+.c8::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:invalid {
+.c8:invalid {
   box-shadow: none;
 }
 
-.c9:disabled {
+.c8:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c9:disabled::-webkit-input-placeholder {
+.c8:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:disabled::-moz-placeholder {
+.c8:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:disabled:-ms-input-placeholder {
+.c8:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c6 {
+.c5 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c1 {
-  margin-bottom: 0;
-}
-
 <div
   className="c0"
 >
   <form
-    className="c1"
     onSubmit={undefined}
   >
     <div
-      className="c2"
+      className="c1"
       wrap={true}
     >
       <div
-        className="c3"
+        className="c2"
       >
         <div
-          className="c4"
+          className="c3"
         >
           <div
-            className="c5"
+            className="c4"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c6 c7"
+              className="c5 c6"
               htmlFor="k"
             >
               Attach to new CNS service name
             </label>
             <div
-              className="c8"
+              className="c7"
             >
               <input
-                className="c9"
+                className="c8"
                 disabled={false}
                 id="k"
                 onBlur={null}
@@ -315,13 +310,13 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c3"
+        className="c2"
       >
         <div
-          className="c10"
+          className="c9"
         >
           <button
-            className="c11 c12 c13 c14"
+            className="c10 c11 c12 c13"
             data-ui-button="true"
             disabled={undefined}
             href=""
@@ -341,15 +336,15 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c8 {
+.c7 {
   margin-top: 0.1875rem;
 }
 
-.c10 {
+.c9 {
   margin-left: 0.75rem;
 }
 
-.c2 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -376,7 +371,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -396,7 +391,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c3 {
+.c2 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -413,7 +408,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   display: block;
 }
 
-.c14 {
+.c13 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -425,30 +420,30 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   appearance: button;
 }
 
-.c14::-moz-focus-inner,
-.c14[type='button']::-moz-focus-inner,
-.c14[type='reset']::-moz-focus-inner,
-.c14[type='submit']::-moz-focus-inner {
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c14:-moz-focusring,
-.c14[type='button']:-moz-focusring,
-.c14[type='reset']:-moz-focusring,
-.c14[type='submit']:-moz-focusring {
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c13 {
+.c12 {
   min-width: 7.5rem;
 }
 
-.c12 {
+.c11 {
   display: inline-block;
 }
 
-.c11 {
+.c10 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -487,7 +482,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c11:focus {
+.c10:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -495,26 +490,26 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c11:hover {
+.c10:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c11:active,
-.c11:active:hover,
-.c11:active:focus {
+.c10:active,
+.c10:active:hover,
+.c10:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c11[disabled] {
+.c10[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 {
+.c6 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -524,7 +519,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   text-align: left;
 }
 
-.c5 {
+.c4 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -536,7 +531,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c9 {
+.c8 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -558,89 +553,84 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c9:focus {
+.c8:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c9::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9::-moz-placeholder {
+.c8::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:invalid {
+.c8:invalid {
   box-shadow: none;
 }
 
-.c9:disabled {
+.c8:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c9:disabled::-webkit-input-placeholder {
+.c8:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:disabled::-moz-placeholder {
+.c8:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c9:disabled:-ms-input-placeholder {
+.c8:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c6 {
+.c5 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c1 {
-  margin-bottom: 0;
-}
-
 <div
   className="c0"
 >
   <form
-    className="c1"
     onSubmit={undefined}
   >
     <div
-      className="c2"
+      className="c1"
       wrap={true}
     >
       <div
-        className="c3"
+        className="c2"
       >
         <div
-          className="c4"
+          className="c3"
         >
           <div
-            className="c5"
+            className="c4"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c6 c7"
+              className="c5 c6"
               htmlFor="l"
             >
               Attach to new CNS service name
             </label>
             <div
-              className="c8"
+              className="c7"
             >
               <input
-                className="c9"
+                className="c8"
                 disabled={false}
                 id="l"
                 onBlur={null}
@@ -651,13 +641,13 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c3"
+        className="c2"
       >
         <div
-          className="c10"
+          className="c9"
         >
           <button
-            className="c11 c12 c13 c14"
+            className="c10 c11 c12 c13"
             data-ui-button="true"
             disabled={undefined}
             href=""
@@ -692,7 +682,7 @@ exports[`renders <Header/> without throwing 1`] = `
 .c2 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -944,6 +934,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
@@ -1116,7 +1107,7 @@ exports[`renders <HostnamesHeader /> without throwing 1`] = `
 .c2 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
index 774f220f..ca084134 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
@@ -5,7 +5,7 @@ Array [
   .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -30,7 +30,7 @@ Array [
   .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -351,7 +351,7 @@ Array [
   .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -376,7 +376,7 @@ Array [
   .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
@@ -499,12 +499,12 @@ Array [
 `;
 
 exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
-.c10 {
+.c9 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c5 {
+.c4 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -512,39 +512,39 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   overflow: visible;
 }
 
-.c5[type='checkbox'],
-.c5[type='radio'] {
+.c4[type='checkbox'],
+.c4[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c5[type='number']::-webkit-inner-spin-button,
-.c5[type='number']::-webkit-outer-spin-button {
+.c4[type='number']::-webkit-inner-spin-button,
+.c4[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c5[type='search'] {
+.c4[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c5[type='search']::-webkit-search-cancel-button,
-.c5[type='search']::-webkit-search-decoration {
+.c4[type='search']::-webkit-search-cancel-button,
+.c4[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c5::-webkit-file-upload-button {
+.c4::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c9 {
+.c8 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -554,33 +554,33 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   text-align: left;
 }
 
-.c4 {
+.c3 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c4:checked + label::after {
+.c3:checked + label::after {
   opacity: 1;
 }
 
-.c4:selected + label::after {
+.c3:selected + label::after {
   opacity: 1;
 }
 
-.c4:checked + label {
+.c3:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c4:selected + label {
+.c3:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c4:disabled + label {
+.c3:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c6 {
+.c5 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -597,7 +597,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c6::after {
+.c5::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -614,7 +614,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c3 {
+.c2 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -623,12 +623,12 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c7 label {
+.c6 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c2 {
+.c1 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -652,25 +652,25 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c2 label {
+.c1 label {
   font-weight: 400;
 }
 
-.c2 label::after {
+.c1 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c2 div[type='checkbox'],
-.c2 div[type='checkbox'] input,
-.c2 div[type='checkbox'] label {
+.c1 div[type='checkbox'],
+.c1 div[type='checkbox'] input,
+.c1 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c1 {
+.c0 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -682,23 +682,18 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c8 {
+.c7 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c0 {
-  margin-bottom: 0 !important;
-}
-
 <form
-  className="c0"
   onChange={undefined}
 >
   <div
-    className="c1"
+    className="c0"
     id="fw-toggle-firewall"
     name="enabled"
     role="group"
@@ -706,11 +701,11 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
     type="checkbox"
   >
     <li
-      className="c2"
+      className="c1"
     >
       <div
         checked={false}
-        className="c3"
+        className="c2"
         disabled={false}
         id="fw-toggle-firewall"
         onBlur={undefined}
@@ -718,30 +713,30 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
       >
         <input
           checked={false}
-          className="c4 c5"
+          className="c3 c4"
           disabled={false}
           id="l"
           onBlur={undefined}
           type="checkbox"
         />
         <label
-          className="c6"
+          className="c5"
           htmlFor="l"
         />
       </div>
       <div
         checked={false}
-        className="c7"
+        className="c6"
         disabled={false}
         id="fw-toggle-firewall"
         onBlur={undefined}
       >
         <label
-          className="c8 c9"
+          className="c7 c8"
           htmlFor="l"
         >
           <div
-            className="c10"
+            className="c9"
           >
             Enable Firewall
           </div>
@@ -753,12 +748,12 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
 `;
 
 exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
-.c10 {
+.c9 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c5 {
+.c4 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -766,39 +761,39 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   overflow: visible;
 }
 
-.c5[type='checkbox'],
-.c5[type='radio'] {
+.c4[type='checkbox'],
+.c4[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c5[type='number']::-webkit-inner-spin-button,
-.c5[type='number']::-webkit-outer-spin-button {
+.c4[type='number']::-webkit-inner-spin-button,
+.c4[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c5[type='search'] {
+.c4[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c5[type='search']::-webkit-search-cancel-button,
-.c5[type='search']::-webkit-search-decoration {
+.c4[type='search']::-webkit-search-cancel-button,
+.c4[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c5::-webkit-file-upload-button {
+.c4::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c9 {
+.c8 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -808,33 +803,33 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   text-align: left;
 }
 
-.c4 {
+.c3 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c4:checked + label::after {
+.c3:checked + label::after {
   opacity: 1;
 }
 
-.c4:selected + label::after {
+.c3:selected + label::after {
   opacity: 1;
 }
 
-.c4:checked + label {
+.c3:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c4:selected + label {
+.c3:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c4:disabled + label {
+.c3:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c6 {
+.c5 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -851,7 +846,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c6::after {
+.c5::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -868,7 +863,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c3 {
+.c2 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -877,12 +872,12 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c7 label {
+.c6 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c2 {
+.c1 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -906,25 +901,25 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c2 label {
+.c1 label {
   font-weight: 400;
 }
 
-.c2 label::after {
+.c1 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c2 div[type='checkbox'],
-.c2 div[type='checkbox'] input,
-.c2 div[type='checkbox'] label {
+.c1 div[type='checkbox'],
+.c1 div[type='checkbox'] input,
+.c1 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c1 {
+.c0 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -936,23 +931,18 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c8 {
+.c7 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c0 {
-  margin-bottom: 0 !important;
-}
-
 <form
-  className="c0"
   onChange={undefined}
 >
   <div
-    className="c1"
+    className="c0"
     id="fw-toggle-firewall"
     name="enabled"
     role="group"
@@ -960,11 +950,11 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
     type="checkbox"
   >
     <li
-      className="c2"
+      className="c1"
     >
       <div
         checked={false}
-        className="c3"
+        className="c2"
         disabled={true}
         id="fw-toggle-firewall"
         onBlur={undefined}
@@ -972,30 +962,30 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
       >
         <input
           checked={false}
-          className="c4 c5"
+          className="c3 c4"
           disabled={true}
           id="n"
           onBlur={undefined}
           type="checkbox"
         />
         <label
-          className="c6"
+          className="c5"
           htmlFor="n"
         />
       </div>
       <div
         checked={false}
-        className="c7"
+        className="c6"
         disabled={true}
         id="fw-toggle-firewall"
         onBlur={undefined}
       >
         <label
-          className="c8 c9"
+          className="c7 c8"
           htmlFor="n"
         >
           <div
-            className="c10"
+            className="c9"
           >
             Enable Firewall
           </div>
@@ -1007,12 +997,12 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
 `;
 
 exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
-.c10 {
+.c9 {
   margin-right: 0.75rem;
   margin-left: 0.75rem;
 }
 
-.c5 {
+.c4 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1020,39 +1010,39 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   overflow: visible;
 }
 
-.c5[type='checkbox'],
-.c5[type='radio'] {
+.c4[type='checkbox'],
+.c4[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c5[type='number']::-webkit-inner-spin-button,
-.c5[type='number']::-webkit-outer-spin-button {
+.c4[type='number']::-webkit-inner-spin-button,
+.c4[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c5[type='search'] {
+.c4[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c5[type='search']::-webkit-search-cancel-button,
-.c5[type='search']::-webkit-search-decoration {
+.c4[type='search']::-webkit-search-cancel-button,
+.c4[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c5::-webkit-file-upload-button {
+.c4::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c9 {
+.c8 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -1062,33 +1052,33 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   text-align: left;
 }
 
-.c4 {
+.c3 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
 }
 
-.c4:checked + label::after {
+.c3:checked + label::after {
   opacity: 1;
 }
 
-.c4:selected + label::after {
+.c3:selected + label::after {
   opacity: 1;
 }
 
-.c4:checked + label {
+.c3:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c4:selected + label {
+.c3:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c4:disabled + label {
+.c3:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c6 {
+.c5 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -1105,7 +1095,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c6::after {
+.c5::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -1122,7 +1112,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c3 {
+.c2 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -1131,12 +1121,12 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c7 label {
+.c6 label {
   font-weight: normal;
   font-size: 0.9375rem;
 }
 
-.c2 {
+.c1 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1160,25 +1150,25 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c2 label {
+.c1 label {
   font-weight: 400;
 }
 
-.c2 label::after {
+.c1 label::after {
   width: 0.475rem;
   height: 0.205rem;
   top: 0.4125rem;
   left: 0.35rem;
 }
 
-.c2 div[type='checkbox'],
-.c2 div[type='checkbox'] input,
-.c2 div[type='checkbox'] label {
+.c1 div[type='checkbox'],
+.c1 div[type='checkbox'] input,
+.c1 div[type='checkbox'] label {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.c1 {
+.c0 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -1190,22 +1180,16 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c8 {
+.c7 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
 }
 
-.c0 {
-  margin-bottom: 0 !important;
-}
-
-<form
-  className="c0"
->
+<form>
   <div
-    className="c1"
+    className="c0"
     id="fw-toggle-inactive"
     name="inactive"
     role="group"
@@ -1213,11 +1197,11 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
     type="checkbox"
   >
     <li
-      className="c2"
+      className="c1"
     >
       <div
         checked={false}
-        className="c3"
+        className="c2"
         disabled={false}
         id="fw-toggle-inactive"
         onBlur={undefined}
@@ -1225,30 +1209,30 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
       >
         <input
           checked={false}
-          className="c4 c5"
+          className="c3 c4"
           disabled={false}
           id="p"
           onBlur={undefined}
           type="checkbox"
         />
         <label
-          className="c6"
+          className="c5"
           htmlFor="p"
         />
       </div>
       <div
         checked={false}
-        className="c7"
+        className="c6"
         disabled={false}
         id="fw-toggle-inactive"
         onBlur={undefined}
       >
         <label
-          className="c8 c9"
+          className="c7 c8"
           htmlFor="p"
         >
           <div
-            className="c10"
+            className="c9"
           >
             Show inactive rules
           </div>
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
index abdc9190..5bd09c25 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
@@ -4362,6 +4362,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   max-width: 22.1875rem;
   width: 22.1875rem;
diff --git a/packages/resource-widgets/src/cns/index.js b/packages/resource-widgets/src/cns/index.js
index 9781af78..fb81f4e0 100644
--- a/packages/resource-widgets/src/cns/index.js
+++ b/packages/resource-widgets/src/cns/index.js
@@ -50,10 +50,6 @@ const ShortDivider = styled(Divider)`
   margin-right: 0;
 `;
 
-const Form = styled.form`
-  margin-bottom: 0;
-`;
-
 export const Header = () => (
   <Margin bottom="5">
     <H3>CNS Default Hostnames</H3>
@@ -104,7 +100,7 @@ export const AddServiceForm = ({
   invalid
 }) => (
   <Margin bottom="3">
-    <Form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit}>
       <Flex wrap alignCenter={invalid} alignEnd={!invalid}>
         <FlexItem>
           <Flex collumn>
@@ -135,7 +131,7 @@ export const AddServiceForm = ({
           </Margin>
         </FlexItem>
       </Flex>
-    </Form>
+    </form>
   </Margin>
 );
 
diff --git a/packages/resource-widgets/src/firewall/index.js b/packages/resource-widgets/src/firewall/index.js
index ceeb0a98..cfa25262 100644
--- a/packages/resource-widgets/src/firewall/index.js
+++ b/packages/resource-widgets/src/firewall/index.js
@@ -3,13 +3,11 @@ import { Field } from 'redux-form';
 import { Margin, Padding } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
-import styled from 'styled-components';
 
 import {
   H3,
   FormGroup,
   FormLabel,
-  Toggle,
   TagList,
   TagItem,
   P,
@@ -21,10 +19,6 @@ import {
 
 const { SmallOnly, MediumDown, Medium, Large } = QueryBreakpoints;
 
-const Form = styled.form`
-  margin-bottom: 0 !important;
-`;
-
 const capitalizeFirstLetter = string =>
   string.charAt(0).toUpperCase() + string.slice(1);
 
@@ -250,7 +244,7 @@ export const ToggleFirewallForm = ({
     : undefined;
 
   return (
-    <Form onChange={onChange}>
+    <form onChange={onChange}>
       <FormGroup
         id="fw-toggle-firewall"
         type="checkbox"
@@ -265,12 +259,12 @@ export const ToggleFirewallForm = ({
           </FormLabel>
         </Checkbox>
       </FormGroup>
-    </Form>
+    </form>
   );
 };
 
 export const ToggleInactiveForm = () => (
-  <Form>
+  <form>
     <FormGroup
       id="fw-toggle-inactive"
       type="checkbox"
@@ -285,5 +279,5 @@ export const ToggleInactiveForm = () => (
         </FormLabel>
       </Checkbox>
     </FormGroup>
-  </Form>
+  </form>
 );
diff --git a/packages/resource-widgets/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap b/packages/resource-widgets/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
index 454f012a..ca042d3f 100644
--- a/packages/resource-widgets/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
+++ b/packages/resource-widgets/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
@@ -2931,8 +2931,8 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 .c23 {
   box-sizing: border-box;
   width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
+  height: 12rem;
+  min-height: 12rem;
   padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
@@ -2946,6 +2946,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  white-space: pre-wrap;
   font-family: "Roboto Mono",monospace;
   width: 100%;
   min-width: 100%;
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..5227ed45 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
@@ -14,11 +14,9 @@ exports[`Anchor Default Anchor 1`] = `
 .c0 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c0:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 <a
@@ -43,21 +41,14 @@ exports[`Anchor Disabled Anchor 1`] = `
 .c0 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(216,216,216);
   -webkit-text-fill-color: currentcolor;
   pointer-events: none;
 }
 
-.c0:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
 <a
   className="c0 c1 c2"
   disabled={true}
@@ -81,15 +72,13 @@ exports[`Anchor Reversed Anchor 1`] = `
 .c0 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c0:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 <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 83ab58da..d001d9aa 100644
--- a/packages/ui-toolkit/src/anchor/index.js
+++ b/packages/ui-toolkit/src/anchor/index.js
@@ -13,12 +13,10 @@ const BaseLink = styled(({ component, children, ...rest }) =>
 )`
   color: ${props => props.theme.primary};
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  text-decoration: underline;
 
-  &:hover {
-    text-decoration: none;
-  }
-
-  ${isOr('secondary', 'reversed')`
+  ${isOr('secondary', 'reversed', 'white')`
     color: ${props => props.theme.white};
     -webkit-text-fill-color: currentcolor;
   `};
@@ -32,10 +30,6 @@ const BaseLink = styled(({ component, children, ...rest }) =>
     color: ${props => props.theme.grey};
     -webkit-text-fill-color: currentcolor;
     pointer-events: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
   `};
 `;
 
diff --git a/packages/ui-toolkit/src/base/global.js b/packages/ui-toolkit/src/base/global.js
index 2d59d872..9ef4d265 100644
--- a/packages/ui-toolkit/src/base/global.js
+++ b/packages/ui-toolkit/src/base/global.js
@@ -44,6 +44,10 @@ export default ({ theme }) => css`
     flex-flow: column;
   }
 
+  form {
+    margin: 0;
+  }
+
   .CodeMirror {
     border: solid ${remcalc(1)} ${theme.grey};
     margin: ${remcalc(8)} 0 ${remcalc(8)} 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 a4baaa83..d0e39455 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
@@ -14,11 +14,9 @@ exports[`Button Default Button 1`] = `
 .c2 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c2:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c1 {
@@ -114,21 +112,14 @@ exports[`Button Disabled Button 1`] = `
 .c2 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(216,216,216);
   -webkit-text-fill-color: currentcolor;
   pointer-events: none;
 }
 
-.c2:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c2:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
 .c1 {
   display: inline-block;
 }
@@ -245,11 +236,9 @@ exports[`Button Error Button 1`] = `
 .c2 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
-}
-
-.c2:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c1 {
@@ -368,21 +357,14 @@ exports[`Button Loading Button 1`] = `
 .c2 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(216,216,216);
   -webkit-text-fill-color: currentcolor;
   pointer-events: none;
 }
 
-.c2:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c2:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
 .c1 {
   display: inline-block;
 }
@@ -499,15 +481,13 @@ exports[`Button Secondary Button 1`] = `
 .c2 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: rgb(255,255,255);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c2:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c1 {
   display: inline-block;
 }
diff --git a/packages/ui-toolkit/src/card/index.js b/packages/ui-toolkit/src/card/index.js
index c48854ba..c5bd4566 100644
--- a/packages/ui-toolkit/src/card/index.js
+++ b/packages/ui-toolkit/src/card/index.js
@@ -1,6 +1,5 @@
 export { default } from './card';
 export { default as Outlet } from './outlet';
-
 export {
   default as Header,
   Meta as HeaderMeta,
diff --git a/packages/ui-toolkit/src/footer/sticky.js b/packages/ui-toolkit/src/footer/sticky.js
index 5a31568a..1d82cf70 100644
--- a/packages/ui-toolkit/src/footer/sticky.js
+++ b/packages/ui-toolkit/src/footer/sticky.js
@@ -10,7 +10,10 @@ const Container = styled(ViewContainer)`
   flex-wrap: nowrap;
   align-content: stretch;
   align-items: stretch;
-  background: ${props => props.theme.background};
+  background: ${props =>
+    props.fill
+      ? props.theme[props.fill] ? props.theme[props.fill] : props.fill
+      : props.theme.background};
 `;
 
 const Footer = styled.div`
@@ -20,15 +23,22 @@ const Footer = styled.div`
   align-content: stretch;
   align-items: stretch;
   background-color: ${props =>
-    props.fill ? props.theme[props.fill] : 'rgba(241, 241, 241, 1)'};
+    props.fill
+      ? props.theme[props.fill] ? props.theme[props.fill] : props.fill
+      : 'rgba(241, 241, 241, 1)'};
   border-top: ${remcalc(1)} solid ${props => props.theme.grey};
-  max-height: ${remcalc(53)};
-  min-height: ${remcalc(53)};
   line-height: ${remcalc(25)};
   height: ${remcalc(70)};
-  max-height: ${remcalc(70)};
   z-index: 1;
 
+  ${is('auto')`
+    height: auto;
+  `};
+
+  ${is('borderless')`
+    border: none;
+  `};
+
   ${is('fixed')`
     position: fixed;
     left: 0;
@@ -38,10 +48,16 @@ const Footer = styled.div`
   ${is('bottom', 'fixed')`
     bottom: 0;
   `};
+
+  ${is('top', 'fixed')`
+    top: 0;
+  `};
 `;
 
-export default ({ children, fluid, ...rest }) => (
+export default ({ children, fluid, innerFill, ...rest }) => (
   <Footer {...rest}>
-    <Container fluid={fluid}>{children}</Container>
+    <Container fill={innerFill || rest.fill} fluid={fluid}>
+      {children}
+    </Container>
   </Footer>
 );
diff --git a/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap b/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
index 4d4bc9cb..243a1283 100644
--- a/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
+++ b/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
@@ -726,8 +726,8 @@ exports[`Form Textarea 1`] = `
 .c1 {
   box-sizing: border-box;
   width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
+  height: 12rem;
+  min-height: 12rem;
   padding: 0.8125rem 0.75rem;
   border-radius: 0.25rem;
   background-color: rgb(255,255,255);
diff --git a/packages/ui-toolkit/src/form/base/input.js b/packages/ui-toolkit/src/form/base/input.js
index 5cb34b5c..923ee2f4 100644
--- a/packages/ui-toolkit/src/form/base/input.js
+++ b/packages/ui-toolkit/src/form/base/input.js
@@ -17,7 +17,7 @@ const color = props =>
   props.defaultValue ? colorWithDefaultValue(props) : colorWithDisabled(props);
 
 const height = props =>
-  props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48);
+  props.multiple ? 'auto' : props.textarea ? remcalc(192) : remcalc(48);
 
 const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
 
@@ -106,6 +106,7 @@ const style = css`
   `};
 
   ${is('monospace')`
+    white-space: pre-wrap;
     font-family: ${props => props.theme.monoFont.families};
 
       &:disabled {
@@ -164,6 +165,10 @@ const style = css`
     width: ${remcalc(120)};
   `};
 
+  ${is('borderless')`
+    border: none;
+  `};
+
   ${is('success')`
     border-color: ${props => props.theme.greenDark}
   `};
@@ -199,6 +204,14 @@ const style = css`
     text-align: center;
     border-radius: 0;
   `};
+
+  ${is('white')`
+    color: ${props => props.theme.white};
+  `};
+
+  ${is('dark')`
+    background: ${props => props.theme.greyDarker};
+  `};
 `;
 
 const BaseInput = Component => ({ resize, onBlur, type, ...props }) => {
diff --git a/packages/ui-toolkit/src/section-list/index.js b/packages/ui-toolkit/src/section-list/index.js
index ca1e531a..4b9944f3 100644
--- a/packages/ui-toolkit/src/section-list/index.js
+++ b/packages/ui-toolkit/src/section-list/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
+import is from 'styled-is';
 
 const UnorderedList = styled.ul`
   background: ${props => props.theme.disabled};
@@ -24,6 +25,10 @@ const UnorderedList = styled.ul`
     left: 0;
     z-index: 1;
   }
+
+  ${is('clear')`
+    background: none !important;
+  `};
 `;
 
 /**
diff --git a/packages/ui-toolkit/src/section-list/item.js b/packages/ui-toolkit/src/section-list/item.js
index 0802b11c..9f1e80ab 100644
--- a/packages/ui-toolkit/src/section-list/item.js
+++ b/packages/ui-toolkit/src/section-list/item.js
@@ -1,20 +1,9 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import remcalc from 'remcalc';
-import is from 'styled-is';
+import is, { isNot } from 'styled-is';
 
 import BaseAnchor from '../anchor';
 
-const border = css`
-  width: 100%;
-  height: ${remcalc(1)};
-  background: ${props => props.theme.text};
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  z-index: 2;
-`;
-
 export default styled.li`
   font-size: ${remcalc(15)};
   line-height: 1.6;
@@ -23,25 +12,53 @@ export default styled.li`
 
 export const Anchor = styled(BaseAnchor)`
   color: ${props => props.theme.text};
+  font-weight: ${props => props.theme.font.weight.text};
   text-decoration: none;
   cursor: pointer;
   padding: 0 ${remcalc(12)};
   padding-bottom: ${remcalc(15)};
   position: relative;
 
-  &.active {
-    font-weight: ${props => props.theme.font.weight.text};
+  &:after {
+    width: 100%;
+    height: ${remcalc(1)};
+    background: ${props => props.theme.grey};
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+  }
 
+  &.active {
     &:after {
-      ${border};
+      background: ${props => props.theme.font.regular};
     }
   }
 
+  &.active {
+    font-weight: ${props => props.theme.font.weight.semibold};
+  }
+
   ${is('active')`
-    font-weight: ${props => props.theme.font.weight.text};
+    font-weight: ${props => props.theme.font.weight.semibold}
+  `};
+
+  ${is('white')`
+    color: ${props => props.theme.white};
+
+    ${isNot('active')`
+      color: ${props => props.theme.greyDark};
+    `};
 
     &:after {
-      ${border}
+      background: ${props => props.theme.greyDarker};
+    };
+  `};
+
+  ${is('white', 'active')`
+    &:after {
+      background: ${props => props.theme.white};
     }
   `};
 `;
diff --git a/packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap b/packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap
index 2bd1e6f8..375997fc 100644
--- a/packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap
+++ b/packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap
@@ -14,7 +14,7 @@ exports[`Button H1 1`] = `
   line-height: 2.8125rem;
   font-style: normal;
   font-stretch: normal;
-  font-weight: normal;
+  font-weight: 400;
   margin: 0;
 }
 
@@ -29,7 +29,7 @@ exports[`Button H2 1`] = `
 .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.875rem;
   font-size: 1.5rem;
 }
@@ -45,7 +45,7 @@ exports[`Button H3 1`] = `
 .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.625rem;
   font-size: 1.3125rem;
 }
diff --git a/packages/ui-toolkit/src/text/headings.js b/packages/ui-toolkit/src/text/headings.js
index 51a1be80..a4532e8c 100644
--- a/packages/ui-toolkit/src/text/headings.js
+++ b/packages/ui-toolkit/src/text/headings.js
@@ -12,7 +12,7 @@ export const H1 = styled(NH1)`
   line-height: ${remcalc(45)};
   font-style: normal;
   font-stretch: normal;
-  font-weight: normal;
+  font-weight: ${props => props.theme.font.weight.normal};
   margin: 0;
 
   ${is('inline')`
@@ -36,7 +36,7 @@ export const H1 = styled(NH1)`
 export const H2 = styled.h2`
   margin: 0;
   color: ${props => props.theme.text};
-  font-weight: normal;
+  font-weight: ${props => props.theme.font.weight.normal};
   line-height: ${remcalc(30)};
   font-size: ${remcalc(24)};
 
@@ -61,7 +61,7 @@ export const H2 = styled.h2`
 export const H3 = styled.h3`
   margin: 0;
   color: ${props => props.theme.text};
-  font-weight: normal;
+  font-weight: ${props => props.theme.font.weight.normal};
   line-height: ${remcalc(26)};
   font-size: ${remcalc(21)};