diff --git a/.eslintignore b/.eslintignore
index 8f24d4ab..1268706e 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,9 @@
-packages/*/**
-prototypes/*/**
 artifacts
 reports
+.nyc_output
+coverage
+dist
+styleguide
+build
+lib/app
+node_modules
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
index 2d9d8311..3acd62ef 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,8 +1,10 @@
 {
   "extends": "joyent-portal",
   "rules": {
-    "jsx-a11y/href-no-hash": 0,
+    "no-console": 1,
     "new-cap": 0,
-    "no-console": 0
+    "jsx-a11y/href-no-hash": 0,
+    "no-negated-condition": 1,
+    "camelcase": 1
   }
 }
diff --git a/bundle/.yarnclean b/bundle/.yarnclean
new file mode 100644
index 00000000..e69de29b
diff --git a/bundle/package.json b/bundle/package.json
index f256074f..35767072 100644
--- a/bundle/package.json
+++ b/bundle/package.json
@@ -9,24 +9,21 @@
     "build:lib": "echo 0",
     "build:bundle": "echo 0",
     "prepublish": "echo 0",
-    "lint": "echo 0",
-    "lint:ci": "echo 0",
     "test": "echo 0",
     "test:ci": "echo 0"
   },
   "dependencies": {
     "apr-main": "^4.0.3",
-    "brule": "^3.1.0",
-    "cloudapi-gql": "^7.1.4",
+    "cloudapi-gql": "^8.0.0",
     "execa": "^0.10.0",
-    "h2o2": "^8.0.1",
-    "hapi": "^17.3.1",
-    "hapi-triton-auth": "^2.0.1",
-    "hapi-webconsole-nav": "^1.2.0",
-    "inert": "^5.1.0",
+    "graphi": "^5.7.0",
+    "h2o2": "^8.1.2",
+    "hapi": "^17.4.0",
+    "hapi-triton-auth": "^3.0.0",
+    "hapi-webconsole-nav": "^2.1.0",
     "my-joy-images": "*",
     "my-joy-instances": "*",
     "my-joy-navigation": "*",
-    "rollover": "^1.0.0"
+    "tsg-graphql": "^1.0.0"
   }
 }
diff --git a/bundle/src/images.js b/bundle/src/images.js
index ee1d313e..e6cea0e7 100644
--- a/bundle/src/images.js
+++ b/bundle/src/images.js
@@ -1,5 +1,8 @@
+require('../.env.js');
+
 const Main = require('apr-main');
 const CloudApiGql = require('cloudapi-gql');
+const Graphi = require('graphi');
 const Url = require('url');
 
 const Server = require('./server');
@@ -28,6 +31,17 @@ Main(async () => {
   });
 
   await server.register([
+    {
+      plugin: Graphi,
+      options: {
+        graphqlPath: '/graphql',
+        graphiqlPath: '/graphiql',
+        authStrategy: 'sso'
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    },
     {
       plugin: CloudApiGql,
       options: {
diff --git a/bundle/src/instances.js b/bundle/src/instances.js
index 3fbcb4ee..26a3f45a 100644
--- a/bundle/src/instances.js
+++ b/bundle/src/instances.js
@@ -1,5 +1,8 @@
+require('../.env.js');
+
 const Main = require('apr-main');
 const CloudApiGql = require('cloudapi-gql');
+const Graphi = require('graphi');
 const Url = require('url');
 
 const Server = require('./server');
@@ -28,6 +31,17 @@ Main(async () => {
   });
 
   await server.register([
+    {
+      plugin: Graphi,
+      options: {
+        graphqlPath: '/graphql',
+        graphiqlPath: '/graphiql',
+        authStrategy: 'sso'
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    },
     {
       plugin: CloudApiGql,
       options: {
diff --git a/bundle/src/navigation.js b/bundle/src/navigation.js
index 94f7eee1..859b9d2a 100644
--- a/bundle/src/navigation.js
+++ b/bundle/src/navigation.js
@@ -1,5 +1,8 @@
+require('../.env.js');
+
 const Main = require('apr-main');
 const Nav = require('hapi-webconsole-nav');
+const Graphi = require('graphi');
 const Url = require('url');
 
 const Server = require('./server');
@@ -33,6 +36,17 @@ Main(async () => {
   });
 
   await server.register([
+    {
+      plugin: Graphi,
+      options: {
+        graphqlPath: '/graphql',
+        graphiqlPath: '/graphiql',
+        authStrategy: 'sso'
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    },
     {
       plugin: Nav,
       options: {
diff --git a/bundle/src/server.js b/bundle/src/server.js
index 6378cae1..6be55cfb 100644
--- a/bundle/src/server.js
+++ b/bundle/src/server.js
@@ -1,6 +1,7 @@
+require('../.env.js');
+
 const Hapi = require('hapi');
 const Sso = require('hapi-triton-auth');
-const Url = require('url');
 
 const {
   COOKIE_PASSWORD,
@@ -8,12 +9,10 @@ const {
   SDC_KEY_PATH,
   SDC_ACCOUNT,
   SDC_KEY_ID,
-  SDC_URL,
-  DC_NAME
+  SDC_URL
 } = process.env;
 
 module.exports = async ({ PORT, BASE_URL }) => {
-  const dcName = DC_NAME || Url.parse(SDC_URL).host.split('.')[0];
   const keyPath = SDC_KEY_PATH;
   const keyId = `/${SDC_ACCOUNT}/keys/${SDC_KEY_ID}`;
   const apiBaseUrl = SDC_URL;
@@ -50,6 +49,7 @@ module.exports = async ({ PORT, BASE_URL }) => {
 
   server.events.on('log', (event, tags) => {
     if (tags.error) {
+      // eslint-disable-next-line no-console
       console.log(event);
     }
   });
@@ -58,6 +58,7 @@ module.exports = async ({ PORT, BASE_URL }) => {
     const { tags } = event;
     if (tags.includes('error') && event.data && event.data.errors) {
       event.data.errors.forEach(error => {
+        // eslint-disable-next-line no-console
         console.log(error);
       });
     }
diff --git a/bundle/src/service-groups.js b/bundle/src/service-groups.js
new file mode 100644
index 00000000..f9819cbb
--- /dev/null
+++ b/bundle/src/service-groups.js
@@ -0,0 +1,74 @@
+require('../.env.js');
+
+const Main = require('apr-main');
+const CloudApiGql = require('cloudapi-gql');
+const Tsg = require('tsg-graphql');
+const Graphi = require('graphi');
+const Url = require('url');
+
+const Server = require('./server');
+
+const {
+  PORT = 4004,
+  BASE_URL = `http://0.0.0.0:${PORT}`,
+  PREFIX = 'service-groups',
+  DC_NAME,
+  TSG_URL = 'http://0.0.0.0:3000',
+  SDC_URL,
+  SDC_KEY_PATH,
+  SDC_ACCOUNT,
+  SDC_KEY_ID
+} = process.env;
+
+const dcName = DC_NAME || Url.parse(SDC_URL).host.split('.')[0];
+const keyPath = SDC_KEY_PATH;
+const keyId = `/${SDC_ACCOUNT}/keys/${SDC_KEY_ID}`;
+
+Main(async () => {
+  const server = await Server({
+    PORT,
+    BASE_URL
+  });
+
+  await server.register([
+    {
+      plugin: Graphi,
+      options: {
+        graphqlPath: '/graphql',
+        graphiqlPath: '/graphiql',
+        authStrategy: 'sso'
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    },
+    {
+      plugin: Tsg,
+      options: {
+        authStrategy: 'sso',
+        keyPath,
+        keyId,
+        apiBaseUrl: TSG_URL,
+        dcName
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    },
+    {
+      plugin: CloudApiGql,
+      options: {
+        authStrategy: 'sso',
+        keyPath,
+        keyId,
+        apiBaseUrl: SDC_URL,
+        dcName
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    }
+  ]);
+
+  await server.start();
+});
diff --git a/bundle/src/templates.js b/bundle/src/templates.js
new file mode 100644
index 00000000..2bd6a8a3
--- /dev/null
+++ b/bundle/src/templates.js
@@ -0,0 +1,74 @@
+require('../.env.js');
+
+const Main = require('apr-main');
+const CloudApiGql = require('cloudapi-gql');
+const Tsg = require('tsg-graphql');
+const Graphi = require('graphi');
+const Url = require('url');
+
+const Server = require('./server');
+
+const {
+  PORT = 4005,
+  BASE_URL = `http://0.0.0.0:${PORT}`,
+  PREFIX = 'templates',
+  DC_NAME,
+  TSG_URL = 'http://0.0.0.0:3000',
+  SDC_URL,
+  SDC_KEY_PATH,
+  SDC_ACCOUNT,
+  SDC_KEY_ID
+} = process.env;
+
+const dcName = DC_NAME || Url.parse(SDC_URL).host.split('.')[0];
+const keyPath = SDC_KEY_PATH;
+const keyId = `/${SDC_ACCOUNT}/keys/${SDC_KEY_ID}`;
+
+Main(async () => {
+  const server = await Server({
+    PORT,
+    BASE_URL
+  });
+
+  await server.register([
+    {
+      plugin: Graphi,
+      options: {
+        graphqlPath: '/graphql',
+        graphiqlPath: '/graphiql',
+        authStrategy: 'sso'
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    },
+    {
+      plugin: Tsg,
+      options: {
+        authStrategy: 'sso',
+        keyPath,
+        keyId,
+        apiBaseUrl: TSG_URL,
+        dcName
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    },
+    {
+      plugin: CloudApiGql,
+      options: {
+        authStrategy: 'sso',
+        keyPath,
+        keyId,
+        apiBaseUrl: SDC_URL,
+        dcName
+      },
+      routes: {
+        prefix: `/${PREFIX}`
+      }
+    }
+  ]);
+
+  await server.start();
+});
diff --git a/commitlint.config.js b/commitlint.config.js
index da6b1b5f..3aff4a4f 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -4,7 +4,16 @@ module.exports = {
     'scope-enum': [
       2,
       'always',
-      ['ui-toolkit', 'icons', 'instances', 'navigation', 'bundle', 'images']
+      [
+        'ui-toolkit',
+        'icons',
+        'instances',
+        'navigation',
+        'bundle',
+        'images',
+        'sg',
+        'templates'
+      ]
     ]
   }
 };
diff --git a/consoles/my-joy-images/.eslintrc b/consoles/my-joy-images/.eslintrc
deleted file mode 100644
index 435e02c4..00000000
--- a/consoles/my-joy-images/.eslintrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "extends": "joyent-portal",
-  "rules": {
-    "no-console": 0,
-    "new-cap": 0,
-    "camelcase": 1,
-    "jsx-a11y/href-no-hash": 0,
-    "no-negated-condition": 0
-  }
-}
diff --git a/consoles/my-joy-images/lib/index.js b/consoles/my-joy-images/lib/index.js
index 75c7af75..7e3e9199 100644
--- a/consoles/my-joy-images/lib/index.js
+++ b/consoles/my-joy-images/lib/index.js
@@ -16,6 +16,7 @@ exports.register = async server => {
     if (NODE_ENV === 'production') {
       throw err;
     } else {
+      // eslint-disable-next-line no-console
       console.error(err);
     }
   }
diff --git a/consoles/my-joy-images/package.json b/consoles/my-joy-images/package.json
index ccd520ad..6e085671 100644
--- a/consoles/my-joy-images/package.json
+++ b/consoles/my-joy-images/package.json
@@ -11,8 +11,6 @@
     "build:lib": "echo 0",
     "build:bundle": "NAMESPACE=images NODE_ENV=production redrun -p build:frontend build:ssr",
     "prepublish": "NODE_ENV=production redrun build:bundle",
-    "lint": "redrun lint:ci -- --fix",
-    "lint:ci": "NODE_ENV=test eslint . --ext .js --ext .md",
     "test": "echo 0",
     "test:ci": "echo 0",
     "build:frontend": "joyent-react-scripts build",
@@ -38,6 +36,7 @@
     "inert": "^5.1.0",
     "joyent-logo-assets": "^1.1.0",
     "joyent-react-styled-flexboxgrid": "^2.2.3",
+    "joyent-ui-resource-widgets": "^1.0.0",
     "joyent-ui-toolkit": "^6.0.0",
     "lodash.assign": "^4.2.0",
     "lodash.find": "^4.6.0",
diff --git a/consoles/my-joy-images/src/components/create-image/details.js b/consoles/my-joy-images/src/components/create-image/details.js
index 48bd15a9..e7d1870c 100644
--- a/consoles/my-joy-images/src/components/create-image/details.js
+++ b/consoles/my-joy-images/src/components/create-image/details.js
@@ -6,7 +6,6 @@ import remcalc from 'remcalc';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 
 import {
-  Divider,
   FormGroup,
   FormLabel,
   Input,
@@ -22,15 +21,14 @@ export default ({ placeholderName, randomizing, onRandomize }) => (
       <FlexItem flex>
         <FormGroup name="name" fluid field={Field}>
           <FormLabel>Image name</FormLabel>
-          <Margin top={0.5}>
+          <Margin top="0.5">
             <Input placeholder={placeholderName} onBlur={null} required />
           </Margin>
           <FormMeta />
         </FormGroup>
       </FlexItem>
       <FlexItem>
-        <Divider height={remcalc(13)} transparent />
-        <Margin left={1}>
+        <Margin left="1">
           <Button
             type="button"
             marginTop={remcalc(8)}
@@ -46,10 +44,10 @@ export default ({ placeholderName, randomizing, onRandomize }) => (
         </Margin>
       </FlexItem>
     </Flex>
-    <Margin top={3}>
+    <Margin top="3">
       <FormGroup name="version" fluid field={Field}>
         <FormLabel>Version</FormLabel>
-        <Margin top={0.5}>
+        <Margin top="0.5">
           <Input placeholder="Example: v1.0" onBlur={null} required />
         </Margin>
         <FormMeta />
@@ -57,10 +55,10 @@ export default ({ placeholderName, randomizing, onRandomize }) => (
     </Margin>
     <Row>
       <Col xs={12} sm={8}>
-        <Margin top={3}>
+        <Margin top="3">
           <FormGroup name="description" fluid field={Field}>
             <FormLabel>Description</FormLabel>
-            <Margin top={0.5}>
+            <Margin top="0.5">
               <Textarea
                 placeholder="Example: JarJarBinks, Anakin Skywalker, Obi Wan Kenobi, Qui-Gon Jinn, Han Solo, Wookies"
                 fluid
diff --git a/consoles/my-joy-images/src/components/create-image/title.js b/consoles/my-joy-images/src/components/create-image/title.js
index e7bdc2af..a7e2201e 100644
--- a/consoles/my-joy-images/src/components/create-image/title.js
+++ b/consoles/my-joy-images/src/components/create-image/title.js
@@ -16,14 +16,14 @@ const Container = styled.div`
 export default ({ icon, children, collapsed = true, ...rest }) => (
   <Container {...rest}>
     <Flex>
-      <Margin right={1}>
+      <Margin right="1">
         <Flex alignCenter full>
           {icon}
         </Flex>
       </Margin>
       <Small noMargin>{children}</Small>
     </Flex>
-    <Margin top={1} bottom={collapsed ? 7 : 3}>
+    <Margin top="1" bottom={collapsed ? 7 : 3}>
       <Divider height={remcalc(1)} />
     </Margin>
   </Container>
diff --git a/consoles/my-joy-images/src/components/description.js b/consoles/my-joy-images/src/components/description.js
index e9f7a152..6cabba51 100644
--- a/consoles/my-joy-images/src/components/description.js
+++ b/consoles/my-joy-images/src/components/description.js
@@ -6,7 +6,7 @@ import { P } from 'joyent-ui-toolkit';
 export default ({ children }) => (
   <Row>
     <Col xs={12} sm={8}>
-      <Margin bottom={3}>
+      <Margin bottom="3">
         <P>{children}</P>
       </Margin>
     </Col>
diff --git a/consoles/my-joy-images/src/components/empty.js b/consoles/my-joy-images/src/components/empty.js
index 56bfa3c9..8177f75e 100644
--- a/consoles/my-joy-images/src/components/empty.js
+++ b/consoles/my-joy-images/src/components/empty.js
@@ -19,7 +19,7 @@ export default ({ children }) => (
   <FullWidthCard>
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
-        <Margin bottom={2}>
+        <Margin bottom="2">
           <EmptyState />
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>
diff --git a/consoles/my-joy-images/src/components/image.js b/consoles/my-joy-images/src/components/image.js
index cfa7a79c..bb4548d4 100644
--- a/consoles/my-joy-images/src/components/image.js
+++ b/consoles/my-joy-images/src/components/image.js
@@ -84,7 +84,7 @@ export const Image = ({
   onRemove,
   onCreateInstance
 }) => (
-  <Margin bottom={3}>
+  <Margin bottom="3">
     <CardAnchor to={`/images/${id}`} component={Link}>
       <Card radius>
         {removing ? (
@@ -94,10 +94,10 @@ export const Image = ({
         ) : (
           <Fragment>
             <CardHeader white radius>
-              <Padding left={2} right={2}>
+              <Padding left="2" right="2">
                 <Flex full alignCenter>
                   <FlexItem>
-                    <Margin right={2}>
+                    <Margin right="2">
                       {React.createElement(OS[os], {
                         width: '24',
                         height: '24'
@@ -113,7 +113,7 @@ export const Image = ({
               </Padding>
             </CardHeader>
             <Flex justifyBetween>
-              <Content left={2} top={2} bottom={2}>
+              <Content left="2" top="2" bottom="2">
                 <Max justifyBetween>
                   <Max alignCenter>
                     <Flex>{version}</Flex>
@@ -130,7 +130,7 @@ export const Image = ({
                     </ActionsWrapper>
                   </PopoverTarget>
                   <Popover noPadding placement="bottom">
-                    <Padding horizontal={3} vertical={2}>
+                    <Padding horizontal="3" vertical="2">
                       <PopoverItem disabled={false} onClick={onCreateInstance}>
                         <ItemAnchor
                           href={`${
@@ -144,7 +144,7 @@ export const Image = ({
                       </PopoverItem>
                     </Padding>
                     <PopoverDivider />
-                    <Padding horizontal={3} vertical={2}>
+                    <Padding horizontal="3" vertical="2">
                       <PopoverItem disabled={removing} onClick={onRemove}>
                         Remove
                       </PopoverItem>
@@ -165,7 +165,7 @@ export const Filters = ({ selected }) => (
     <FormGroup name="image-type" value="all" field={Field} type="radio">
       <Radio>
         <Flex alignCenter>
-          <Margin horizontal={2}>
+          <Margin horizontal="2">
             <FormLabel big normal={selected !== 'all'}>
               All
             </FormLabel>
@@ -181,7 +181,7 @@ export const Filters = ({ selected }) => (
     >
       <Radio noMargin>
         <Flex alignCenter>
-          <Margin horizontal={2}>
+          <Margin horizontal="2">
             <FormLabel big normal={selected !== 'hardware-virtual-machine'}>
               Virtual machines
             </FormLabel>
@@ -197,7 +197,7 @@ export const Filters = ({ selected }) => (
     >
       <Radio noMargin>
         <Flex alignCenter>
-          <Margin horizontal={2}>
+          <Margin horizontal="2">
             <FormLabel big normal={selected !== 'infrastructure-container'}>
               Infrastructure container
             </FormLabel>
diff --git a/consoles/my-joy-images/src/components/summary.js b/consoles/my-joy-images/src/components/summary.js
index 3f659d77..37f537f5 100644
--- a/consoles/my-joy-images/src/components/summary.js
+++ b/consoles/my-joy-images/src/components/summary.js
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import { Margin, Padding } from 'styled-components-spacing';
-import styled, { withTheme } from 'styled-components';
+import styled from 'styled-components';
 import Flex, { FlexItem } from 'styled-flex-component';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import titleCase from 'title-case';
@@ -76,7 +76,7 @@ export const Meta = ({ name, version, type, published_at, state, os }) => (
         <H2 bold>{name}</H2>
       </FlexItem>
     </Flex>
-    <Margin top={2} bottom={3}>
+    <Margin top="2" bottom="3">
       <Flex>
         <Label>{version}</Label>
         <VerticalDivider />
@@ -104,7 +104,7 @@ export const Meta = ({ name, version, type, published_at, state, os }) => (
   </Fragment>
 );
 
-export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
+export default ({ theme = {}, onRemove, removing, ...image }) => (
   <Row>
     <Col xs={12} sm={12} md={9}>
       <Card>
@@ -136,7 +136,7 @@ export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
               <Col xs={3}>
                 <SmallOnly>
                   <Button type="button" small icon error right>
-                    <DeleteIcon fill={theme.red} />
+                    <DeleteIcon fill="red" />
                   </Button>
                 </SmallOnly>
                 <Medium>
@@ -150,7 +150,7 @@ export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
                     right
                   >
                     <Margin right="1">
-                      <DeleteIcon fill={theme.red} />
+                      <DeleteIcon fill="red" />
                     </Margin>
                     <span>Delete</span>
                   </Button>
@@ -163,15 +163,15 @@ export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
             <Margin bottom="2">
               <P>{image.description}</P>
             </Margin>
-            <Margin bottom={3}>
+            <Margin bottom="3">
               <CopiableField text={(image.id || '').split('-')[0]} label="ID" />
             </Margin>
-            <Margin bottom={3}>
+            <Margin bottom="3">
               <CopiableField text={image.id} label="UUID" />
             </Margin>
             <Row>
               <Col xs={12} md={7}>
-                <Margin bottom={3}>
+                <Margin bottom="3">
                   <FormLabel>Operating system</FormLabel>
                   <Input
                     monospace
@@ -187,4 +187,4 @@ export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
       </Card>
     </Col>
   </Row>
-));
+);
diff --git a/consoles/my-joy-images/src/components/tags.js b/consoles/my-joy-images/src/components/tags.js
index 04ef9757..1c9eace6 100644
--- a/consoles/my-joy-images/src/components/tags.js
+++ b/consoles/my-joy-images/src/components/tags.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import { Margin } from 'styled-components-spacing';
 
-import { TagItem, KeyValue } from 'joyent-ui-toolkit';
+import { TagItem } from 'joyent-ui-toolkit';
+import { KeyValue } from 'joyent-ui-resource-widgets';
 
 export const AddForm = props => (
   <KeyValue {...props} method="add" input="input" type="tag" expanded />
diff --git a/consoles/my-joy-images/src/components/toolbar.js b/consoles/my-joy-images/src/components/toolbar.js
index 0ab40abc..0c71b801 100644
--- a/consoles/my-joy-images/src/components/toolbar.js
+++ b/consoles/my-joy-images/src/components/toolbar.js
@@ -17,7 +17,7 @@ export const Toolbar = ({
   <Flex justifyBetween alignEnd>
     <FormGroup name="filter" field={Field}>
       <FormLabel>{searchLabel}</FormLabel>
-      <Margin top={0.5}>
+      <Margin top="0.5">
         <Input placeholder={searchPlaceholder} disabled={!searchable} />
       </Margin>
     </FormGroup>
diff --git a/consoles/my-joy-images/src/containers/breadcrumb.js b/consoles/my-joy-images/src/containers/breadcrumb.js
index 8ec67aa7..aedd617b 100644
--- a/consoles/my-joy-images/src/containers/breadcrumb.js
+++ b/consoles/my-joy-images/src/containers/breadcrumb.js
@@ -44,7 +44,7 @@ export default ({ match }) => {
     .filter(Boolean)
     .map(({ name, pathname }) => (
       <BreadcrumbItem key={name} to={pathname} component={Link}>
-        <Margin horizontal={1} vertical={3}>
+        <Margin horizontal="1" vertical="3">
           {name}
         </Margin>
       </BreadcrumbItem>
diff --git a/consoles/my-joy-images/src/containers/create-image/details.js b/consoles/my-joy-images/src/containers/create-image/details.js
index c0e16fad..dcc4c038 100644
--- a/consoles/my-joy-images/src/containers/create-image/details.js
+++ b/consoles/my-joy-images/src/containers/create-image/details.js
@@ -67,12 +67,12 @@ const NameContainer = ({
             onRandomize={handleRandomize}
           />
         ) : name ? (
-          <Margin top={3}>
+          <Margin top="3">
             <H3 bold noMargin>
               {name}
             </H3>
             {version ? (
-              <Margin top={2}>
+              <Margin top="2">
                 <H4 bold noMargin>
                   {version}
                 </H4>
@@ -81,7 +81,7 @@ const NameContainer = ({
             {description ? (
               <Row>
                 <Col xs={12} sm={8}>
-                  <Margin top={1}>
+                  <Margin top="1">
                     <P>{description}</P>
                   </Margin>
                 </Col>
@@ -92,13 +92,13 @@ const NameContainer = ({
       }
     </ReduxForm>
     {expanded ? (
-      <Margin top={4} bottom={7}>
+      <Margin top="4" bottom="7">
         <Button type="button" disabled={!name} onClick={handleNext}>
           Next
         </Button>
       </Margin>
     ) : proceeded ? (
-      <Margin top={4} bottom={7}>
+      <Margin top="4" bottom="7">
         <Button type="button" onClick={handleEdit} secondary>
           Edit
         </Button>
@@ -166,6 +166,7 @@ export default compose(
         dispatch(set({ name: 'create-image-name-randomizing', value: false }));
 
         if (err) {
+          // eslint-disable-next-line no-console
           console.error(err);
           return;
         }
diff --git a/consoles/my-joy-images/src/containers/create-image/tags.js b/consoles/my-joy-images/src/containers/create-image/tags.js
index ce743ef6..092b1fce 100644
--- a/consoles/my-joy-images/src/containers/create-image/tags.js
+++ b/consoles/my-joy-images/src/containers/create-image/tags.js
@@ -6,17 +6,10 @@ import { destroy, reset } from 'redux-form';
 import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
 import get from 'lodash.get';
-import remcalc from 'remcalc';
 import Flex from 'styled-flex-component';
 
-import {
-  TagsIcon,
-  Button,
-  H3,
-  TagList,
-  Divider,
-  KeyValue
-} from 'joyent-ui-toolkit';
+import { TagsIcon, Button, H3, TagList } from 'joyent-ui-toolkit';
+import { KeyValue } from 'joyent-ui-resource-widgets';
 
 import Title from '@components/create-image/title';
 import Description from '@components/description';
@@ -66,7 +59,7 @@ export const Tags = ({
     ) : null}
     {proceeded || expanded ? (
       <Fragment>
-        <Margin bottom={5}>
+        <Margin bottom="5">
           <H3>
             {tags.length} Tag{tags.length === 1 ? '' : 's'}
           </H3>
@@ -102,12 +95,11 @@ export const Tags = ({
               expanded
               onCancel={() => handleChangeAddOpen(false)}
             />
-            <Divider height={remcalc(18)} transparent />
           </Fragment>
         ) : null
       }
     </ReduxForm>
-    <Margin top={1}>
+    <Margin top="1">
       <Flex alignCenter>
         {expanded ? (
           <Button
@@ -118,11 +110,11 @@ export const Tags = ({
             Add Tag
           </Button>
         ) : null}
-        <Margin left={1}>{children}</Margin>
+        <Margin left="1">{children}</Margin>
       </Flex>
     </Margin>
     {proceeded ? (
-      <Margin top={1}>
+      <Margin top="1">
         <Button type="button" onClick={handleEdit} secondary>
           Edit
         </Button>
diff --git a/consoles/my-joy-images/src/containers/create.js b/consoles/my-joy-images/src/containers/create.js
index 1d7682e4..e8b9f6c4 100644
--- a/consoles/my-joy-images/src/containers/create.js
+++ b/consoles/my-joy-images/src/containers/create.js
@@ -1,5 +1,3 @@
-/* eslint-disable camelcase */
-
 import React from 'react';
 import { Margin } from 'styled-components-spacing';
 import ReduxForm from 'declarative-redux-form';
@@ -41,12 +39,12 @@ const Create = ({
 }) => (
   <ViewContainer>
     {loading ? (
-      <Margin top={4}>
+      <Margin top="4">
         <StatusLoader />
       </Margin>
     ) : null}
     {loadingError ? (
-      <Margin top={4}>
+      <Margin top="4">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>{loadingError}</MessageDescription>
@@ -54,7 +52,7 @@ const Create = ({
       </Margin>
     ) : null}
     {!loading && !loadingError ? (
-      <Margin top={4} bottom={5}>
+      <Margin top="4" bottom="5">
         <H2>Create Image</H2>
       </Margin>
     ) : null}
diff --git a/consoles/my-joy-images/src/containers/list.js b/consoles/my-joy-images/src/containers/list.js
index c7ccd8d7..8d98e2ec 100644
--- a/consoles/my-joy-images/src/containers/list.js
+++ b/consoles/my-joy-images/src/containers/list.js
@@ -2,7 +2,6 @@ import React, { Fragment } from 'react';
 import { compose, graphql } from 'react-apollo';
 import ReduxForm from 'declarative-redux-form';
 import { Margin } from 'styled-components-spacing';
-import remcalc from 'remcalc';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import { connect } from 'react-redux';
 import get from 'lodash.get';
@@ -41,22 +40,21 @@ export const List = ({
   handleRemove
 }) => (
   <ViewContainer main>
-    <Margin top={4}>
+    <Margin top="4">
       <ReduxForm form={LIST_TOOLBAR_FORM}>
         {props => <ToolbarForm {...props} actionable={!loading} />}
       </ReduxForm>
     </Margin>
-    <Margin vertical={4}>
+    <Margin vertical="4">
       <Divider />
     </Margin>
     {loading && !images.length ? (
       <Fragment>
-        <Divider height={remcalc(30)} transparent />
         <StatusLoader />
       </Fragment>
     ) : null}
     {error && !images.length && !loading ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -66,7 +64,7 @@ export const List = ({
       </Margin>
     ) : null}
     <Fragment>
-      <Margin bottom={4}>
+      <Margin bottom="4">
         <ReduxForm
           form={LIST_TOGGLE_TYPE_FORM}
           initialValues={{ 'image-type': 'all' }}
diff --git a/consoles/my-joy-images/src/containers/menu.js b/consoles/my-joy-images/src/containers/menu.js
index 345fff8f..4b7ee852 100644
--- a/consoles/my-joy-images/src/containers/menu.js
+++ b/consoles/my-joy-images/src/containers/menu.js
@@ -10,7 +10,7 @@ const SECTIONS = [
 
 export default ({ match }) => {
   const imageId = get(match, 'params.image');
-  const sections = imageId !== '~create' ? SECTIONS : [];
+  const sections = imageId === '~create' ? [] : SECTIONS;
 
   const links = sections.map(({ name, pathname }) => ({
     name,
diff --git a/consoles/my-joy-images/src/containers/summary.js b/consoles/my-joy-images/src/containers/summary.js
index c4a495fd..deb1c97c 100644
--- a/consoles/my-joy-images/src/containers/summary.js
+++ b/consoles/my-joy-images/src/containers/summary.js
@@ -30,7 +30,7 @@ export const Summary = ({
   <ViewContainer main>
     {loading && !image ? <StatusLoader /> : null}
     {error && !loading && !image ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -40,7 +40,7 @@ export const Summary = ({
       </Margin>
     ) : null}
     {mutationError ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
diff --git a/consoles/my-joy-images/src/containers/tags.js b/consoles/my-joy-images/src/containers/tags.js
index 152542ea..60751071 100644
--- a/consoles/my-joy-images/src/containers/tags.js
+++ b/consoles/my-joy-images/src/containers/tags.js
@@ -14,11 +14,11 @@ import {
   H3,
   ViewContainer,
   StatusLoader,
-  Divider,
   Message,
   MessageTitle,
   MessageDescription,
-  TagList
+  TagList,
+  Divider
 } from 'joyent-ui-toolkit';
 
 import { Forms } from '@root/constants';
@@ -63,7 +63,7 @@ export const Tags = ({
       )}
     </ReduxForm>
     {error && !loading && !tags.length ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -73,7 +73,7 @@ export const Tags = ({
       </Margin>
     ) : null}
     {mutationError ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>{mutationError}</MessageDescription>
@@ -88,7 +88,7 @@ export const Tags = ({
     >
       {props =>
         addOpen ? (
-          <Margin bottom={5}>
+          <Margin bottom="5">
             <AddForm
               {...props}
               onToggleExpanded={() => handleToggleAddOpen(!addOpen)}
@@ -98,13 +98,13 @@ export const Tags = ({
         ) : null
       }
     </ReduxForm>
-    {!loading ? (
-      <Margin bottom={5}>
+    {loading ? null : (
+      <Margin bottom="5">
         <H3>
           {tags.length} tag{tags.length === 1 ? '' : 's'}
         </H3>
       </Margin>
-    ) : null}
+    )}
     {loading && !tags.length ? <StatusLoader /> : null}
     <TagList>
       {tags.map(({ id, name, value }) => (
diff --git a/consoles/my-joy-images/src/html.js b/consoles/my-joy-images/src/html.js
index 93f95c79..a6e2d580 100644
--- a/consoles/my-joy-images/src/html.js
+++ b/consoles/my-joy-images/src/html.js
@@ -20,7 +20,7 @@ module.exports = ({
     </head>
     <body {...bodyAttrs}>
       <div id="header" />
-      {!children ? <div id="root" /> : null}
+      {children ? null : <div id="root" />}
       {children}
       <script src="/navigation/static/main.js" />
     </body>
diff --git a/consoles/my-joy-images/src/server-error.js b/consoles/my-joy-images/src/server-error.js
index 9fefa720..6e1a98b2 100644
--- a/consoles/my-joy-images/src/server-error.js
+++ b/consoles/my-joy-images/src/server-error.js
@@ -17,7 +17,7 @@ import Breadcrumb from '@containers/breadcrumb';
 export const Route = () => (
   <ViewContainer main>
     <Divider height={remcalc(30)} transparent />
-    <Margin bottom={5}>
+    <Margin bottom="5">
       <Message error>
         <MessageTitle>Ooops!</MessageTitle>
         <MessageDescription>
diff --git a/consoles/my-joy-images/src/state/validators.js b/consoles/my-joy-images/src/state/validators.js
index d458aa9c..2c9124cd 100644
--- a/consoles/my-joy-images/src/state/validators.js
+++ b/consoles/my-joy-images/src/state/validators.js
@@ -16,7 +16,7 @@ const validateSchema = async (schema, value) => {
     keys(schema),
     async (errors, name) => {
       const msg = await validateField(schema[name], value[name]);
-      return !msg ? errors : assign(errors, { [name]: msg });
+      return msg ? assign(errors, { [name]: msg }) : errors;
     },
     {}
   );
@@ -66,4 +66,4 @@ const Schemas = {
 export const addTag = tag => validateSchema(Schemas.tag, tag);
 
 export const instanceName = ({ name }) =>
-  !name ? null : validateSchema(Schemas.instanceName, { name });
+  name ? validateSchema(Schemas.instanceName, { name }) : null;
diff --git a/consoles/my-joy-instances/.eslintignore b/consoles/my-joy-instances/.eslintignore
deleted file mode 100644
index 27927eba..00000000
--- a/consoles/my-joy-instances/.eslintignore
+++ /dev/null
@@ -1,5 +0,0 @@
-.nyc_output
-coverage
-dist
-build
-lib/app
\ No newline at end of file
diff --git a/consoles/my-joy-instances/.eslintrc b/consoles/my-joy-instances/.eslintrc
deleted file mode 100644
index 435e02c4..00000000
--- a/consoles/my-joy-instances/.eslintrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "extends": "joyent-portal",
-  "rules": {
-    "no-console": 0,
-    "new-cap": 0,
-    "camelcase": 1,
-    "jsx-a11y/href-no-hash": 0,
-    "no-negated-condition": 0
-  }
-}
diff --git a/consoles/my-joy-instances/lib/index.js b/consoles/my-joy-instances/lib/index.js
index 66f99716..de0e0337 100644
--- a/consoles/my-joy-instances/lib/index.js
+++ b/consoles/my-joy-instances/lib/index.js
@@ -16,6 +16,7 @@ exports.register = async server => {
     if (NODE_ENV === 'production') {
       throw err;
     } else {
+      // eslint-disable-next-line no-console
       console.error(err);
     }
   }
diff --git a/consoles/my-joy-instances/package.json b/consoles/my-joy-instances/package.json
index e88f225c..63a85b5c 100644
--- a/consoles/my-joy-instances/package.json
+++ b/consoles/my-joy-instances/package.json
@@ -11,8 +11,6 @@
     "build:lib": "echo 0",
     "build:bundle": "NAMESPACE=instances NODE_ENV=production redrun -p build:frontend build:ssr",
     "prepublish": "NODE_ENV=production redrun build:bundle",
-    "lint": "redrun lint:ci -- --fix",
-    "lint:ci": "NODE_ENV=test eslint . --ext .js --ext .md",
     "test": "DEFAULT_TIMEOUT_INTERVAL=100000 NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'",
     "test:ci": "NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'",
     "build:frontend": "joyent-react-scripts build",
@@ -28,7 +26,6 @@
     "boom": "^7.2.0",
     "bytes": "^3.0.0",
     "clipboard-copy": "^2.0.0",
-    "constant-case": "^2.0.0",
     "cross-fetch": "^2.1.0",
     "date-fns": "^1.29.0",
     "declarative-redux-form": "^2.0.8",
@@ -54,15 +51,13 @@
     "lodash.isfunction": "^3.0.9",
     "lodash.isinteger": "^4.0.4",
     "lodash.isnan": "^3.0.2",
-    "lodash.omit": "^4.5.0",
     "lodash.reduce": "^4.6.0",
     "lodash.reverse": "^4.0.1",
     "lodash.some": "^4.6.0",
     "lodash.sortby": "^4.7.0",
-    "lodash.uniqby": "^4.7.0",
     "lodash.values": "^4.3.0",
     "param-case": "^2.1.1",
-    "query-string": "^6.0.0",
+    "query-string": "^6.1.0",
     "react": "^16.3.1",
     "react-apollo": "^2.1.2",
     "react-dom": "^16.3.1",
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 90a13f9c..5326a2ea 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
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <InstanceList /> without throwing 1`] = `
-.c24 {
+.c26 {
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
   text-decoration-skip: objects;
@@ -47,20 +47,31 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   font: inherit;
 }
 
-.c23 {
+.c25 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
 }
 
-.c19 {
+.c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c19:hover {
+.c21:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
+.c11 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
+.c19 {
+  display: inline-block;
+  margin-left: 0.375rem;
+  margin-right: 0.375rem;
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -193,20 +204,20 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c16 {
+.c17 {
   width: 100%;
   background: rgb(250,250,250);
 }
 
-.c16 th:first-child {
+.c17 th:first-child {
   border-bottom-left-radius: 0.25rem;
 }
 
-.c16 th:last-child {
+.c17 th:last-child {
   border-bottom-right-radius: 0.25rem;
 }
 
-.c16 th {
+.c17 th {
   border-top-width: 0;
 }
 
@@ -223,7 +234,7 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   border-top-right-radius: 0.25rem;
 }
 
-.c15 {
+.c16 {
   width: 100%;
 }
 
@@ -234,7 +245,7 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -286,7 +297,7 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c11 {
+.c12 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -310,38 +321,6 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c11:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c11:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c12 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
 .c12:not(:first-child) {
   border-left-width: 0;
 }
@@ -391,8 +370,15 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -407,7 +393,32 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c17 {
+.c15 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c15:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c15:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c18 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -425,11 +436,11 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   border-bottom-width: 0.0625rem !important;
 }
 
-.c17:not(:first-child) {
+.c18:not(:first-child) {
   border-left-width: 0;
 }
 
-.c17:not(:last-child) {
+.c18:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -453,12 +464,12 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c18 {
+.c20 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c22 {
+.c24 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   -webkit-text-decoration: none;
@@ -470,27 +481,27 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   color: rgb(255,255,255);
 }
 
-.c20 {
+.c22 {
   margin-right: 0.1875rem;
 }
 
-.c25 {
+.c27 {
   margin-left: 0.1875rem;
 }
 
-.c21 {
+.c23 {
   margin: 0 0.1875rem;
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c12 {
+  .c13 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c13 {
+  .c14 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -562,25 +573,29 @@ exports[`renders <InstanceList /> without throwing 1`] = `
           <span>
             Name 
           </span>
-          <svg
-            height="6"
-            style={
-              Object {
-                "transform": "rotate(180deg)",
-              }
-            }
-            viewBox="0 0 9.6 6"
-            width="9.6"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            className="c11"
           >
-            <path
-              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-              fill="rgb(73, 73, 73)"
-            />
-          </svg>
+            <svg
+              height="6"
+              style={
+                Object {
+                  "transform": "rotate(180deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(73, 73, 73)"
+              />
+            </svg>
+          </div>
         </th>
         <th
-          className="c11"
+          className="c12"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -591,7 +606,7 @@ exports[`renders <InstanceList /> without throwing 1`] = `
           </span>
         </th>
         <th
-          className="c12"
+          className="c13"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -602,7 +617,7 @@ exports[`renders <InstanceList /> without throwing 1`] = `
           </span>
         </th>
         <th
-          className="c13"
+          className="c14"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -613,7 +628,7 @@ exports[`renders <InstanceList /> without throwing 1`] = `
           </span>
         </th>
         <th
-          className="c14"
+          className="c15"
           disabled={undefined}
           name="th"
           selected={undefined}
@@ -621,13 +636,13 @@ exports[`renders <InstanceList /> without throwing 1`] = `
       </tr>
     </thead>
     <tbody
-      className="c15"
+      className="c16"
       disabled={undefined}
       name="tbody"
       selected={undefined}
     />
     <tfoot
-      className="c16"
+      className="c17"
       disabled={undefined}
       name="tfoot"
       selected={undefined}
@@ -639,77 +654,89 @@ exports[`renders <InstanceList /> without throwing 1`] = `
         selected={undefined}
       >
         <th
-          className="c17"
+          className="c18"
           colSpan="6"
           disabled={undefined}
           name="th"
           selected={undefined}
         >
-          <a
-            active={undefined}
-            activeClassName="active"
-            className="c18 c19"
-            disabled={false}
-            secondary={false}
-            to="/?limit=0&offset=0"
+          <div
+            className="c19"
           >
-            <svg
-              className="c20"
-              height="6"
-              innerRef={undefined}
-              left={true}
-              style={
-                Object {
-                  "transform": "rotate(90deg)",
-                }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+            <a
+              active={undefined}
+              activeClassName="active"
+              className="c20 c21"
+              disabled={false}
+              secondary={false}
+              to="/?limit=0&offset=0"
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(59, 70, 204)"
-              />
-            </svg>
-            Prev
-          </a>
-          <a
-            className="c21 c22 c19 c23 c24"
-            disabled={undefined}
-            to={null}
-          >
-            NaN
-          </a>
-          <a
-            active={undefined}
-            activeClassName="active"
-            className="c18 c19"
-            disabled={false}
-            secondary={false}
-            to="/?limit=0&offset=0"
-          >
-            Next
-            <svg
-              className="c25"
-              height="6"
-              innerRef={undefined}
-              right={true}
-              style={
-                Object {
-                  "transform": "rotate(-90deg)",
+              <svg
+                className="c22"
+                height="6"
+                innerRef={undefined}
+                left={true}
+                style={
+                  Object {
+                    "transform": "rotate(90deg)",
+                  }
                 }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(59, 70, 204)"
+                />
+              </svg>
+              Prev
+            </a>
+          </div>
+          <div
+            className="c19"
+          >
+            <a
+              className="c23 c24 c21 c25 c26"
+              disabled={undefined}
+              to={null}
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(59, 70, 204)"
-              />
-            </svg>
-          </a>
+              NaN
+            </a>
+          </div>
+          <div
+            className="c19"
+          >
+            <a
+              active={undefined}
+              activeClassName="active"
+              className="c20 c21"
+              disabled={false}
+              secondary={false}
+              to="/?limit=0&offset=0"
+            >
+              Next
+              <svg
+                className="c27"
+                height="6"
+                innerRef={undefined}
+                right={true}
+                style={
+                  Object {
+                    "transform": "rotate(-90deg)",
+                  }
+                }
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(59, 70, 204)"
+                />
+              </svg>
+            </a>
+          </div>
         </th>
       </tr>
     </tfoot>
@@ -718,7 +745,7 @@ exports[`renders <InstanceList /> without throwing 1`] = `
 `;
 
 exports[`renders <InstanceList allSelected /> without throwing 1`] = `
-.c24 {
+.c26 {
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
   text-decoration-skip: objects;
@@ -764,20 +791,31 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   font: inherit;
 }
 
-.c23 {
+.c25 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
 }
 
-.c19 {
+.c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c19:hover {
+.c21:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
+.c11 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
+.c19 {
+  display: inline-block;
+  margin-left: 0.375rem;
+  margin-right: 0.375rem;
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -910,20 +948,20 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c16 {
+.c17 {
   width: 100%;
   background: rgb(250,250,250);
 }
 
-.c16 th:first-child {
+.c17 th:first-child {
   border-bottom-left-radius: 0.25rem;
 }
 
-.c16 th:last-child {
+.c17 th:last-child {
   border-bottom-right-radius: 0.25rem;
 }
 
-.c16 th {
+.c17 th {
   border-top-width: 0;
 }
 
@@ -940,7 +978,7 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   border-top-right-radius: 0.25rem;
 }
 
-.c15 {
+.c16 {
   width: 100%;
 }
 
@@ -951,7 +989,7 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -1003,7 +1041,7 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c11 {
+.c12 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -1027,38 +1065,6 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c11:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c11:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c12 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
 .c12:not(:first-child) {
   border-left-width: 0;
 }
@@ -1108,8 +1114,15 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -1124,7 +1137,32 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c17 {
+.c15 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c15:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c15:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c18 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -1142,11 +1180,11 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   border-bottom-width: 0.0625rem !important;
 }
 
-.c17:not(:first-child) {
+.c18:not(:first-child) {
   border-left-width: 0;
 }
 
-.c17:not(:last-child) {
+.c18:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -1170,12 +1208,12 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c18 {
+.c20 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c22 {
+.c24 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   -webkit-text-decoration: none;
@@ -1187,27 +1225,27 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   color: rgb(255,255,255);
 }
 
-.c20 {
+.c22 {
   margin-right: 0.1875rem;
 }
 
-.c25 {
+.c27 {
   margin-left: 0.1875rem;
 }
 
-.c21 {
+.c23 {
   margin: 0 0.1875rem;
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c12 {
+  .c13 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c13 {
+  .c14 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -1279,25 +1317,29 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
           <span>
             Name 
           </span>
-          <svg
-            height="6"
-            style={
-              Object {
-                "transform": "rotate(180deg)",
-              }
-            }
-            viewBox="0 0 9.6 6"
-            width="9.6"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            className="c11"
           >
-            <path
-              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-              fill="rgb(73, 73, 73)"
-            />
-          </svg>
+            <svg
+              height="6"
+              style={
+                Object {
+                  "transform": "rotate(180deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(73, 73, 73)"
+              />
+            </svg>
+          </div>
         </th>
         <th
-          className="c11"
+          className="c12"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -1308,7 +1350,7 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
           </span>
         </th>
         <th
-          className="c12"
+          className="c13"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -1319,7 +1361,7 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
           </span>
         </th>
         <th
-          className="c13"
+          className="c14"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -1330,7 +1372,7 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
           </span>
         </th>
         <th
-          className="c14"
+          className="c15"
           disabled={undefined}
           name="th"
           selected={undefined}
@@ -1338,13 +1380,13 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
       </tr>
     </thead>
     <tbody
-      className="c15"
+      className="c16"
       disabled={undefined}
       name="tbody"
       selected={undefined}
     />
     <tfoot
-      className="c16"
+      className="c17"
       disabled={undefined}
       name="tfoot"
       selected={undefined}
@@ -1356,77 +1398,89 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
         selected={undefined}
       >
         <th
-          className="c17"
+          className="c18"
           colSpan="6"
           disabled={undefined}
           name="th"
           selected={undefined}
         >
-          <a
-            active={undefined}
-            activeClassName="active"
-            className="c18 c19"
-            disabled={false}
-            secondary={false}
-            to="/?limit=0&offset=0"
+          <div
+            className="c19"
           >
-            <svg
-              className="c20"
-              height="6"
-              innerRef={undefined}
-              left={true}
-              style={
-                Object {
-                  "transform": "rotate(90deg)",
-                }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+            <a
+              active={undefined}
+              activeClassName="active"
+              className="c20 c21"
+              disabled={false}
+              secondary={false}
+              to="/?limit=0&offset=0"
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(59, 70, 204)"
-              />
-            </svg>
-            Prev
-          </a>
-          <a
-            className="c21 c22 c19 c23 c24"
-            disabled={undefined}
-            to={null}
-          >
-            NaN
-          </a>
-          <a
-            active={undefined}
-            activeClassName="active"
-            className="c18 c19"
-            disabled={false}
-            secondary={false}
-            to="/?limit=0&offset=0"
-          >
-            Next
-            <svg
-              className="c25"
-              height="6"
-              innerRef={undefined}
-              right={true}
-              style={
-                Object {
-                  "transform": "rotate(-90deg)",
+              <svg
+                className="c22"
+                height="6"
+                innerRef={undefined}
+                left={true}
+                style={
+                  Object {
+                    "transform": "rotate(90deg)",
+                  }
                 }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(59, 70, 204)"
+                />
+              </svg>
+              Prev
+            </a>
+          </div>
+          <div
+            className="c19"
+          >
+            <a
+              className="c23 c24 c21 c25 c26"
+              disabled={undefined}
+              to={null}
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(59, 70, 204)"
-              />
-            </svg>
-          </a>
+              NaN
+            </a>
+          </div>
+          <div
+            className="c19"
+          >
+            <a
+              active={undefined}
+              activeClassName="active"
+              className="c20 c21"
+              disabled={false}
+              secondary={false}
+              to="/?limit=0&offset=0"
+            >
+              Next
+              <svg
+                className="c27"
+                height="6"
+                innerRef={undefined}
+                right={true}
+                style={
+                  Object {
+                    "transform": "rotate(-90deg)",
+                  }
+                }
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(59, 70, 204)"
+                />
+              </svg>
+            </a>
+          </div>
         </th>
       </tr>
     </tfoot>
@@ -1435,7 +1489,7 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
 `;
 
 exports[`renders <InstanceList sortBy /> without throwing 1`] = `
-.c24 {
+.c26 {
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
   text-decoration-skip: objects;
@@ -1481,20 +1535,31 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   font: inherit;
 }
 
-.c23 {
+.c25 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
 }
 
-.c19 {
+.c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c19:hover {
+.c21:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
+.c12 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
+.c19 {
+  display: inline-block;
+  margin-left: 0.375rem;
+  margin-right: 0.375rem;
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -1627,20 +1692,20 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c16 {
+.c17 {
   width: 100%;
   background: rgb(250,250,250);
 }
 
-.c16 th:first-child {
+.c17 th:first-child {
   border-bottom-left-radius: 0.25rem;
 }
 
-.c16 th:last-child {
+.c17 th:last-child {
   border-bottom-right-radius: 0.25rem;
 }
 
-.c16 th {
+.c17 th {
   border-top-width: 0;
 }
 
@@ -1657,7 +1722,7 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   border-top-right-radius: 0.25rem;
 }
 
-.c15 {
+.c16 {
   width: 100%;
 }
 
@@ -1668,7 +1733,7 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -1688,38 +1753,6 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c12 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
-.c12:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c12:not(:last-child) {
-  border-right-width: 0;
-}
-
 .c13 {
   border-width: 0.0625rem;
   border-style: solid;
@@ -1761,8 +1794,15 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -1777,7 +1817,32 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c17 {
+.c15 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c15:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c15:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c18 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -1795,11 +1860,11 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   border-bottom-width: 0.0625rem !important;
 }
 
-.c17:not(:first-child) {
+.c18:not(:first-child) {
   border-left-width: 0;
 }
 
-.c17:not(:last-child) {
+.c18:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -1887,12 +1952,12 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c18 {
+.c20 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c22 {
+.c24 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   -webkit-text-decoration: none;
@@ -1904,27 +1969,27 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   color: rgb(255,255,255);
 }
 
-.c20 {
+.c22 {
   margin-right: 0.1875rem;
 }
 
-.c25 {
+.c27 {
   margin-left: 0.1875rem;
 }
 
-.c21 {
+.c23 {
   margin: 0 0.1875rem;
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c12 {
+  .c13 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c13 {
+  .c14 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -2007,25 +2072,29 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
           <span>
             Status 
           </span>
-          <svg
-            height="6"
-            style={
-              Object {
-                "transform": "rotate(180deg)",
-              }
-            }
-            viewBox="0 0 9.6 6"
-            width="9.6"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            className="c12"
           >
-            <path
-              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-              fill="rgb(73, 73, 73)"
-            />
-          </svg>
+            <svg
+              height="6"
+              style={
+                Object {
+                  "transform": "rotate(180deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(73, 73, 73)"
+              />
+            </svg>
+          </div>
         </th>
         <th
-          className="c12"
+          className="c13"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -2036,7 +2105,7 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
           </span>
         </th>
         <th
-          className="c13"
+          className="c14"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -2047,7 +2116,7 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
           </span>
         </th>
         <th
-          className="c14"
+          className="c15"
           disabled={undefined}
           name="th"
           selected={undefined}
@@ -2055,13 +2124,13 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
       </tr>
     </thead>
     <tbody
-      className="c15"
+      className="c16"
       disabled={undefined}
       name="tbody"
       selected={undefined}
     />
     <tfoot
-      className="c16"
+      className="c17"
       disabled={undefined}
       name="tfoot"
       selected={undefined}
@@ -2073,77 +2142,89 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
         selected={undefined}
       >
         <th
-          className="c17"
+          className="c18"
           colSpan="6"
           disabled={undefined}
           name="th"
           selected={undefined}
         >
-          <a
-            active={undefined}
-            activeClassName="active"
-            className="c18 c19"
-            disabled={false}
-            secondary={false}
-            to="/?limit=0&offset=0"
+          <div
+            className="c19"
           >
-            <svg
-              className="c20"
-              height="6"
-              innerRef={undefined}
-              left={true}
-              style={
-                Object {
-                  "transform": "rotate(90deg)",
-                }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+            <a
+              active={undefined}
+              activeClassName="active"
+              className="c20 c21"
+              disabled={false}
+              secondary={false}
+              to="/?limit=0&offset=0"
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(59, 70, 204)"
-              />
-            </svg>
-            Prev
-          </a>
-          <a
-            className="c21 c22 c19 c23 c24"
-            disabled={undefined}
-            to={null}
-          >
-            NaN
-          </a>
-          <a
-            active={undefined}
-            activeClassName="active"
-            className="c18 c19"
-            disabled={false}
-            secondary={false}
-            to="/?limit=0&offset=0"
-          >
-            Next
-            <svg
-              className="c25"
-              height="6"
-              innerRef={undefined}
-              right={true}
-              style={
-                Object {
-                  "transform": "rotate(-90deg)",
+              <svg
+                className="c22"
+                height="6"
+                innerRef={undefined}
+                left={true}
+                style={
+                  Object {
+                    "transform": "rotate(90deg)",
+                  }
                 }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(59, 70, 204)"
+                />
+              </svg>
+              Prev
+            </a>
+          </div>
+          <div
+            className="c19"
+          >
+            <a
+              className="c23 c24 c21 c25 c26"
+              disabled={undefined}
+              to={null}
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(59, 70, 204)"
-              />
-            </svg>
-          </a>
+              NaN
+            </a>
+          </div>
+          <div
+            className="c19"
+          >
+            <a
+              active={undefined}
+              activeClassName="active"
+              className="c20 c21"
+              disabled={false}
+              secondary={false}
+              to="/?limit=0&offset=0"
+            >
+              Next
+              <svg
+                className="c27"
+                height="6"
+                innerRef={undefined}
+                right={true}
+                style={
+                  Object {
+                    "transform": "rotate(-90deg)",
+                  }
+                }
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(59, 70, 204)"
+                />
+              </svg>
+            </a>
+          </div>
         </th>
       </tr>
     </tfoot>
@@ -2152,7 +2233,7 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
 `;
 
 exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
-.c24 {
+.c26 {
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
   text-decoration-skip: objects;
@@ -2198,20 +2279,31 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   font: inherit;
 }
 
-.c23 {
+.c25 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
 }
 
-.c19 {
+.c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c19:hover {
+.c21:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
+.c12 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
+.c19 {
+  display: inline-block;
+  margin-left: 0.375rem;
+  margin-right: 0.375rem;
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -2344,20 +2436,20 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c16 {
+.c17 {
   width: 100%;
   background: rgb(250,250,250);
 }
 
-.c16 th:first-child {
+.c17 th:first-child {
   border-bottom-left-radius: 0.25rem;
 }
 
-.c16 th:last-child {
+.c17 th:last-child {
   border-bottom-right-radius: 0.25rem;
 }
 
-.c16 th {
+.c17 th {
   border-top-width: 0;
 }
 
@@ -2374,7 +2466,7 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   border-top-right-radius: 0.25rem;
 }
 
-.c15 {
+.c16 {
   width: 100%;
 }
 
@@ -2385,7 +2477,7 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -2405,38 +2497,6 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c12 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
-.c12:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c12:not(:last-child) {
-  border-right-width: 0;
-}
-
 .c13 {
   border-width: 0.0625rem;
   border-style: solid;
@@ -2478,8 +2538,15 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -2494,7 +2561,32 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c17 {
+.c15 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c15:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c15:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c18 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -2512,11 +2604,11 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   border-bottom-width: 0.0625rem !important;
 }
 
-.c17:not(:first-child) {
+.c18:not(:first-child) {
   border-left-width: 0;
 }
 
-.c17:not(:last-child) {
+.c18:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -2604,12 +2696,12 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c18 {
+.c20 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c22 {
+.c24 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   -webkit-text-decoration: none;
@@ -2621,27 +2713,27 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   color: rgb(255,255,255);
 }
 
-.c20 {
+.c22 {
   margin-right: 0.1875rem;
 }
 
-.c25 {
+.c27 {
   margin-left: 0.1875rem;
 }
 
-.c21 {
+.c23 {
   margin: 0 0.1875rem;
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c12 {
+  .c13 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c13 {
+  .c14 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -2724,25 +2816,29 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
           <span>
             Status 
           </span>
-          <svg
-            height="6"
-            style={
-              Object {
-                "transform": "rotate(0deg)",
-              }
-            }
-            viewBox="0 0 9.6 6"
-            width="9.6"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            className="c12"
           >
-            <path
-              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-              fill="rgb(73, 73, 73)"
-            />
-          </svg>
+            <svg
+              height="6"
+              style={
+                Object {
+                  "transform": "rotate(0deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(73, 73, 73)"
+              />
+            </svg>
+          </div>
         </th>
         <th
-          className="c12"
+          className="c13"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -2753,7 +2849,7 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
           </span>
         </th>
         <th
-          className="c13"
+          className="c14"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -2764,7 +2860,7 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
           </span>
         </th>
         <th
-          className="c14"
+          className="c15"
           disabled={undefined}
           name="th"
           selected={undefined}
@@ -2772,13 +2868,13 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
       </tr>
     </thead>
     <tbody
-      className="c15"
+      className="c16"
       disabled={undefined}
       name="tbody"
       selected={undefined}
     />
     <tfoot
-      className="c16"
+      className="c17"
       disabled={undefined}
       name="tfoot"
       selected={undefined}
@@ -2790,77 +2886,89 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
         selected={undefined}
       >
         <th
-          className="c17"
+          className="c18"
           colSpan="6"
           disabled={undefined}
           name="th"
           selected={undefined}
         >
-          <a
-            active={undefined}
-            activeClassName="active"
-            className="c18 c19"
-            disabled={false}
-            secondary={false}
-            to="/?limit=0&offset=0"
+          <div
+            className="c19"
           >
-            <svg
-              className="c20"
-              height="6"
-              innerRef={undefined}
-              left={true}
-              style={
-                Object {
-                  "transform": "rotate(90deg)",
-                }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+            <a
+              active={undefined}
+              activeClassName="active"
+              className="c20 c21"
+              disabled={false}
+              secondary={false}
+              to="/?limit=0&offset=0"
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(59, 70, 204)"
-              />
-            </svg>
-            Prev
-          </a>
-          <a
-            className="c21 c22 c19 c23 c24"
-            disabled={undefined}
-            to={null}
-          >
-            NaN
-          </a>
-          <a
-            active={undefined}
-            activeClassName="active"
-            className="c18 c19"
-            disabled={false}
-            secondary={false}
-            to="/?limit=0&offset=0"
-          >
-            Next
-            <svg
-              className="c25"
-              height="6"
-              innerRef={undefined}
-              right={true}
-              style={
-                Object {
-                  "transform": "rotate(-90deg)",
+              <svg
+                className="c22"
+                height="6"
+                innerRef={undefined}
+                left={true}
+                style={
+                  Object {
+                    "transform": "rotate(90deg)",
+                  }
                 }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(59, 70, 204)"
+                />
+              </svg>
+              Prev
+            </a>
+          </div>
+          <div
+            className="c19"
+          >
+            <a
+              className="c23 c24 c21 c25 c26"
+              disabled={undefined}
+              to={null}
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(59, 70, 204)"
-              />
-            </svg>
-          </a>
+              NaN
+            </a>
+          </div>
+          <div
+            className="c19"
+          >
+            <a
+              active={undefined}
+              activeClassName="active"
+              className="c20 c21"
+              disabled={false}
+              secondary={false}
+              to="/?limit=0&offset=0"
+            >
+              Next
+              <svg
+                className="c27"
+                height="6"
+                innerRef={undefined}
+                right={true}
+                style={
+                  Object {
+                    "transform": "rotate(-90deg)",
+                  }
+                }
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(59, 70, 204)"
+                />
+              </svg>
+            </a>
+          </div>
         </th>
       </tr>
     </tfoot>
@@ -2869,7 +2977,7 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
 `;
 
 exports[`renders <InstanceList submitting /> without throwing 1`] = `
-.c24 {
+.c26 {
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
   text-decoration-skip: objects;
@@ -2915,20 +3023,31 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   font: inherit;
 }
 
-.c23 {
+.c25 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
 }
 
-.c19 {
+.c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c19:hover {
+.c21:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
+.c11 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
+.c19 {
+  display: inline-block;
+  margin-left: 0.375rem;
+  margin-right: 0.375rem;
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -3061,20 +3180,20 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c16 {
+.c17 {
   width: 100%;
   background: rgb(250,250,250);
 }
 
-.c16 th:first-child {
+.c17 th:first-child {
   border-bottom-left-radius: 0.25rem;
 }
 
-.c16 th:last-child {
+.c17 th:last-child {
   border-bottom-right-radius: 0.25rem;
 }
 
-.c16 th {
+.c17 th {
   border-top-width: 0;
 }
 
@@ -3091,7 +3210,7 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   border-top-right-radius: 0.25rem;
 }
 
-.c15 {
+.c16 {
   width: 100%;
 }
 
@@ -3102,7 +3221,7 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -3154,7 +3273,7 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c11 {
+.c12 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -3178,38 +3297,6 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c11:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c11:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c12 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
 .c12:not(:first-child) {
   border-left-width: 0;
 }
@@ -3259,8 +3346,15 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -3275,7 +3369,32 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c17 {
+.c15 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c15:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c15:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c18 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -3293,11 +3412,11 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   border-bottom-width: 0.0625rem !important;
 }
 
-.c17:not(:first-child) {
+.c18:not(:first-child) {
   border-left-width: 0;
 }
 
-.c17:not(:last-child) {
+.c18:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -3321,12 +3440,12 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c18 {
+.c20 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c22 {
+.c24 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   -webkit-text-decoration: none;
@@ -3338,27 +3457,27 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   color: rgb(255,255,255);
 }
 
-.c20 {
+.c22 {
   margin-right: 0.1875rem;
 }
 
-.c25 {
+.c27 {
   margin-left: 0.1875rem;
 }
 
-.c21 {
+.c23 {
   margin: 0 0.1875rem;
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c12 {
+  .c13 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c13 {
+  .c14 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -3430,25 +3549,29 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
           <span>
             Name 
           </span>
-          <svg
-            height="6"
-            style={
-              Object {
-                "transform": "rotate(180deg)",
-              }
-            }
-            viewBox="0 0 9.6 6"
-            width="9.6"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            className="c11"
           >
-            <path
-              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-              fill="rgb(73, 73, 73)"
-            />
-          </svg>
+            <svg
+              height="6"
+              style={
+                Object {
+                  "transform": "rotate(180deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(73, 73, 73)"
+              />
+            </svg>
+          </div>
         </th>
         <th
-          className="c11"
+          className="c12"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -3459,7 +3582,7 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
           </span>
         </th>
         <th
-          className="c12"
+          className="c13"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -3470,7 +3593,7 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
           </span>
         </th>
         <th
-          className="c13"
+          className="c14"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -3481,7 +3604,7 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
           </span>
         </th>
         <th
-          className="c14"
+          className="c15"
           disabled={undefined}
           name="th"
           selected={undefined}
@@ -3489,13 +3612,13 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
       </tr>
     </thead>
     <tbody
-      className="c15"
+      className="c16"
       disabled={undefined}
       name="tbody"
       selected={undefined}
     />
     <tfoot
-      className="c16"
+      className="c17"
       disabled={undefined}
       name="tfoot"
       selected={undefined}
@@ -3507,77 +3630,89 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
         selected={undefined}
       >
         <th
-          className="c17"
+          className="c18"
           colSpan="6"
           disabled={undefined}
           name="th"
           selected={undefined}
         >
-          <a
-            active={undefined}
-            activeClassName="active"
-            className="c18 c19"
-            disabled={false}
-            secondary={false}
-            to="/?limit=0&offset=0"
+          <div
+            className="c19"
           >
-            <svg
-              className="c20"
-              height="6"
-              innerRef={undefined}
-              left={true}
-              style={
-                Object {
-                  "transform": "rotate(90deg)",
-                }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+            <a
+              active={undefined}
+              activeClassName="active"
+              className="c20 c21"
+              disabled={false}
+              secondary={false}
+              to="/?limit=0&offset=0"
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(59, 70, 204)"
-              />
-            </svg>
-            Prev
-          </a>
-          <a
-            className="c21 c22 c19 c23 c24"
-            disabled={undefined}
-            to={null}
-          >
-            NaN
-          </a>
-          <a
-            active={undefined}
-            activeClassName="active"
-            className="c18 c19"
-            disabled={false}
-            secondary={false}
-            to="/?limit=0&offset=0"
-          >
-            Next
-            <svg
-              className="c25"
-              height="6"
-              innerRef={undefined}
-              right={true}
-              style={
-                Object {
-                  "transform": "rotate(-90deg)",
+              <svg
+                className="c22"
+                height="6"
+                innerRef={undefined}
+                left={true}
+                style={
+                  Object {
+                    "transform": "rotate(90deg)",
+                  }
                 }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(59, 70, 204)"
+                />
+              </svg>
+              Prev
+            </a>
+          </div>
+          <div
+            className="c19"
+          >
+            <a
+              className="c23 c24 c21 c25 c26"
+              disabled={undefined}
+              to={null}
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(59, 70, 204)"
-              />
-            </svg>
-          </a>
+              NaN
+            </a>
+          </div>
+          <div
+            className="c19"
+          >
+            <a
+              active={undefined}
+              activeClassName="active"
+              className="c20 c21"
+              disabled={false}
+              secondary={false}
+              to="/?limit=0&offset=0"
+            >
+              Next
+              <svg
+                className="c27"
+                height="6"
+                innerRef={undefined}
+                right={true}
+                style={
+                  Object {
+                    "transform": "rotate(-90deg)",
+                  }
+                }
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(59, 70, 204)"
+                />
+              </svg>
+            </a>
+          </div>
         </th>
       </tr>
     </tfoot>
@@ -3586,7 +3721,7 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
 `;
 
 exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] = `
-.c24 {
+.c26 {
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
   text-decoration-skip: objects;
@@ -3632,20 +3767,31 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   font: inherit;
 }
 
-.c23 {
+.c25 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
 }
 
-.c19 {
+.c21 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c19:hover {
+.c21:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
+.c11 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
+.c19 {
+  display: inline-block;
+  margin-left: 0.375rem;
+  margin-right: 0.375rem;
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -3778,20 +3924,20 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   max-width: 100%;
 }
 
-.c16 {
+.c17 {
   width: 100%;
   background: rgb(250,250,250);
 }
 
-.c16 th:first-child {
+.c17 th:first-child {
   border-bottom-left-radius: 0.25rem;
 }
 
-.c16 th:last-child {
+.c17 th:last-child {
   border-bottom-right-radius: 0.25rem;
 }
 
-.c16 th {
+.c17 th {
   border-top-width: 0;
 }
 
@@ -3808,7 +3954,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   border-top-right-radius: 0.25rem;
 }
 
-.c15 {
+.c16 {
   width: 100%;
 }
 
@@ -3819,7 +3965,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -3871,7 +4017,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   border-right-width: 0;
 }
 
-.c11 {
+.c12 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -3895,38 +4041,6 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   border-bottom-width: 0;
 }
 
-.c11:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c11:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c12 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
 .c12:not(:first-child) {
   border-left-width: 0;
 }
@@ -3976,8 +4090,15 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -3992,7 +4113,32 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   border-right-width: 0;
 }
 
-.c17 {
+.c15 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c15:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c15:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c18 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -4010,11 +4156,11 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   border-bottom-width: 0.0625rem !important;
 }
 
-.c17:not(:first-child) {
+.c18:not(:first-child) {
   border-left-width: 0;
 }
 
-.c17:not(:last-child) {
+.c18:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -4038,12 +4184,12 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   border-bottom-width: 0.0625rem;
 }
 
-.c18 {
+.c20 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c22 {
+.c24 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   -webkit-text-decoration: none;
@@ -4055,27 +4201,27 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   color: rgb(255,255,255);
 }
 
-.c20 {
+.c22 {
   margin-right: 0.1875rem;
 }
 
-.c25 {
+.c27 {
   margin-left: 0.1875rem;
 }
 
-.c21 {
+.c23 {
   margin: 0 0.1875rem;
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c12 {
+  .c13 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c13 {
+  .c14 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -4147,25 +4293,29 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
           <span>
             Name 
           </span>
-          <svg
-            height="6"
-            style={
-              Object {
-                "transform": "rotate(180deg)",
-              }
-            }
-            viewBox="0 0 9.6 6"
-            width="9.6"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            className="c11"
           >
-            <path
-              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-              fill="rgb(73, 73, 73)"
-            />
-          </svg>
+            <svg
+              height="6"
+              style={
+                Object {
+                  "transform": "rotate(180deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(73, 73, 73)"
+              />
+            </svg>
+          </div>
         </th>
         <th
-          className="c11"
+          className="c12"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -4176,7 +4326,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
           </span>
         </th>
         <th
-          className="c12"
+          className="c13"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -4187,7 +4337,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
           </span>
         </th>
         <th
-          className="c13"
+          className="c14"
           disabled={undefined}
           name="th"
           onClick={[Function]}
@@ -4198,7 +4348,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
           </span>
         </th>
         <th
-          className="c14"
+          className="c15"
           disabled={undefined}
           name="th"
           selected={undefined}
@@ -4206,7 +4356,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
       </tr>
     </thead>
     <tbody
-      className="c15"
+      className="c16"
       disabled={undefined}
       name="tbody"
       selected={undefined}
@@ -4216,7 +4366,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
       </span>
     </tbody>
     <tfoot
-      className="c16"
+      className="c17"
       disabled={undefined}
       name="tfoot"
       selected={undefined}
@@ -4228,77 +4378,89 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
         selected={undefined}
       >
         <th
-          className="c17"
+          className="c18"
           colSpan="6"
           disabled={undefined}
           name="th"
           selected={undefined}
         >
-          <a
-            active={undefined}
-            activeClassName="active"
-            className="c18 c19"
-            disabled={false}
-            secondary={false}
-            to="/?limit=0&offset=0"
+          <div
+            className="c19"
           >
-            <svg
-              className="c20"
-              height="6"
-              innerRef={undefined}
-              left={true}
-              style={
-                Object {
-                  "transform": "rotate(90deg)",
-                }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+            <a
+              active={undefined}
+              activeClassName="active"
+              className="c20 c21"
+              disabled={false}
+              secondary={false}
+              to="/?limit=0&offset=0"
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(59, 70, 204)"
-              />
-            </svg>
-            Prev
-          </a>
-          <a
-            className="c21 c22 c19 c23 c24"
-            disabled={undefined}
-            to={null}
-          >
-            NaN
-          </a>
-          <a
-            active={undefined}
-            activeClassName="active"
-            className="c18 c19"
-            disabled={false}
-            secondary={false}
-            to="/?limit=0&offset=0"
-          >
-            Next
-            <svg
-              className="c25"
-              height="6"
-              innerRef={undefined}
-              right={true}
-              style={
-                Object {
-                  "transform": "rotate(-90deg)",
+              <svg
+                className="c22"
+                height="6"
+                innerRef={undefined}
+                left={true}
+                style={
+                  Object {
+                    "transform": "rotate(90deg)",
+                  }
                 }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(59, 70, 204)"
+                />
+              </svg>
+              Prev
+            </a>
+          </div>
+          <div
+            className="c19"
+          >
+            <a
+              className="c23 c24 c21 c25 c26"
+              disabled={undefined}
+              to={null}
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(59, 70, 204)"
-              />
-            </svg>
-          </a>
+              NaN
+            </a>
+          </div>
+          <div
+            className="c19"
+          >
+            <a
+              active={undefined}
+              activeClassName="active"
+              className="c20 c21"
+              disabled={false}
+              secondary={false}
+              to="/?limit=0&offset=0"
+            >
+              Next
+              <svg
+                className="c27"
+                height="6"
+                innerRef={undefined}
+                right={true}
+                style={
+                  Object {
+                    "transform": "rotate(-90deg)",
+                  }
+                }
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(59, 70, 204)"
+                />
+              </svg>
+            </a>
+          </div>
         </th>
       </tr>
     </tfoot>
@@ -4347,17 +4509,17 @@ exports[`renders <Item /> without throwing 1`] = `
   font: inherit;
 }
 
-.c11 {
+.c12 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c11:hover {
+.c12:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c12 {
+.c13 {
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 50%;
@@ -4367,7 +4529,7 @@ exports[`renders <Item /> without throwing 1`] = `
   margin-left: 0rem;
 }
 
-.c16 {
+.c17 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -4385,7 +4547,7 @@ exports[`renders <Item /> without throwing 1`] = `
   align-items: center;
 }
 
-.c18 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4556,7 +4718,7 @@ exports[`renders <Item /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   vertical-align: middle;
   text-align: left;
@@ -4571,7 +4733,7 @@ exports[`renders <Item /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c13 {
+.c10 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -4580,18 +4742,16 @@ exports[`renders <Item /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 0rem;
-  display: none;
   vertical-align: middle;
   text-align: left;
   border-bottom-width: 0;
 }
 
-.c13:not(:first-child) {
+.c10:not(:first-child) {
   border-left-width: 0;
 }
 
-.c13:not(:last-child) {
+.c10:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -4628,8 +4788,11 @@ exports[`renders <Item /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
   border-bottom-width: 0;
-  border-left-width: 0.0625rem !important;
 }
 
 .c15:not(:first-child) {
@@ -4640,6 +4803,27 @@ exports[`renders <Item /> without throwing 1`] = `
   border-right-width: 0;
 }
 
+.c16 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  border-bottom-width: 0;
+  border-left-width: 0.0625rem !important;
+}
+
+.c16:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c16:not(:last-child) {
+  border-right-width: 0;
+}
+
 .c2 {
   display: table-row;
   color: rgb(73,73,73);
@@ -4656,7 +4840,7 @@ exports[`renders <Item /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c10 {
+.c11 {
   color: rgb(73,73,73);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -4668,19 +4852,19 @@ exports[`renders <Item /> without throwing 1`] = `
   display: block;
 }
 
-.c17 {
-  height: 3rem;
+.c18 {
+  height: 100%;
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c13 {
+  .c14 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c14 {
+  .c15 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -4741,27 +4925,27 @@ exports[`renders <Item /> without throwing 1`] = `
         </div>
       </td>
       <td
-        className="c3"
+        className="c10"
         disabled={undefined}
         name="td"
         selected={undefined}
       >
         <a
           activeClassName="active"
-          className="c10 c11"
+          className="c11 c12"
           secondary={false}
           to="/instances/"
         />
       </td>
       <td
-        className="c3"
+        className="c10"
         disabled={undefined}
         name="td"
         selected={undefined}
       >
         <span>
           <span
-            className="c12"
+            className="c13"
             color="green"
             size="0.75rem"
           />
@@ -4770,7 +4954,7 @@ exports[`renders <Item /> without throwing 1`] = `
         </span>
       </td>
       <td
-        className="c13"
+        className="c14"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -4778,7 +4962,7 @@ exports[`renders <Item /> without throwing 1`] = `
         almost NaN years
       </td>
       <td
-        className="c14"
+        className="c15"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -4788,14 +4972,14 @@ exports[`renders <Item /> without throwing 1`] = `
         </code>
       </td>
       <td
-        className="c15"
+        className="c16"
         disabled={undefined}
         name="td"
         selected={undefined}
       >
         <div
           box={true}
-          className="c16"
+          className="c17"
           onClick={[Function]}
           onMouseEnter={undefined}
           onMouseLeave={undefined}
@@ -4807,7 +4991,7 @@ exports[`renders <Item /> without throwing 1`] = `
           tag="div"
         >
           <div
-            className="c17 c18"
+            className="c18 c19"
           >
             <svg
               height="16"
@@ -4874,17 +5058,17 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   font: inherit;
 }
 
-.c11 {
+.c12 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c11:hover {
+.c12:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c12 {
+.c13 {
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 50%;
@@ -4894,7 +5078,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   margin-left: 0rem;
 }
 
-.c16 {
+.c17 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -4912,7 +5096,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   align-items: center;
 }
 
-.c18 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5083,7 +5267,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   vertical-align: middle;
   text-align: left;
@@ -5098,7 +5282,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c13 {
+.c10 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -5107,18 +5291,16 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 0rem;
-  display: none;
   vertical-align: middle;
   text-align: left;
   border-bottom-width: 0;
 }
 
-.c13:not(:first-child) {
+.c10:not(:first-child) {
   border-left-width: 0;
 }
 
-.c13:not(:last-child) {
+.c10:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -5155,8 +5337,11 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
   border-bottom-width: 0;
-  border-left-width: 0.0625rem !important;
 }
 
 .c15:not(:first-child) {
@@ -5167,6 +5352,27 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-right-width: 0;
 }
 
+.c16 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  border-bottom-width: 0;
+  border-left-width: 0.0625rem !important;
+}
+
+.c16:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c16:not(:last-child) {
+  border-right-width: 0;
+}
+
 .c2 {
   display: table-row;
   color: rgb(73,73,73);
@@ -5183,7 +5389,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c10 {
+.c11 {
   color: rgb(73,73,73);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -5195,19 +5401,19 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   display: block;
 }
 
-.c17 {
-  height: 3rem;
+.c18 {
+  height: 100%;
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c13 {
+  .c14 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c14 {
+  .c15 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -5268,14 +5474,14 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
         </div>
       </td>
       <td
-        className="c3"
+        className="c10"
         disabled={undefined}
         name="td"
         selected={undefined}
       >
         <a
           activeClassName="active"
-          className="c10 c11"
+          className="c11 c12"
           secondary={false}
           to="/instances/id"
         >
@@ -5283,14 +5489,14 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
         </a>
       </td>
       <td
-        className="c3"
+        className="c10"
         disabled={undefined}
         name="td"
         selected={undefined}
       >
         <span>
           <span
-            className="c12"
+            className="c13"
             color="primary"
             size="0.75rem"
           />
@@ -5299,7 +5505,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
         </span>
       </td>
       <td
-        className="c13"
+        className="c14"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -5307,7 +5513,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
         almost NaN years
       </td>
       <td
-        className="c14"
+        className="c15"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -5317,14 +5523,14 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
         </code>
       </td>
       <td
-        className="c15"
+        className="c16"
         disabled={undefined}
         name="td"
         selected={undefined}
       >
         <div
           box={true}
-          className="c16"
+          className="c17"
           onClick={[Function]}
           onMouseEnter={undefined}
           onMouseLeave={undefined}
@@ -5336,7 +5542,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
           tag="div"
         >
           <div
-            className="c17 c18"
+            className="c18 c19"
           >
             <svg
               height="16"
@@ -5403,17 +5609,17 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   font: inherit;
 }
 
-.c11 {
+.c12 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c11:hover {
+.c12:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c12 {
+.c13 {
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 50%;
@@ -5423,7 +5629,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   margin-left: 0rem;
 }
 
-.c16 {
+.c17 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -5441,7 +5647,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   align-items: center;
 }
 
-.c18 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5612,7 +5818,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   vertical-align: middle;
   text-align: left;
@@ -5627,7 +5833,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c13 {
+.c10 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -5636,18 +5842,16 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 0rem;
-  display: none;
   vertical-align: middle;
   text-align: left;
   border-bottom-width: 0;
 }
 
-.c13:not(:first-child) {
+.c10:not(:first-child) {
   border-left-width: 0;
 }
 
-.c13:not(:last-child) {
+.c10:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -5684,8 +5888,11 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
   border-bottom-width: 0;
-  border-left-width: 0.0625rem !important;
 }
 
 .c15:not(:first-child) {
@@ -5696,6 +5903,27 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   border-right-width: 0;
 }
 
+.c16 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  border-bottom-width: 0;
+  border-left-width: 0.0625rem !important;
+}
+
+.c16:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c16:not(:last-child) {
+  border-right-width: 0;
+}
+
 .c2 {
   display: table-row;
   color: rgb(73,73,73);
@@ -5712,7 +5940,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c10 {
+.c11 {
   color: rgb(73,73,73);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -5724,19 +5952,19 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   display: block;
 }
 
-.c17 {
-  height: 3rem;
+.c18 {
+  height: 100%;
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c13 {
+  .c14 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c14 {
+  .c15 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -5797,27 +6025,27 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
         </div>
       </td>
       <td
-        className="c3"
+        className="c10"
         disabled={undefined}
         name="td"
         selected={undefined}
       >
         <a
           activeClassName="active"
-          className="c10 c11"
+          className="c11 c12"
           secondary={false}
           to="/instances/"
         />
       </td>
       <td
-        className="c3"
+        className="c10"
         disabled={undefined}
         name="td"
         selected={undefined}
       >
         <span>
           <span
-            className="c12"
+            className="c13"
             color="green"
             size="0.75rem"
           />
@@ -5826,7 +6054,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
         </span>
       </td>
       <td
-        className="c13"
+        className="c14"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -5834,7 +6062,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
         almost NaN years
       </td>
       <td
-        className="c14"
+        className="c15"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -5844,14 +6072,14 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
         </code>
       </td>
       <td
-        className="c15"
+        className="c16"
         disabled={undefined}
         name="td"
         selected={undefined}
       >
         <div
           box={true}
-          className="c16"
+          className="c17"
           onClick={[Function]}
           onMouseEnter={undefined}
           onMouseLeave={undefined}
@@ -5863,7 +6091,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
           tag="div"
         >
           <div
-            className="c17 c18"
+            className="c18 c19"
           >
             <svg
               height="16"
@@ -5930,34 +6158,34 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   font: inherit;
 }
 
-.c11 {
+.c12 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c11:hover {
+.c12:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c13 {
+.c14 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
 }
 
-.c14 {
+.c15 {
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
 }
 
-.c15 {
+.c16 {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
 }
 
-.c12 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6128,7 +6356,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   vertical-align: middle;
   text-align: left;
@@ -6143,7 +6371,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c16 {
+.c10 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -6152,18 +6380,16 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 0rem;
-  display: none;
   vertical-align: middle;
   text-align: left;
   border-bottom-width: 0;
 }
 
-.c16:not(:first-child) {
+.c10:not(:first-child) {
   border-left-width: 0;
 }
 
-.c16:not(:last-child) {
+.c10:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -6200,10 +6426,11 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
+  width: 0rem;
+  display: none;
   vertical-align: middle;
-  text-align: center;
+  text-align: left;
   border-bottom-width: 0;
-  border-left-width: 0.0625rem !important;
 }
 
 .c18:not(:first-child) {
@@ -6214,6 +6441,29 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   border-right-width: 0;
 }
 
+.c19 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  vertical-align: middle;
+  text-align: center;
+  border-bottom-width: 0;
+  border-left-width: 0.0625rem !important;
+}
+
+.c19:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c19:not(:last-child) {
+  border-right-width: 0;
+}
+
 .c2 {
   display: table-row;
   color: rgb(73,73,73);
@@ -6230,7 +6480,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c10 {
+.c11 {
   color: rgb(73,73,73);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -6243,14 +6493,14 @@ exports[`renders <Item mutating /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c16 {
+  .c17 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c17 {
+  .c18 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -6311,47 +6561,47 @@ exports[`renders <Item mutating /> without throwing 1`] = `
         </div>
       </td>
       <td
-        className="c3"
+        className="c10"
         disabled={undefined}
         name="td"
         selected={undefined}
       >
         <a
           activeClassName="active"
-          className="c10 c11"
+          className="c11 c12"
           secondary={false}
           to="/instances/"
         />
       </td>
       <td
-        className="c3"
+        className="c10"
         disabled={undefined}
         name="td"
         selected={undefined}
       >
         <div
-          className="c12"
+          className="c13"
         >
           <svg
             height="10"
             width="28"
           >
             <rect
-              className="c13"
+              className="c14"
               height="6"
               width="6"
               x="2"
               y="2"
             />
             <rect
-              className="c14 c13"
+              className="c15 c14"
               height="6"
               width="6"
               x="11"
               y="2"
             />
             <rect
-              className="c15 c13"
+              className="c16 c14"
               height="6"
               width="6"
               x="20"
@@ -6361,7 +6611,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
         </div>
       </td>
       <td
-        className="c16"
+        className="c17"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -6369,7 +6619,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
         almost NaN years
       </td>
       <td
-        className="c17"
+        className="c18"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -6379,7 +6629,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
         </code>
       </td>
       <td
-        className="c18"
+        className="c19"
         disabled={undefined}
         name="td"
         selected={undefined}
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 5ae8f5aa..a4204bf7 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
@@ -1,7 +1,127 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <AddForm /> without throwing 1`] = `
+.c13 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c24 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c14 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c20 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
 .c31 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c18 {
+  margin-top: 0.1875rem;
+}
+
+.c23 {
+  margin-top: 0.75rem;
+}
+
+.c33 {
+  margin-right: 0.75rem;
+}
+
+.c5 {
+  padding-right: 1.125rem;
+  padding-left: 1.125rem;
+}
+
+.c12 {
+  padding-left: 1.125rem;
+  padding-right: 1.125rem;
+  padding-top: 1.125rem;
+  padding-bottom: 1.125rem;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c29 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -13,30 +133,30 @@ exports[`renders <AddForm /> without throwing 1`] = `
   appearance: button;
 }
 
-.c31::-moz-focus-inner,
-.c31[type='button']::-moz-focus-inner,
-.c31[type='reset']::-moz-focus-inner,
-.c31[type='submit']::-moz-focus-inner {
+.c29::-moz-focus-inner,
+.c29[type='button']::-moz-focus-inner,
+.c29[type='reset']::-moz-focus-inner,
+.c29[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c31:-moz-focusring,
-.c31[type='button']:-moz-focusring,
-.c31[type='reset']:-moz-focusring,
-.c31[type='submit']:-moz-focusring {
+.c29:-moz-focusring,
+.c29[type='button']:-moz-focusring,
+.c29[type='reset']:-moz-focusring,
+.c29[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c30 {
+.c28 {
   min-width: 7.5rem;
 }
 
-.c29 {
+.c27 {
   display: inline-block;
 }
 
-.c28 {
+.c26 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -79,7 +199,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c28:focus {
+.c26:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -87,43 +207,43 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c28:hover {
+.c26:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c28[disabled] {
+.c26[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c28:focus {
+.c26:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c28:hover {
+.c26:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32 {
+.c30 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -167,7 +287,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c32:focus {
+.c30:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -175,43 +295,43 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c30:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32: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);
 }
 
-.c32[disabled] {
+.c30[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c30:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c30:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c30:active,
+.c30:active:hover,
+.c30:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c34 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -267,7 +387,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   float: right;
 }
 
-.c34:focus {
+.c32:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -275,62 +395,62 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c34:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c34[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c34:focus {
+.c32:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c34:hover {
+.c32:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c34:focus {
+.c32:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:hover {
+.c32:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c18 {
+.c17 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -340,141 +460,15 @@ exports[`renders <AddForm /> without throwing 1`] = `
   text-align: left;
 }
 
-.c14 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c26 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c15 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c21 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c33 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c10 {
+.c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
 
-.c22 {
-  height: 1px;
-  background-color: rgb(216,216,216);
-  background-color: transparent;
-}
-
-.c19 {
-  margin-top: 0.1875rem;
-}
-
-.c25 {
-  margin-top: 0.75rem;
-}
-
-.c35 {
-  margin-right: 0.75rem;
-}
-
-.c6 {
-  padding-right: 1.125rem;
-  padding-left: 1.125rem;
-}
-
-.c13 {
-  padding-left: 1.125rem;
-  padding-right: 1.125rem;
-  padding-top: 1.125rem;
-  padding-bottom: 1.125rem;
-}
-
-.c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c1 {
+.c0 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -497,7 +491,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c4 {
+.c3 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -524,7 +518,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c12 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -546,7 +540,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c11 {
+.c10 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -562,7 +556,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c3 {
+.c2 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -574,7 +568,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c9 {
+.c8 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -608,7 +602,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   color: inherit;
 }
 
-.c16 {
+.c15 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -621,7 +615,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   width: 100%;
 }
 
-.c20 {
+.c19 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -643,46 +637,46 @@ exports[`renders <AddForm /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c20:focus {
+.c19:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c20::-webkit-input-placeholder {
+.c19::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c20::-moz-placeholder {
+.c19::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c20:-ms-input-placeholder {
+.c19:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c20:invalid {
+.c19:invalid {
   box-shadow: none;
 }
 
-.c20:disabled {
+.c19:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c20:disabled::-webkit-input-placeholder {
+.c19:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c20:disabled::-moz-placeholder {
+.c19:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c20:disabled:-ms-input-placeholder {
+.c19:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24 {
+.c22 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -707,62 +701,62 @@ exports[`renders <AddForm /> without throwing 1`] = `
   resize: vertical;
 }
 
-.c24:focus {
+.c22:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c24::-webkit-input-placeholder {
+.c22::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24::-moz-placeholder {
+.c22::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:-ms-input-placeholder {
+.c22:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:invalid {
+.c22:invalid {
   box-shadow: none;
 }
 
-.c24:disabled {
+.c22:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c24:disabled::-webkit-input-placeholder {
+.c22:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:disabled::-moz-placeholder {
+.c22:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:disabled:-ms-input-placeholder {
+.c22:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:disabled {
+.c22:disabled {
   color: rgb(73,73,73);
 }
 
-.c24:disabled::-webkit-input-placeholder {
+.c22:disabled::-webkit-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c24:disabled::-moz-placeholder {
+.c22:disabled::-moz-placeholder {
   color: rgb(73,73,73);
 }
 
-.c24:disabled:-ms-input-placeholder {
+.c22:disabled:-ms-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c23 {
+.c21 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -775,40 +769,36 @@ exports[`renders <AddForm /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c17 {
+.c16 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c0 {
-  margin-bottom: 0;
-}
-
-.c2 {
+.c1 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c27 {
+.c25 {
   margin-right: 0.375rem;
 }
 
-.c5 {
+.c4 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c8 {
+.c7 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c24 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -817,7 +807,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c24 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -826,7 +816,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c14 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -835,7 +825,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c21 {
+  .c20 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -844,39 +834,38 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c31 {
     display: none;
   }
 }
 
 <form
-  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c1"
+    className="c0"
     disabled={false}
     name="card"
   >
     <div
-      className="c2 c3 c4"
+      className="c1 c2 c3"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c5 c6"
+        className="c4 c5"
       >
         <div
-          className="c7"
+          className="c6"
         >
           <div
-            className="c8 c9 c4"
+            className="c7 c8 c3"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c10"
+              className="c9"
             >
               Add metadata
             </h4>
@@ -885,82 +874,78 @@ exports[`renders <AddForm /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c10 c11"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c13"
+        className="c12"
       >
         <div
-          className="c14"
+          className="c13"
         >
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
                  key
               </label>
               <div
-                className="c19"
+                className="c18"
               >
                 <input
-                  className="c20"
+                  className="c19"
                   disabled={false}
                   id={null}
                   onBlur={null}
                 />
                 <div
-                  className="c14"
+                  className="c13"
                 >
                   <div
-                    className="c21"
+                    className="c20"
                   />
                 </div>
               </div>
             </div>
-            <div
-              className="c22 c14"
-              height="0.75rem"
-            />
           </div>
         </div>
         <div
-          className="c14"
+          className="c13"
         >
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
                  value
               </label>
               <div
-                className="c19"
+                className="c18"
               >
                 <textarea
-                  className="c23 c24"
+                  className="c21 c22"
                   disabled={false}
                   id={null}
                   name="name"
@@ -968,30 +953,26 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 />
               </div>
               <div
-                className="c14"
+                className="c13"
               >
                 <div
-                  className="c21"
+                  className="c20"
                 />
               </div>
             </div>
-            <div
-              className="c22 c14"
-              height="0.75rem"
-            />
           </div>
         </div>
         <div
-          className="c25"
+          className="c23"
         >
           <div
-            className="c26"
+            className="c24"
           >
             <div
-              className="c15"
+              className="c14"
             >
               <button
-                className="c27 c28 c29 c30 c31"
+                className="c25 c26 c27 c28 c29"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -1004,7 +985,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c32 c29 c30 c31"
+                className="c30 c27 c28 c29"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -1017,10 +998,10 @@ exports[`renders <AddForm /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c33"
+              className="c31"
             >
               <button
-                className="c34 c29 c30 c31"
+                className="c32 c27 c28 c29"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -1030,7 +1011,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c35"
+                  className="c33"
                 >
                   <svg
                     height="16"
@@ -1063,7 +1044,137 @@ exports[`renders <AddForm /> without throwing 1`] = `
 `;
 
 exports[`renders <EditForm /> without throwing 1`] = `
+.c13 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c24 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c14 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c20 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c25 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
 .c32 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c18 {
+  margin-top: 0.1875rem;
+}
+
+.c23 {
+  margin-top: 0.75rem;
+}
+
+.c34 {
+  margin-right: 0.75rem;
+}
+
+.c5 {
+  padding-right: 1.125rem;
+  padding-left: 1.125rem;
+}
+
+.c12 {
+  padding-left: 1.125rem;
+  padding-right: 1.125rem;
+  padding-top: 1.125rem;
+  padding-bottom: 1.125rem;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c30 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1075,30 +1186,30 @@ exports[`renders <EditForm /> without throwing 1`] = `
   appearance: button;
 }
 
-.c32::-moz-focus-inner,
-.c32[type='button']::-moz-focus-inner,
-.c32[type='reset']::-moz-focus-inner,
-.c32[type='submit']::-moz-focus-inner {
+.c30::-moz-focus-inner,
+.c30[type='button']::-moz-focus-inner,
+.c30[type='reset']::-moz-focus-inner,
+.c30[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c32:-moz-focusring,
-.c32[type='button']:-moz-focusring,
-.c32[type='reset']:-moz-focusring,
-.c32[type='submit']:-moz-focusring {
+.c30:-moz-focusring,
+.c30[type='button']:-moz-focusring,
+.c30[type='reset']:-moz-focusring,
+.c30[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c31 {
+.c29 {
   min-width: 7.5rem;
 }
 
-.c30 {
+.c28 {
   display: inline-block;
 }
 
-.c29 {
+.c27 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1141,7 +1252,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c29:focus {
+.c27:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1149,43 +1260,43 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c29:hover {
+.c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c29:active,
-.c29:active:hover,
-.c29:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c29[disabled] {
+.c27[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c29:focus {
+.c27:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c29:hover {
+.c27:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c29:active,
-.c29:active:hover,
-.c29:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33 {
+.c31 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1229,7 +1340,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c33:focus {
+.c31:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1237,43 +1348,43 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c31:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c33[disabled] {
+.c31[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c31:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c31:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c35 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1329,7 +1440,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   float: right;
 }
 
-.c35:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1337,62 +1448,62 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c35:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c35[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c35:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c35:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c35:focus {
+.c33:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c35:hover {
+.c33:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c18 {
+.c17 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -1402,143 +1513,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   text-align: left;
 }
 
-.c14 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c26 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c15 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c21 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c27 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c34 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c22 {
-  height: 1px;
-  background-color: rgb(216,216,216);
-  background-color: transparent;
-}
-
-.c19 {
-  margin-top: 0.1875rem;
-}
-
-.c25 {
-  margin-top: 0.75rem;
-}
-
-.c36 {
-  margin-right: 0.75rem;
-}
-
-.c6 {
-  padding-right: 1.125rem;
-  padding-left: 1.125rem;
-}
-
-.c13 {
-  padding-left: 1.125rem;
-  padding-right: 1.125rem;
-  padding-top: 1.125rem;
-  padding-bottom: 1.125rem;
-}
-
-.c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c1 {
+.c0 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1561,7 +1536,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c4 {
+.c3 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1588,7 +1563,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c12 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1610,7 +1585,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c11 {
+.c10 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1626,7 +1601,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c3 {
+.c2 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -1638,7 +1613,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c9 {
+.c8 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -1672,7 +1647,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   color: inherit;
 }
 
-.c16 {
+.c15 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -1685,7 +1660,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   width: 100%;
 }
 
-.c20 {
+.c19 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1707,46 +1682,46 @@ exports[`renders <EditForm /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c20:focus {
+.c19:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c20::-webkit-input-placeholder {
+.c19::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c20::-moz-placeholder {
+.c19::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c20:-ms-input-placeholder {
+.c19:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c20:invalid {
+.c19:invalid {
   box-shadow: none;
 }
 
-.c20:disabled {
+.c19:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c20:disabled::-webkit-input-placeholder {
+.c19:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c20:disabled::-moz-placeholder {
+.c19:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c20:disabled:-ms-input-placeholder {
+.c19:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24 {
+.c22 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -1771,62 +1746,62 @@ exports[`renders <EditForm /> without throwing 1`] = `
   resize: vertical;
 }
 
-.c24:focus {
+.c22:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c24::-webkit-input-placeholder {
+.c22::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24::-moz-placeholder {
+.c22::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:-ms-input-placeholder {
+.c22:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:invalid {
+.c22:invalid {
   box-shadow: none;
 }
 
-.c24:disabled {
+.c22:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c24:disabled::-webkit-input-placeholder {
+.c22:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:disabled::-moz-placeholder {
+.c22:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:disabled:-ms-input-placeholder {
+.c22:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:disabled {
+.c22:disabled {
   color: rgb(73,73,73);
 }
 
-.c24:disabled::-webkit-input-placeholder {
+.c22:disabled::-webkit-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c24:disabled::-moz-placeholder {
+.c22:disabled::-moz-placeholder {
   color: rgb(73,73,73);
 }
 
-.c24:disabled:-ms-input-placeholder {
+.c22:disabled:-ms-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c23 {
+.c21 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1839,17 +1814,13 @@ exports[`renders <EditForm /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c17 {
+.c16 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c0 {
-  margin-bottom: 0;
-}
-
-.c10 {
+.c9 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -1858,30 +1829,30 @@ exports[`renders <EditForm /> without throwing 1`] = `
   display: block;
 }
 
-.c2 {
+.c1 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c28 {
+.c26 {
   margin-right: 0.375rem;
 }
 
-.c5 {
+.c4 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c8 {
+.c7 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c24 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1890,7 +1861,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c24 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1899,7 +1870,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c14 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1908,7 +1879,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c21 {
+  .c20 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1917,7 +1888,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c27 {
+  .c25 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1926,7 +1897,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c34 {
+  .c32 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -1935,115 +1906,110 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 <form
-  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c1"
+    className="c0"
     disabled={false}
     name="card"
   >
     <div
-      className="c2 c3 c4"
+      className="c1 c2 c3"
       disabled={false}
       name="card-header"
       onClick={undefined}
     >
       <div
-        className="c5 c6"
+        className="c4 c5"
       >
         <div
-          className="c7"
+          className="c6"
         >
           <div
-            className="c8 c9 c4"
+            className="c7 c8 c3"
             disabled={false}
             name="card-header-meta"
           >
             <div
-              className="c10"
+              className="c9"
             />
           </div>
         </div>
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c10 c11"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c13"
+        className="c12"
       >
         <div
-          className="c14"
+          className="c13"
         >
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
                  key
               </label>
               <div
-                className="c19"
+                className="c18"
               >
                 <input
-                  className="c20"
+                  className="c19"
                   disabled={false}
                   id={null}
                   onBlur={null}
                 />
                 <div
-                  className="c14"
+                  className="c13"
                 >
                   <div
-                    className="c21"
+                    className="c20"
                   />
                 </div>
               </div>
             </div>
-            <div
-              className="c22 c14"
-              height="0.75rem"
-            />
           </div>
         </div>
         <div
-          className="c14"
+          className="c13"
         >
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
                  value
               </label>
               <div
-                className="c19"
+                className="c18"
               >
                 <textarea
-                  className="c23 c24"
+                  className="c21 c22"
                   disabled={false}
                   id={null}
                   name="name"
@@ -2051,30 +2017,26 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 />
               </div>
               <div
-                className="c14"
+                className="c13"
               >
                 <div
-                  className="c21"
+                  className="c20"
                 />
               </div>
             </div>
-            <div
-              className="c22 c14"
-              height="0.75rem"
-            />
           </div>
         </div>
         <div
-          className="c25"
+          className="c23"
         >
           <div
-            className="c26"
+            className="c24"
           >
             <div
-              className="c27"
+              className="c25"
             >
               <button
-                className="c28 c29 c30 c31 c32"
+                className="c26 c27 c28 c29 c30"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -2087,7 +2049,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c33 c30 c31 c32"
+                className="c31 c28 c29 c30"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -2100,10 +2062,10 @@ exports[`renders <EditForm /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c34"
+              className="c32"
             >
               <button
-                className="c35 c30 c31 c32"
+                className="c33 c28 c29 c30"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -2113,7 +2075,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c36"
+                  className="c34"
                 >
                   <svg
                     height="16"
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 ef7a5794..80255e6e 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
@@ -42,6 +42,11 @@ Array [
   font: inherit;
 }
 
+.c11 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -187,7 +192,7 @@ Array [
   border-top-right-radius: 0.25rem;
 }
 
-.c14 {
+.c15 {
   width: 100%;
 }
 
@@ -198,7 +203,7 @@ Array [
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -250,7 +255,7 @@ Array [
   border-right-width: 0;
 }
 
-.c11 {
+.c12 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -274,38 +279,6 @@ Array [
   border-bottom-width: 0;
 }
 
-.c11:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c11:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c12 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
 .c12:not(:first-child) {
   border-left-width: 0;
 }
@@ -323,8 +296,15 @@ Array [
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -339,6 +319,31 @@ Array [
   border-right-width: 0;
 }
 
+.c14 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c14:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c14:not(:last-child) {
+  border-right-width: 0;
+}
+
 .c2 {
   display: table-row;
   color: rgb(73,73,73);
@@ -360,7 +365,7 @@ Array [
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c12 {
+  .c13 {
     width: 10rem;
     display: table-cell;
   }
@@ -431,25 +436,29 @@ Array [
                 <span>
                     Name 
                 </span>
-                <svg
-                    height="6"
-                    style={
-                        Object {
-                            "transform": "rotate(180deg)",
-                          }
-                    }
-                    viewBox="0 0 9.6 6"
-                    width="9.6"
-                    xmlns="http://www.w3.org/2000/svg"
+                <div
+                    className="c11"
                 >
-                    <path
-                        d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                        fill="rgb(73, 73, 73)"
-                    />
-                </svg>
+                    <svg
+                        height="6"
+                        style={
+                            Object {
+                                "transform": "rotate(180deg)",
+                              }
+                        }
+                        viewBox="0 0 9.6 6"
+                        width="9.6"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                            fill="rgb(73, 73, 73)"
+                        />
+                    </svg>
+                </div>
             </th>
             <th
-                className="c11"
+                className="c12"
                 disabled={undefined}
                 name="th"
                 onClick={[Function]}
@@ -460,7 +469,7 @@ Array [
                 </span>
             </th>
             <th
-                className="c12"
+                className="c13"
                 disabled={undefined}
                 name="th"
                 onClick={[Function]}
@@ -471,7 +480,7 @@ Array [
                 </span>
             </th>
             <th
-                className="c13"
+                className="c14"
                 disabled={undefined}
                 name="th"
                 selected={undefined}
@@ -479,7 +488,7 @@ Array [
         </tr>
     </thead>
     <tbody
-        className="c14"
+        className="c15"
         disabled={undefined}
         name="tbody"
         selected={undefined}
@@ -501,6 +510,28 @@ Array [
   padding: 8rem;
 }
 
+.c1 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -532,28 +563,6 @@ Array [
   align-items: center;
 }
 
-.c1 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
 .c5 {
   color: rgb(151,151,151);
   text-align: center;
@@ -915,7 +924,7 @@ exports[`renders <Item /> without throwing 1`] = `
   font: inherit;
 }
 
-.c8 {
+.c9 {
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 50%;
@@ -924,7 +933,7 @@ exports[`renders <Item /> without throwing 1`] = `
   margin-left: 0rem;
 }
 
-.c11 {
+.c12 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -1072,7 +1081,7 @@ exports[`renders <Item /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   vertical-align: middle;
   text-align: left;
@@ -1087,7 +1096,29 @@ exports[`renders <Item /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c9 {
+.c8 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c8:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c8:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c10 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -1103,32 +1134,32 @@ exports[`renders <Item /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c9:not(:first-child) {
+.c10:not(:first-child) {
   border-left-width: 0;
 }
 
-.c9:not(:last-child) {
+.c10:not(:last-child) {
   border-right-width: 0;
 }
 
-.c10 {
+.c11 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   border-bottom-width: 0;
   border-left-width: 0.0625rem !important;
 }
 
-.c10:not(:first-child) {
+.c11:not(:first-child) {
   border-left-width: 0;
 }
 
-.c10:not(:last-child) {
+.c11:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -1149,7 +1180,7 @@ exports[`renders <Item /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c9 {
+  .c10 {
     width: 10rem;
     display: table-cell;
   }
@@ -1201,19 +1232,19 @@ exports[`renders <Item /> without throwing 1`] = `
     </div>
   </td>
   <td
-    className="c1"
+    className="c8"
     disabled={undefined}
     name="td"
     selected={undefined}
   />
   <td
-    className="c1"
+    className="c8"
     disabled={undefined}
     name="td"
     selected={undefined}
   >
     <span
-      className="c8"
+      className="c9"
       color={undefined}
       size="0.75rem"
     />
@@ -1221,7 +1252,7 @@ exports[`renders <Item /> without throwing 1`] = `
     
   </td>
   <td
-    className="c9"
+    className="c10"
     disabled={undefined}
     name="td"
     selected={undefined}
@@ -1229,14 +1260,14 @@ exports[`renders <Item /> without throwing 1`] = `
     almost NaN years
   </td>
   <td
-    className="c10"
+    className="c11"
     disabled={undefined}
     name="td"
     selected={undefined}
   >
     <div
       box={true}
-      className="c11"
+      className="c12"
       onClick={[Function]}
       onMouseEnter={undefined}
       onMouseLeave={undefined}
@@ -1309,7 +1340,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   font: inherit;
 }
 
-.c8 {
+.c9 {
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 50%;
@@ -1318,7 +1349,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   margin-left: 0rem;
 }
 
-.c11 {
+.c12 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -1466,7 +1497,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   vertical-align: middle;
   text-align: left;
@@ -1481,7 +1512,29 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c9 {
+.c8 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c8:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c8:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c10 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -1497,32 +1550,32 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c9:not(:first-child) {
+.c10:not(:first-child) {
   border-left-width: 0;
 }
 
-.c9:not(:last-child) {
+.c10:not(:last-child) {
   border-right-width: 0;
 }
 
-.c10 {
+.c11 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   border-bottom-width: 0;
   border-left-width: 0.0625rem !important;
 }
 
-.c10:not(:first-child) {
+.c11:not(:first-child) {
   border-left-width: 0;
 }
 
-.c10:not(:last-child) {
+.c11:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -1543,7 +1596,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c9 {
+  .c10 {
     width: 10rem;
     display: table-cell;
   }
@@ -1595,7 +1648,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
     </div>
   </td>
   <td
-    className="c1"
+    className="c8"
     disabled={undefined}
     name="td"
     selected={undefined}
@@ -1603,13 +1656,13 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
     name
   </td>
   <td
-    className="c1"
+    className="c8"
     disabled={undefined}
     name="td"
     selected={undefined}
   >
     <span
-      className="c8"
+      className="c9"
       color={undefined}
       size="0.75rem"
     />
@@ -1617,7 +1670,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
     Started
   </td>
   <td
-    className="c9"
+    className="c10"
     disabled={undefined}
     name="td"
     selected={undefined}
@@ -1625,14 +1678,14 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
     6 months
   </td>
   <td
-    className="c10"
+    className="c11"
     disabled={undefined}
     name="td"
     selected={undefined}
   >
     <div
       box={true}
-      className="c11"
+      className="c12"
       onClick={[Function]}
       onMouseEnter={undefined}
       onMouseLeave={undefined}
@@ -1687,6 +1740,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c4 {
@@ -1931,6 +1985,11 @@ Array [
   font: inherit;
 }
 
+.c11 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -2076,7 +2135,7 @@ Array [
   border-top-right-radius: 0.25rem;
 }
 
-.c14 {
+.c15 {
   width: 100%;
 }
 
@@ -2087,7 +2146,7 @@ Array [
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -2139,7 +2198,7 @@ Array [
   border-right-width: 0;
 }
 
-.c11 {
+.c12 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -2163,38 +2222,6 @@ Array [
   border-bottom-width: 0;
 }
 
-.c11:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c11:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c12 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
 .c12:not(:first-child) {
   border-left-width: 0;
 }
@@ -2212,8 +2239,15 @@ Array [
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -2228,6 +2262,31 @@ Array [
   border-right-width: 0;
 }
 
+.c14 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c14:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c14:not(:last-child) {
+  border-right-width: 0;
+}
+
 .c2 {
   display: table-row;
   color: rgb(73,73,73);
@@ -2249,7 +2308,7 @@ Array [
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c12 {
+  .c13 {
     width: 10rem;
     display: table-cell;
   }
@@ -2320,25 +2379,29 @@ Array [
                 <span>
                     Name 
                 </span>
-                <svg
-                    height="6"
-                    style={
-                        Object {
-                            "transform": "rotate(180deg)",
-                          }
-                    }
-                    viewBox="0 0 9.6 6"
-                    width="9.6"
-                    xmlns="http://www.w3.org/2000/svg"
+                <div
+                    className="c11"
                 >
-                    <path
-                        d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                        fill="rgb(73, 73, 73)"
-                    />
-                </svg>
+                    <svg
+                        height="6"
+                        style={
+                            Object {
+                                "transform": "rotate(180deg)",
+                              }
+                        }
+                        viewBox="0 0 9.6 6"
+                        width="9.6"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                            fill="rgb(73, 73, 73)"
+                        />
+                    </svg>
+                </div>
             </th>
             <th
-                className="c11"
+                className="c12"
                 disabled={undefined}
                 name="th"
                 onClick={[Function]}
@@ -2349,7 +2412,7 @@ Array [
                 </span>
             </th>
             <th
-                className="c12"
+                className="c13"
                 disabled={undefined}
                 name="th"
                 onClick={[Function]}
@@ -2360,7 +2423,7 @@ Array [
                 </span>
             </th>
             <th
-                className="c13"
+                className="c14"
                 disabled={undefined}
                 name="th"
                 selected={undefined}
@@ -2368,7 +2431,7 @@ Array [
         </tr>
     </thead>
     <tbody
-        className="c14"
+        className="c15"
         disabled={undefined}
         name="tbody"
         selected={undefined}
@@ -2390,6 +2453,28 @@ Array [
   padding: 8rem;
 }
 
+.c1 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2421,28 +2506,6 @@ Array [
   align-items: center;
 }
 
-.c1 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
 .c5 {
   color: rgb(151,151,151);
   text-align: center;
@@ -2805,6 +2868,11 @@ Array [
   font: inherit;
 }
 
+.c11 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -2950,7 +3018,7 @@ Array [
   border-top-right-radius: 0.25rem;
 }
 
-.c14 {
+.c15 {
   width: 100%;
 }
 
@@ -2961,7 +3029,7 @@ Array [
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -3013,7 +3081,7 @@ Array [
   border-right-width: 0;
 }
 
-.c11 {
+.c12 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -3037,38 +3105,6 @@ Array [
   border-bottom-width: 0;
 }
 
-.c11:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c11:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c12 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
 .c12:not(:first-child) {
   border-left-width: 0;
 }
@@ -3086,8 +3122,15 @@ Array [
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -3102,6 +3145,31 @@ Array [
   border-right-width: 0;
 }
 
+.c14 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c14:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c14:not(:last-child) {
+  border-right-width: 0;
+}
+
 .c2 {
   display: table-row;
   color: rgb(73,73,73);
@@ -3123,7 +3191,7 @@ Array [
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c12 {
+  .c13 {
     width: 10rem;
     display: table-cell;
   }
@@ -3194,25 +3262,29 @@ Array [
                 <span>
                     Name 
                 </span>
-                <svg
-                    height="6"
-                    style={
-                        Object {
-                            "transform": "rotate(180deg)",
-                          }
-                    }
-                    viewBox="0 0 9.6 6"
-                    width="9.6"
-                    xmlns="http://www.w3.org/2000/svg"
+                <div
+                    className="c11"
                 >
-                    <path
-                        d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                        fill="rgb(73, 73, 73)"
-                    />
-                </svg>
+                    <svg
+                        height="6"
+                        style={
+                            Object {
+                                "transform": "rotate(180deg)",
+                              }
+                        }
+                        viewBox="0 0 9.6 6"
+                        width="9.6"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                            fill="rgb(73, 73, 73)"
+                        />
+                    </svg>
+                </div>
             </th>
             <th
-                className="c11"
+                className="c12"
                 disabled={undefined}
                 name="th"
                 onClick={[Function]}
@@ -3223,7 +3295,7 @@ Array [
                 </span>
             </th>
             <th
-                className="c12"
+                className="c13"
                 disabled={undefined}
                 name="th"
                 onClick={[Function]}
@@ -3234,7 +3306,7 @@ Array [
                 </span>
             </th>
             <th
-                className="c13"
+                className="c14"
                 disabled={undefined}
                 name="th"
                 selected={undefined}
@@ -3242,7 +3314,7 @@ Array [
         </tr>
     </thead>
     <tbody
-        className="c14"
+        className="c15"
         disabled={undefined}
         name="tbody"
         selected={undefined}
@@ -3264,6 +3336,28 @@ Array [
   padding: 8rem;
 }
 
+.c1 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -3295,28 +3389,6 @@ Array [
   align-items: center;
 }
 
-.c1 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
 .c5 {
   color: rgb(151,151,151);
   text-align: center;
@@ -3679,6 +3751,11 @@ Array [
   font: inherit;
 }
 
+.c12 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -3824,7 +3901,7 @@ Array [
   border-top-right-radius: 0.25rem;
 }
 
-.c14 {
+.c15 {
   width: 100%;
 }
 
@@ -3835,7 +3912,7 @@ Array [
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -3855,7 +3932,7 @@ Array [
   border-right-width: 0;
 }
 
-.c12 {
+.c13 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -3879,22 +3956,22 @@ Array [
   border-bottom-width: 0;
 }
 
-.c12:not(:first-child) {
+.c13:not(:first-child) {
   border-left-width: 0;
 }
 
-.c12:not(:last-child) {
+.c13:not(:last-child) {
   border-right-width: 0;
 }
 
-.c13 {
+.c14 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 3.75rem;
   display: table-cell;
@@ -3904,11 +3981,11 @@ Array [
   border-bottom-width: 0;
 }
 
-.c13:not(:first-child) {
+.c14:not(:first-child) {
   border-left-width: 0;
 }
 
-.c13:not(:last-child) {
+.c14:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -3997,7 +4074,7 @@ Array [
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c12 {
+  .c13 {
     width: 10rem;
     display: table-cell;
   }
@@ -4079,25 +4156,29 @@ Array [
                 <span>
                     Status 
                 </span>
-                <svg
-                    height="6"
-                    style={
-                        Object {
-                            "transform": "rotate(180deg)",
-                          }
-                    }
-                    viewBox="0 0 9.6 6"
-                    width="9.6"
-                    xmlns="http://www.w3.org/2000/svg"
+                <div
+                    className="c12"
                 >
-                    <path
-                        d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                        fill="rgb(73, 73, 73)"
-                    />
-                </svg>
+                    <svg
+                        height="6"
+                        style={
+                            Object {
+                                "transform": "rotate(180deg)",
+                              }
+                        }
+                        viewBox="0 0 9.6 6"
+                        width="9.6"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                            fill="rgb(73, 73, 73)"
+                        />
+                    </svg>
+                </div>
             </th>
             <th
-                className="c12"
+                className="c13"
                 disabled={undefined}
                 name="th"
                 onClick={[Function]}
@@ -4108,7 +4189,7 @@ Array [
                 </span>
             </th>
             <th
-                className="c13"
+                className="c14"
                 disabled={undefined}
                 name="th"
                 selected={undefined}
@@ -4116,7 +4197,7 @@ Array [
         </tr>
     </thead>
     <tbody
-        className="c14"
+        className="c15"
         disabled={undefined}
         name="tbody"
         selected={undefined}
@@ -4138,6 +4219,28 @@ Array [
   padding: 8rem;
 }
 
+.c1 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4169,28 +4272,6 @@ Array [
   align-items: center;
 }
 
-.c1 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
 .c5 {
   color: rgb(151,151,151);
   text-align: center;
@@ -4553,6 +4634,11 @@ Array [
   font: inherit;
 }
 
+.c12 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -4698,7 +4784,7 @@ Array [
   border-top-right-radius: 0.25rem;
 }
 
-.c14 {
+.c15 {
   width: 100%;
 }
 
@@ -4709,7 +4795,7 @@ Array [
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -4729,7 +4815,7 @@ Array [
   border-right-width: 0;
 }
 
-.c12 {
+.c13 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -4753,22 +4839,22 @@ Array [
   border-bottom-width: 0;
 }
 
-.c12:not(:first-child) {
+.c13:not(:first-child) {
   border-left-width: 0;
 }
 
-.c12:not(:last-child) {
+.c13:not(:last-child) {
   border-right-width: 0;
 }
 
-.c13 {
+.c14 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 3.75rem;
   display: table-cell;
@@ -4778,11 +4864,11 @@ Array [
   border-bottom-width: 0;
 }
 
-.c13:not(:first-child) {
+.c14:not(:first-child) {
   border-left-width: 0;
 }
 
-.c13:not(:last-child) {
+.c14:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -4871,7 +4957,7 @@ Array [
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c12 {
+  .c13 {
     width: 10rem;
     display: table-cell;
   }
@@ -4953,25 +5039,29 @@ Array [
                 <span>
                     Status 
                 </span>
-                <svg
-                    height="6"
-                    style={
-                        Object {
-                            "transform": "rotate(0deg)",
-                          }
-                    }
-                    viewBox="0 0 9.6 6"
-                    width="9.6"
-                    xmlns="http://www.w3.org/2000/svg"
+                <div
+                    className="c12"
                 >
-                    <path
-                        d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                        fill="rgb(73, 73, 73)"
-                    />
-                </svg>
+                    <svg
+                        height="6"
+                        style={
+                            Object {
+                                "transform": "rotate(0deg)",
+                              }
+                        }
+                        viewBox="0 0 9.6 6"
+                        width="9.6"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                            fill="rgb(73, 73, 73)"
+                        />
+                    </svg>
+                </div>
             </th>
             <th
-                className="c12"
+                className="c13"
                 disabled={undefined}
                 name="th"
                 onClick={[Function]}
@@ -4982,7 +5072,7 @@ Array [
                 </span>
             </th>
             <th
-                className="c13"
+                className="c14"
                 disabled={undefined}
                 name="th"
                 selected={undefined}
@@ -4990,7 +5080,7 @@ Array [
         </tr>
     </thead>
     <tbody
-        className="c14"
+        className="c15"
         disabled={undefined}
         name="tbody"
         selected={undefined}
@@ -5012,6 +5102,28 @@ Array [
   padding: 8rem;
 }
 
+.c1 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -5043,28 +5155,6 @@ Array [
   align-items: center;
 }
 
-.c1 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
 .c5 {
   color: rgb(151,151,151);
   text-align: center;
@@ -5427,6 +5517,11 @@ Array [
   font: inherit;
 }
 
+.c11 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
 .c7 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -5572,7 +5667,7 @@ Array [
   border-top-right-radius: 0.25rem;
 }
 
-.c14 {
+.c15 {
   width: 100%;
 }
 
@@ -5583,7 +5678,7 @@ Array [
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -5635,7 +5730,7 @@ Array [
   border-right-width: 0;
 }
 
-.c11 {
+.c12 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -5659,38 +5754,6 @@ Array [
   border-bottom-width: 0;
 }
 
-.c11:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c11:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c12 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
 .c12:not(:first-child) {
   border-left-width: 0;
 }
@@ -5708,8 +5771,15 @@ Array [
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -5724,6 +5794,31 @@ Array [
   border-right-width: 0;
 }
 
+.c14 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c14:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c14:not(:last-child) {
+  border-right-width: 0;
+}
+
 .c2 {
   display: table-row;
   color: rgb(73,73,73);
@@ -5745,7 +5840,7 @@ Array [
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c12 {
+  .c13 {
     width: 10rem;
     display: table-cell;
   }
@@ -5816,25 +5911,29 @@ Array [
                 <span>
                     Name 
                 </span>
-                <svg
-                    height="6"
-                    style={
-                        Object {
-                            "transform": "rotate(180deg)",
-                          }
-                    }
-                    viewBox="0 0 9.6 6"
-                    width="9.6"
-                    xmlns="http://www.w3.org/2000/svg"
+                <div
+                    className="c11"
                 >
-                    <path
-                        d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                        fill="rgb(73, 73, 73)"
-                    />
-                </svg>
+                    <svg
+                        height="6"
+                        style={
+                            Object {
+                                "transform": "rotate(180deg)",
+                              }
+                        }
+                        viewBox="0 0 9.6 6"
+                        width="9.6"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                            fill="rgb(73, 73, 73)"
+                        />
+                    </svg>
+                </div>
             </th>
             <th
-                className="c11"
+                className="c12"
                 disabled={undefined}
                 name="th"
                 onClick={[Function]}
@@ -5845,7 +5944,7 @@ Array [
                 </span>
             </th>
             <th
-                className="c12"
+                className="c13"
                 disabled={undefined}
                 name="th"
                 onClick={[Function]}
@@ -5856,7 +5955,7 @@ Array [
                 </span>
             </th>
             <th
-                className="c13"
+                className="c14"
                 disabled={undefined}
                 name="th"
                 selected={undefined}
@@ -5864,7 +5963,7 @@ Array [
         </tr>
     </thead>
     <tbody
-        className="c14"
+        className="c15"
         disabled={undefined}
         name="tbody"
         selected={undefined}
@@ -5886,6 +5985,28 @@ Array [
   padding: 8rem;
 }
 
+.c1 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -5917,28 +6038,6 @@ Array [
   align-items: center;
 }
 
-.c1 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
 .c5 {
   color: rgb(151,151,151);
   text-align: center;
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 12c14724..5e90072c 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
@@ -315,7 +315,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 
 .c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c27:active,
@@ -419,7 +419,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 
 .c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c33:active,
@@ -515,7 +515,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 
 .c35:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c35:active,
@@ -625,7 +625,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 
 .c40:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c40:active,
@@ -767,7 +767,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 
 .c41:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c41:active,
@@ -893,6 +893,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 .c43 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 1;
 }
 
 .c2 {
@@ -2151,7 +2152,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 
 .c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c33:active,
@@ -2247,7 +2248,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 
 .c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c27:active,
@@ -2352,7 +2353,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 
 .c39:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c39:active,
@@ -2472,7 +2473,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 
 .c40:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c40:active,
@@ -2582,6 +2583,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 .c42 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 1;
 }
 
 .c2 {
@@ -4078,7 +4080,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 
 .c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c33:active,
@@ -4174,7 +4176,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 
 .c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c27:active,
@@ -4279,7 +4281,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 
 .c39:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c39:active,
@@ -4399,7 +4401,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 
 .c40:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c40:active,
@@ -4509,6 +4511,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 .c42 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 1;
 }
 
 .c2 {
@@ -6060,7 +6063,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c27:active,
@@ -6164,7 +6167,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c36:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c36:active,
@@ -6260,7 +6263,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c38:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c38:active,
@@ -6370,7 +6373,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c43:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c43:active,
@@ -6512,7 +6515,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c44:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c44:active,
@@ -6638,6 +6641,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c46 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 1;
 }
 
 .c2 {
@@ -7920,7 +7924,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 
 .c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c33:active,
@@ -8016,7 +8020,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 
 .c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c27:active,
@@ -8121,7 +8125,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 
 .c39:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c39:active,
@@ -8241,7 +8245,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 
 .c40:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c40:active,
@@ -8351,6 +8355,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
 .c42 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 1;
 }
 
 .c2 {
@@ -9609,7 +9614,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 
 .c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c33:active,
@@ -9705,7 +9710,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 
 .c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c27:active,
@@ -9810,7 +9815,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 
 .c39:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c39:active,
@@ -9930,7 +9935,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 
 .c40:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c40:active,
@@ -10040,6 +10045,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 .c42 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 1;
 }
 
 .c2 {
@@ -11312,7 +11318,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 
 .c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c27:active,
@@ -11416,7 +11422,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 
 .c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c33:active,
@@ -11512,7 +11518,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 
 .c35:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c35:active,
@@ -11622,7 +11628,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 
 .c40:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c40:active,
@@ -11764,7 +11770,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 
 .c41:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c41:active,
@@ -11891,6 +11897,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 .c43 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 1;
 }
 
 .c2 {
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap
index ddadd19b..c28a9f22 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap
@@ -127,7 +127,7 @@ exports[`renders <Toolbar /> without throwing 1`] = `
 
 .c7:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c7:active,
@@ -421,7 +421,7 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
 
 .c7:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c7:active,
@@ -720,7 +720,7 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
 
 .c7:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c7:active,
@@ -1031,7 +1031,7 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
 
 .c7:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c7:active,
@@ -1325,7 +1325,7 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
 
 .c7:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c7:active,
@@ -1619,7 +1619,7 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
 
 .c7:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c7:active,
@@ -1913,7 +1913,7 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
 
 .c7:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c7:active,
diff --git a/consoles/my-joy-instances/src/components/instances/footer.js b/consoles/my-joy-instances/src/components/instances/footer.js
index 62824014..66d3ec41 100644
--- a/consoles/my-joy-instances/src/components/instances/footer.js
+++ b/consoles/my-joy-instances/src/components/instances/footer.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
-import { withTheme } from 'styled-components';
 import { Margin } from 'styled-components-spacing';
 import Flex from 'styled-flex-component';
 
@@ -16,172 +15,159 @@ import {
 
 const { SmallOnly, Medium } = QueryBreakpoints;
 
-export default withTheme(
-  ({
-    submitting = false,
-    statuses = {},
-    allowedActions = {},
-    onStart,
-    onStop,
-    onReboot,
-    onRemove,
-    theme = {}
-  }) => (
-    <StickyFooter fixed bottom fill="#FAFAFA">
-      <Row between="xs" middle="xs">
-        <Col xs={7}>
-          <Flex>
-            {onStart && [
-              <SmallOnly key="small-only">
+export default ({
+  submitting = false,
+  statuses = {},
+  allowedActions = {},
+  onStart,
+  onStop,
+  onReboot,
+  onRemove
+}) => (
+  <StickyFooter fill="#FAFAFA" fixed bottom>
+    <Row between="xs" middle="xs">
+      <Col xs={7}>
+        <Flex>
+          {onStart && [
+            <SmallOnly key="small-only">
+              <Button
+                type="button"
+                onClick={onStart}
+                disabled={submitting || !allowedActions.start}
+                loading={submitting && statuses.starting}
+                secondary
+                small
+                icon
+              >
+                <StartIcon disabled={submitting || !allowedActions.start} />
+              </Button>
+            </SmallOnly>,
+            <Margin right="1">
+              <Medium key="medium">
                 <Button
                   type="button"
                   onClick={onStart}
                   disabled={submitting || !allowedActions.start}
                   loading={submitting && statuses.starting}
                   secondary
-                  small
                   icon
                 >
-                  <StartIcon disabled={submitting || !allowedActions.start} />
+                  <Margin right="1">
+                    <StartIcon disabled={submitting || !allowedActions.start} />
+                  </Margin>
+                  <span>Start</span>
                 </Button>
-              </SmallOnly>,
-              <Margin right={1}>
-                <Medium key="medium">
-                  <Button
-                    type="button"
-                    onClick={onStart}
-                    disabled={submitting || !allowedActions.start}
-                    loading={submitting && statuses.starting}
-                    secondary
-                    icon
-                  >
-                    <Margin right={1}>
-                      <StartIcon
-                        disabled={submitting || !allowedActions.start}
-                      />
-                    </Margin>
-                    <span>Start</span>
-                  </Button>
-                </Medium>
-              </Margin>
-            ]}
-            {onStop && [
-              <SmallOnly key="small-only">
+              </Medium>
+            </Margin>
+          ]}
+          {onStop && [
+            <SmallOnly key="small-only">
+              <Button
+                type="button"
+                onClick={onStop}
+                disabled={submitting || !allowedActions.stop}
+                loading={submitting && statuses.stopping}
+                secondary
+                small
+                icon
+              >
+                <StopIcon disabled={submitting || !allowedActions.stop} />
+              </Button>
+            </SmallOnly>,
+            <Margin right="1">
+              <Medium key="medium">
                 <Button
                   type="button"
                   onClick={onStop}
                   disabled={submitting || !allowedActions.stop}
                   loading={submitting && statuses.stopping}
                   secondary
-                  small
                   icon
                 >
-                  <StopIcon disabled={submitting || !allowedActions.stop} />
+                  <Margin right="1">
+                    <StopIcon disabled={submitting || !allowedActions.stop} />
+                  </Margin>
+                  <span>Stop</span>
                 </Button>
-              </SmallOnly>,
-              <Margin right={1}>
-                <Medium key="medium">
-                  <Button
-                    type="button"
-                    onClick={onStop}
-                    disabled={submitting || !allowedActions.stop}
-                    loading={submitting && statuses.stopping}
-                    secondary
-                    icon
-                  >
-                    <Margin right={1}>
-                      <StopIcon disabled={submitting || !allowedActions.stop} />
-                    </Margin>
-                    <span>Stop</span>
-                  </Button>
-                </Medium>
-              </Margin>
-            ]}
-            {onReboot && [
-              <SmallOnly key="small-only">
+              </Medium>
+            </Margin>
+          ]}
+          {onReboot && [
+            <SmallOnly key="small-only">
+              <Button
+                type="button"
+                onClick={onReboot}
+                disabled={submitting || !allowedActions.reboot}
+                loading={submitting && statuses.rebooting}
+                secondary
+                small
+                icon
+              >
+                <ResetIcon disabled={submitting || !allowedActions.reboot} />
+              </Button>
+            </SmallOnly>,
+            <Margin right="1">
+              <Medium key="medium">
                 <Button
                   type="button"
                   onClick={onReboot}
                   disabled={submitting || !allowedActions.reboot}
                   loading={submitting && statuses.rebooting}
                   secondary
-                  small
                   icon
                 >
                   <ResetIcon disabled={submitting || !allowedActions.reboot} />
+                  <span>Reboot</span>
                 </Button>
-              </SmallOnly>,
-              <Margin right={1}>
-                <Medium key="medium">
-                  <Button
-                    type="button"
-                    onClick={onReboot}
-                    disabled={submitting || !allowedActions.reboot}
-                    loading={submitting && statuses.rebooting}
-                    secondary
-                    icon
-                  >
-                    <ResetIcon
-                      disabled={submitting || !allowedActions.reboot}
-                    />
-                    <span>Reboot</span>
-                  </Button>
-                </Medium>
-              </Margin>
-            ]}
-          </Flex>
-        </Col>
-        {onRemove && (
-          <Col xs={5}>
-            <SmallOnly key="small-only">
-              <Button
-                type="button"
-                onClick={onRemove}
-                disabled={submitting || !allowedActions.remove}
-                loading={submitting && statuses.removing}
-                secondary
-                error
-                right
-                small
-                icon
-              >
+              </Medium>
+            </Margin>
+          ]}
+        </Flex>
+      </Col>
+      {onRemove && (
+        <Col xs={5}>
+          <SmallOnly key="small-only">
+            <Button
+              type="button"
+              onClick={onRemove}
+              disabled={submitting || !allowedActions.remove}
+              loading={submitting && statuses.removing}
+              secondary
+              error
+              right
+              small
+              icon
+            >
+              <DeleteIcon
+                disabled={submitting}
+                fill={submitting || !allowedActions.remove ? undefined : 'red'}
+              />
+            </Button>
+          </SmallOnly>
+          <Medium key="medium">
+            <Button
+              type="button"
+              onClick={onRemove}
+              disabled={submitting || !allowedActions.remove}
+              loading={submitting && statuses.removing}
+              error
+              secondary
+              right
+              icon
+            >
+              <Margin right="1">
                 <DeleteIcon
-                  disabled={submitting}
+                  disabled={submitting || !allowedActions.remove}
                   fill={
-                    !(submitting || !allowedActions.remove)
-                      ? theme.red
-                      : undefined
+                    submitting || !allowedActions.remove ? undefined : 'red'
                   }
                 />
-              </Button>
-            </SmallOnly>
-            <Medium key="medium">
-              <Button
-                type="button"
-                onClick={onRemove}
-                disabled={submitting || !allowedActions.remove}
-                loading={submitting && statuses.removing}
-                error
-                secondary
-                right
-                icon
-              >
-                <Margin right={1}>
-                  <DeleteIcon
-                    disabled={submitting || !allowedActions.remove}
-                    fill={
-                      !(submitting || !allowedActions.remove)
-                        ? theme.red
-                        : undefined
-                    }
-                  />
-                </Margin>
-                <span>Remove</span>
-              </Button>
-            </Medium>
-          </Col>
-        )}
-      </Row>
-    </StickyFooter>
-  )
+              </Margin>
+              <span>Remove</span>
+            </Button>
+          </Medium>
+        </Col>
+      )}
+    </Row>
+  </StickyFooter>
 );
diff --git a/consoles/my-joy-instances/src/components/instances/list.js b/consoles/my-joy-instances/src/components/instances/list.js
index 76c497bf..1a396db1 100644
--- a/consoles/my-joy-instances/src/components/instances/list.js
+++ b/consoles/my-joy-instances/src/components/instances/list.js
@@ -64,7 +64,7 @@ const MarginalPaginationItem = styled(PaginationItem)`
 `;
 
 const Actions = styled(Flex)`
-  height: ${remcalc(48)};
+  height: 100%;
 `;
 
 const PopoverItem = styled(BasePopoverItem)`
@@ -124,7 +124,11 @@ export const Item = ({
     <TableTd xs="0" sm="130" middle left>
       <code>{id.substring(0, 7)}</code>
     </TableTd>
-    {!mutating ? (
+    {mutating ? (
+      <TableTd padding="0" hasBorder="left" center middle>
+        <ActionsIcon disabled />
+      </TableTd>
+    ) : (
       <PopoverContainer clickable>
         <TableTd padding="0" hasBorder="left">
           <PopoverTarget box>
@@ -160,10 +164,6 @@ export const Item = ({
           </Popover>
         </TableTd>
       </PopoverContainer>
-    ) : (
-      <TableTd padding="0" hasBorder="left" center middle>
-        <ActionsIcon disabled />
-      </TableTd>
     )}
   </TableTr>
 );
@@ -250,7 +250,7 @@ export default ({
           </TableTr>
         </TableThead>
         <TableTbody>{children}</TableTbody>
-        {!noInstances ? (
+        {noInstances ? null : (
           <PaginationTableFoot colSpan="6">
             <PaginationItem
               to={`${Global().pathname}?${queryString.stringify({
@@ -336,7 +336,7 @@ export default ({
               Next
             </PaginationItem>
           </PaginationTableFoot>
-        ) : null}
+        )}
       </Table>
     </form>
   );
diff --git a/consoles/my-joy-instances/src/components/instances/metadata.js b/consoles/my-joy-instances/src/components/instances/metadata.js
index 95923a41..631477a7 100644
--- a/consoles/my-joy-instances/src/components/instances/metadata.js
+++ b/consoles/my-joy-instances/src/components/instances/metadata.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KeyValue } from 'joyent-ui-toolkit';
+import { KeyValue } from 'joyent-ui-resource-widgets';
 import Editor from 'joyent-ui-toolkit/dist/es/editor';
 
 export const AddForm = props => (
diff --git a/consoles/my-joy-instances/src/components/instances/snapshots.js b/consoles/my-joy-instances/src/components/instances/snapshots.js
index d2289dc7..759c9b29 100644
--- a/consoles/my-joy-instances/src/components/instances/snapshots.js
+++ b/consoles/my-joy-instances/src/components/instances/snapshots.js
@@ -15,7 +15,6 @@ import {
   TableTbody,
   TableTd,
   Checkbox,
-  KeyValue,
   Popover,
   PopoverContainer,
   PopoverTarget,
@@ -24,7 +23,7 @@ import {
   DotIcon
 } from 'joyent-ui-toolkit';
 
-import { Empty } from 'joyent-ui-resource-widgets';
+import { Empty, KeyValue } from 'joyent-ui-resource-widgets';
 
 const stateColor = {
   QUEUED: 'primary',
@@ -38,7 +37,11 @@ const loadingState = {
 
 export const Item = ({ name, state, created, onStart, onRemove, mutating }) => (
   <TableTr>
-    {!mutating ? (
+    {mutating ? (
+      <TableTd colSpan="5">
+        <StatusLoader msg={loadingState[mutating]} />
+      </TableTd>
+    ) : (
       <Fragment>
         <TableTd padding="0" paddingLeft={remcalc(12)} middle left>
           <FormGroup paddingTop={remcalc(4)} name={name} field={Field}>
@@ -61,20 +64,16 @@ export const Item = ({ name, state, created, onStart, onRemove, mutating }) => (
               <ActionsIcon />
             </PopoverTarget>
             <Popover placement="top">
-              <Margin vertical={2} horizontal={3}>
+              <Margin vertical="2" horizontal="3">
                 <PopoverItem onClick={onStart}>Start</PopoverItem>
               </Margin>
-              <Margin vertical={2} horizontal={3}>
+              <Margin vertical="2" horizontal="3">
                 <PopoverItem onClick={onRemove}>Remove</PopoverItem>
               </Margin>
             </Popover>
           </TableTd>
         </PopoverContainer>
       </Fragment>
-    ) : (
-      <TableTd colSpan="5">
-        <StatusLoader msg={loadingState[mutating]} />
-      </TableTd>
     )}
   </TableTr>
 );
@@ -171,6 +170,6 @@ export default ({
           : null}
       </TableTbody>
     </Table>
-    {!snapshots.length ? <Empty borderTop>You have no Snapshots</Empty> : null}
+    {snapshots.length ? null : <Empty borderTop>You have no Snapshots</Empty>}
   </Fragment>
 );
diff --git a/consoles/my-joy-instances/src/components/instances/summary.js b/consoles/my-joy-instances/src/components/instances/summary.js
index 87432697..d0fb8be5 100644
--- a/consoles/my-joy-instances/src/components/instances/summary.js
+++ b/consoles/my-joy-instances/src/components/instances/summary.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
-import { default as Flex, FlexItem } from 'styled-flex-component';
-import styled, { withTheme } from 'styled-components';
+import Flex, { FlexItem } from 'styled-flex-component';
+import styled from 'styled-components';
 import { Margin, Padding } from 'styled-components-spacing';
 import titleCase from 'title-case';
 import get from 'lodash.get';
@@ -100,7 +100,7 @@ export const Meta = ({
 }) => [
   <Row middle="xs">
     <Col xs={12}>
-      <Margin bottom={1}>
+      <Margin bottom="1">
         <H2>
           {editingName ? (
             <form onSubmit={handleSubmit}>
@@ -114,7 +114,7 @@ export const Meta = ({
                   />
                   <FormMeta />
                 </FormGroup>
-                <Margin left={1}>
+                <Margin left="1">
                   <Button
                     type="submit"
                     disabled={submitting}
@@ -138,7 +138,7 @@ export const Meta = ({
       </Margin>
     </Col>
   </Row>,
-  <Margin vertical={1}>
+  <Margin vertical="1">
     <Flex>
       <TrimedLabel>
         {image && image.name ? titleCase(image.name) : 'Custom Image'}
@@ -161,7 +161,7 @@ export const Meta = ({
         {titleCase(state)}
       </Flex>
     </Flex>
-    <Margin top={1}>
+    <Margin top="1">
       <Flex>
         <Flex>
           <GreyLabel>Created: </GreyLabel>
@@ -177,227 +177,218 @@ export const Meta = ({
   </Margin>
 ];
 
-export default withTheme(
-  ({
-    instance = {},
-    starting = false,
-    stopping = false,
-    rebooting = false,
-    removing = false,
-    onAction,
-    theme = {},
-    ...props
-  }) => (
-    <Row>
-      <Col xs={12} sm={12} md={9}>
-        <Card>
-          <CardOutlet>
-            <Padding all={5}>
-              <Meta {...instance} {...props} />
-              <Margin top={3}>
-                <Row between="xs">
-                  <Col xs={9}>
-                    <Flex>
-                      <FlexItem>
-                        <Margin right={1}>
-                          <ButtonGroup>
-                            {instance.state === 'STOPPED' ? (
-                              <Button
-                                type="button"
-                                loading={starting}
-                                disabled={instance.state !== 'STOPPED'}
-                                onClick={() => onAction('start')}
-                                secondary
-                                bold
-                                icon
-                              >
-                                <Margin right={2}>
-                                  <StartIcon
-                                    disabled={instance.state !== 'STOPPED'}
-                                  />
-                                </Margin>
-                                <span>Start</span>
-                              </Button>
-                            ) : (
-                              <Button
-                                type="button"
-                                loading={stopping}
-                                disabled={instance.state !== 'RUNNING'}
-                                onClick={() => onAction('stop')}
-                                secondary
-                                bold
-                                icon
-                              >
-                                <Margin right={2}>
-                                  <StopIcon
-                                    disabled={instance.state !== 'RUNNING'}
-                                  />
-                                </Margin>
-                                <span>Stop</span>
-                              </Button>
-                            )}
-                            <PopoverButton secondary>
-                              <PopoverItem
-                                disabled={instance.state === 'RUNNING'}
-                                onClick={() =>
-                                  instance.state === 'RUNNING'
-                                    ? null
-                                    : onAction('start')
-                                }
-                              >
-                                Start
-                              </PopoverItem>
-                              <PopoverItem
-                                disabled={instance.state === 'STOPPED'}
-                                onClick={() =>
-                                  instance.state === 'STOPPED'
-                                    ? null
-                                    : onAction('reboot')
-                                }
-                              >
-                                Restart
-                              </PopoverItem>
-                              <PopoverItem
-                                disabled={instance.state === 'STOPPED'}
-                                onClick={() =>
-                                  instance.state === 'STOPPED'
-                                    ? null
-                                    : onAction('stop')
-                                }
-                              >
-                                Stop
-                              </PopoverItem>
-                            </PopoverButton>
-                          </ButtonGroup>
-                        </Margin>
-                      </FlexItem>
-                      <FlexItem>
-                        <Button
-                          href={`${GLOBAL.origin}/images/~create/${
-                            instance.id
-                          }`}
-                          target="__blank"
-                          rel="noopener noreferrer"
-                          secondary
-                          bold
-                          icon
-                        >
-                          Create Image
-                        </Button>
-                      </FlexItem>
-                    </Flex>
-                  </Col>
-                  <Col xs={3}>
-                    <SmallOnly>
+export default ({
+  instance = {},
+  starting = false,
+  stopping = false,
+  rebooting = false,
+  removing = false,
+  onAction,
+  ...props
+}) => (
+  <Row>
+    <Col xs={12} sm={12} md={9}>
+      <Card>
+        <CardOutlet>
+          <Padding all={5}>
+            <Meta {...instance} {...props} />
+            <Margin top="3">
+              <Row between="xs">
+                <Col xs={9}>
+                  <Flex>
+                    <FlexItem>
+                      <Margin right="1">
+                        <ButtonGroup>
+                          {instance.state === 'STOPPED' ? (
+                            <Button
+                              type="button"
+                              loading={starting}
+                              disabled={instance.state !== 'STOPPED'}
+                              onClick={() => onAction('start')}
+                              secondary
+                              bold
+                              icon
+                            >
+                              <Margin right="2">
+                                <StartIcon
+                                  disabled={instance.state !== 'STOPPED'}
+                                />
+                              </Margin>
+                              <span>Start</span>
+                            </Button>
+                          ) : (
+                            <Button
+                              type="button"
+                              loading={stopping}
+                              disabled={instance.state !== 'RUNNING'}
+                              onClick={() => onAction('stop')}
+                              secondary
+                              bold
+                              icon
+                            >
+                              <Margin right="2">
+                                <StopIcon
+                                  disabled={instance.state !== 'RUNNING'}
+                                />
+                              </Margin>
+                              <span>Stop</span>
+                            </Button>
+                          )}
+                          <PopoverButton secondary>
+                            <PopoverItem
+                              disabled={instance.state === 'RUNNING'}
+                              onClick={() =>
+                                instance.state === 'RUNNING'
+                                  ? null
+                                  : onAction('start')
+                              }
+                            >
+                              Start
+                            </PopoverItem>
+                            <PopoverItem
+                              disabled={instance.state === 'STOPPED'}
+                              onClick={() =>
+                                instance.state === 'STOPPED'
+                                  ? null
+                                  : onAction('reboot')
+                              }
+                            >
+                              Restart
+                            </PopoverItem>
+                            <PopoverItem
+                              disabled={instance.state === 'STOPPED'}
+                              onClick={() =>
+                                instance.state === 'STOPPED'
+                                  ? null
+                                  : onAction('stop')
+                              }
+                            >
+                              Stop
+                            </PopoverItem>
+                          </PopoverButton>
+                        </ButtonGroup>
+                      </Margin>
+                    </FlexItem>
+                    <FlexItem>
                       <Button
-                        type="button"
-                        loading={removing}
-                        disabled={
-                          ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-                        }
-                        onClick={() => onAction('remove')}
-                        secondary
-                        small
-                        right
-                        icon
-                        error
-                      >
-                        <Margin right={2}>
-                          <DeleteIcon
-                            fill={theme.red}
-                            disabled={
-                              ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-                            }
-                          />
-                        </Margin>
-                      </Button>
-                    </SmallOnly>
-                    <Medium>
-                      <Button
-                        type="button"
-                        loading={removing}
-                        disabled={
-                          ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-                        }
-                        onClick={() => onAction('remove')}
+                        href={`${GLOBAL.origin}/images/~create/${instance.id}`}
+                        target="__blank"
+                        rel="noopener noreferrer"
                         secondary
                         bold
-                        right
                         icon
-                        error
                       >
-                        <Margin right={2}>
-                          <DeleteIcon
-                            fill={
-                              ['RUNNING', 'STOPPED'].indexOf(instance.state) >=
-                              0
-                                ? theme.red
-                                : undefined
-                            }
-                            disabled={
-                              ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
-                            }
-                          />
-                        </Margin>
-                        <span>Delete</span>
+                        Create Image
                       </Button>
-                    </Medium>
-                  </Col>
-                </Row>
-              </Margin>
-              <Margin bottom={5} top={3}>
-                <Divider height={1} />
-              </Margin>
-              <Margin bottom={3}>
+                    </FlexItem>
+                  </Flex>
+                </Col>
+                <Col xs={3}>
+                  <SmallOnly>
+                    <Button
+                      type="button"
+                      loading={removing}
+                      disabled={
+                        ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                      }
+                      onClick={() => onAction('remove')}
+                      secondary
+                      small
+                      right
+                      icon
+                      error
+                    >
+                      <Margin right="2">
+                        <DeleteIcon
+                          fill="red"
+                          disabled={
+                            ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                          }
+                        />
+                      </Margin>
+                    </Button>
+                  </SmallOnly>
+                  <Medium>
+                    <Button
+                      type="button"
+                      loading={removing}
+                      disabled={
+                        ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                      }
+                      onClick={() => onAction('remove')}
+                      secondary
+                      bold
+                      right
+                      icon
+                      error
+                    >
+                      <Margin right="2">
+                        <DeleteIcon
+                          fill={
+                            ['RUNNING', 'STOPPED'].indexOf(instance.state) >= 0
+                              ? 'red'
+                              : undefined
+                          }
+                          disabled={
+                            ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                          }
+                        />
+                      </Margin>
+                      <span>Delete</span>
+                    </Button>
+                  </Medium>
+                </Col>
+              </Row>
+            </Margin>
+            <Margin bottom="5" top="3">
+              <Divider height={1} />
+            </Margin>
+            <Margin bottom="3">
+              <CopiableField
+                text={(instance.id || '').split('-')[0]}
+                label="Short ID"
+              />
+            </Margin>
+            <Margin bottom="3">
+              <CopiableField text={instance.id} label="ID" />
+            </Margin>
+            <Margin bottom="3">
+              <CopiableField text={instance.compute_node} label="CN UUID" />
+            </Margin>
+            {instance.image &&
+              instance.image.id && (
+                <Margin bottom="3">
+                  <CopiableField text={instance.image.id} label="Image UUID" />
+                </Margin>
+              )}
+            <Margin bottom="3">
+              <CopiableField
+                text={`ssh root@${instance.primary_ip}`}
+                label="Login"
+              />
+            </Margin>
+            {get(instance, 'ips.public', []).map((ip, i, ips) => (
+              <Margin bottom="3">
                 <CopiableField
-                  text={(instance.id || '').split('-')[0]}
-                  label="Short ID"
+                  key={`public-${i}`}
+                  label={`Public IP address ${ips.length > 1 ? i + 1 : ''}`}
+                  text={ip}
                 />
               </Margin>
-              <Margin bottom={3}>
-                <CopiableField text={instance.id} label="ID" />
-              </Margin>
-              <Margin bottom={3}>
-                <CopiableField text={instance.compute_node} label="CN UUID" />
-              </Margin>
-              {instance.image &&
-                instance.image.id && (
-                  <Margin bottom={3}>
-                    <CopiableField
-                      text={instance.image.id}
-                      label="Image UUID"
-                    />
-                  </Margin>
-                )}
-              <Margin bottom={3}>
+            ))}
+            {get(instance, 'ips.private', []).map((ip, i, ips) => (
+              <Margin bottom="3">
                 <CopiableField
-                  text={`ssh root@${instance.primary_ip}`}
-                  label="Login"
+                  key={`private-${i}`}
+                  noMargin={i === ips.length - 1}
+                  label={`Private IP address ${ips.length > 1 ? i + 1 : ''}`}
+                  text={ip}
                 />
               </Margin>
-              {get(instance, 'ips.public', []).map((ip, i, ips) => (
-                <Margin bottom={3}>
-                  <CopiableField
-                    key={`public-${i}`}
-                    label={`Public IP address ${ips.length > 1 ? i + 1 : ''}`}
-                    text={ip}
-                  />
-                </Margin>
-              ))}
-              {get(instance, 'ips.private', []).map((ip, i, ips) => (
-                <Margin bottom={3}>
-                  <CopiableField
-                    key={`private-${i}`}
-                    noMargin={i === ips.length - 1}
-                    label={`Private IP address ${ips.length > 1 ? i + 1 : ''}`}
-                    text={ip}
-                  />
-                </Margin>
-              ))}
-            </Padding>
-          </CardOutlet>
-        </Card>
-      </Col>
-    </Row>
-  )
+            ))}
+          </Padding>
+        </CardOutlet>
+      </Card>
+    </Col>
+  </Row>
 );
diff --git a/consoles/my-joy-instances/src/components/instances/toolbar.js b/consoles/my-joy-instances/src/components/instances/toolbar.js
index c375b96c..cb46734e 100644
--- a/consoles/my-joy-instances/src/components/instances/toolbar.js
+++ b/consoles/my-joy-instances/src/components/instances/toolbar.js
@@ -18,7 +18,7 @@ export const Toolbar = ({
   <Flex justifyBetween alignEnd>
     <FormGroup name="filter" field={Field}>
       <FormLabel>{searchLabel}</FormLabel>
-      <Margin top={0.5}>
+      <Margin top="0.5">
         <Input placeholder={searchPlaceholder} disabled={!searchable} />
       </Margin>
     </FormGroup>
diff --git a/consoles/my-joy-instances/src/containers/create.js b/consoles/my-joy-instances/src/containers/create.js
index d7e92b0b..b87ba73b 100644
--- a/consoles/my-joy-instances/src/containers/create.js
+++ b/consoles/my-joy-instances/src/containers/create.js
@@ -7,15 +7,9 @@ import { SubmissionError, destroy } from 'redux-form';
 import { set, destroyAll } from 'react-redux-values';
 import intercept from 'apr-intercept';
 import get from 'lodash.get';
-import omit from 'lodash.omit';
-import uniqBy from 'lodash.uniqby';
-import constantCase from 'constant-case';
 
 import { H3, ViewContainer, Button } from 'joyent-ui-toolkit';
-import { Forms } from '../constants';
 import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
-import parseError from '../state/parse-error';
-import CreateInstanceMutation from '../graphql/create-instance.gql';
 
 import {
   Name,
@@ -27,9 +21,14 @@ import {
   UserScript,
   Firewall,
   CNS,
-  Affinity
+  Affinity,
+  generatePayload
 } from 'joyent-ui-instance-steps';
 
+import { Forms } from '@root/constants';
+import parseError from '@state/parse-error';
+import CreateInstanceMutation from '@graphql/create-instance.gql';
+
 const { IC_F } = Forms;
 const names = {
   name: 'IC_NAME',
@@ -94,7 +93,7 @@ class CreateInstance extends Component {
     const {
       name,
       image,
-      package: packageResult,
+      package: pkg,
       networks,
       tags,
       metadata,
@@ -105,7 +104,7 @@ class CreateInstance extends Component {
 
     return (
       <ViewContainer main>
-        <Margin top={5}>
+        <Margin top="5">
           <H3>Create Instance</H3>
         </Margin>
         <Padding top="5">
@@ -138,7 +137,7 @@ class CreateInstance extends Component {
                 next="networks"
                 saved={steps.package}
                 onDefocus={handleDefocus('package')}
-                preview={packageResult}
+                preview={pkg}
               />
             </Margin>
             <Margin bottom="5">
@@ -218,7 +217,7 @@ class CreateInstance extends Component {
               />
             </Margin>
           </ResourceSteps>
-          <Margin bottom={5}>
+          <Margin bottom="5">
             <ReduxForm form={IC_F} onSubmit={handleSubmit}>
               {({ handleSubmit, submitting }) => (
                 <form onSubmit={handleSubmit}>
@@ -277,94 +276,15 @@ export default compose(
     };
   }),
   connect(null, (dispatch, { steps = {}, forms, history, createInstance }) => {
-    const parseAffRule = ({
-      conditional,
-      placement,
-      type: identity,
-      name,
-      pattern,
-      value
-    }) => {
-      const type = constantCase(
-        `${conditional}_${placement === 'same' ? 'equal' : 'not_equal'}`
-      );
-
-      const patterns = {
-        equalling: value => value,
-        starting: value => `/^${value}/`
-      };
-
-      const _name = identity === 'name' ? 'instance' : name;
-      const _value = patterns[pattern](type === 'name' ? name : value);
-
-      return {
-        type,
-        key: _name,
-        value: _value
-      };
-    };
-
     return {
       handleDefocus: name => value => {
         return dispatch(set({ name: names[name], value }));
       },
 
       handleSubmit: async () => {
-        const _affinity = steps.affinity ? parseAffRule(steps.affinity) : null;
-        const _name = steps.name && steps.name.name.toLowerCase();
-
-        const _metadata =
-          (steps.metadata && steps.metadata.map(a => omit(a, 'open'))) || [];
-
-        const _tags =
-          (steps.tags &&
-            uniqBy(steps.tags.map(a => omit(a, 'expanded')), 'name').map(a =>
-              omit(a, 'expanded')
-            )) ||
-          [];
-
-        const _networks = steps.networks && steps.networks.map(({ id }) => id);
-
-        if (steps['user-script'] && steps['user-script'].lines) {
-          _metadata.push({
-            name: 'user-script',
-            value: steps['user-script'].script
-          });
-        }
-
-        if (steps.cns) {
-          _tags.push({
-            name: 'triton.cns.disable',
-            value: !steps.cns.cnsEnabled
-          });
-        }
-
-        if (
-          steps.cns &&
-          (steps.cns.serviceNames &&
-            steps.cns.serviceNames.length &&
-            steps.cns.cnsEnabled)
-        ) {
-          _tags.push({
-            name: 'triton.cns.services',
-            value: steps.cns.serviceNames.join(',')
-          });
-        }
-
         const [err, res] = await intercept(
           createInstance({
-            variables: {
-              name: _name,
-              package: steps.package.id,
-              image: steps.image.id,
-              affinity: _affinity ? [_affinity] : [],
-              metadata: _metadata,
-              tags: _tags,
-              firewall_enabled: steps.firewall
-                ? steps.firewall.enabled
-                : undefined,
-              networks: _networks && _networks.length ? _networks : undefined
-            }
+            variables: generatePayload(steps)
           })
         );
 
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 d1b4b1a8..3d5ab764 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
@@ -114,6 +114,7 @@ exports[`renders <Cns /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c33 {
@@ -173,7 +174,7 @@ exports[`renders <Cns /> without throwing 1`] = `
 
 .c31:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c31:active,
@@ -218,6 +219,45 @@ exports[`renders <Cns /> without throwing 1`] = `
 .c18 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
+}
+
+.c8 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c9 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
 }
 
 .c16 {
@@ -331,44 +371,6 @@ exports[`renders <Cns /> without throwing 1`] = `
   display: block;
 }
 
-.c8 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c9 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
 .c25 {
   display: inline-block;
   padding: 0;
@@ -545,10 +547,6 @@ exports[`renders <Cns /> without throwing 1`] = `
   display: none;
 }
 
-.c5 {
-  font-weight: 200;
-}
-
 .c12 {
   margin: 0;
 }
@@ -570,6 +568,10 @@ exports[`renders <Cns /> without throwing 1`] = `
   margin-bottom: 0;
 }
 
+.c5 {
+  font-weight: 200;
+}
+
 @media only screen and (min-width:48em) {
   .c1 {
     width: 46rem;
@@ -953,6 +955,7 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c15 {
@@ -972,30 +975,6 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c13 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 .c8 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -1034,6 +1013,30 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   background-color: transparent;
 }
 
+.c13 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c12 {
   display: inline-block;
   padding: 0;
@@ -1149,14 +1152,14 @@ exports[`renders <Cns disabled /> without throwing 1`] = `
   display: none;
 }
 
-.c5 {
-  font-weight: 200;
-}
-
 .c18 {
   margin: 0 6px;
 }
 
+.c5 {
+  font-weight: 200;
+}
+
 @media only screen and (min-width:48em) {
   .c1 {
     width: 46rem;
@@ -1505,6 +1508,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c43 {
@@ -1564,7 +1568,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
 
 .c41:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c41:active,
@@ -1624,6 +1628,45 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
 .c31 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
+}
+
+.c8 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c9 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
 }
 
 .c16 {
@@ -1737,44 +1780,6 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   display: block;
 }
 
-.c8 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c9 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
 .c36 {
   display: inline-block;
   padding: 0;
@@ -2068,10 +2073,6 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c5 {
-  font-weight: 200;
-}
-
 .c18 {
   padding-right: 0.75rem;
   margin-right: 0.75rem;
@@ -2099,6 +2100,10 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   margin-bottom: 0;
 }
 
+.c5 {
+  font-weight: 200;
+}
+
 @media only screen and (min-width:48em) {
   .c1 {
     width: 46rem;
@@ -3168,6 +3173,7 @@ exports[`renders <Cns loading /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c11 {
@@ -3541,6 +3547,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c38 {
@@ -3600,7 +3607,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
 
 .c36:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c36:active,
@@ -3645,7 +3652,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
 .c15 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -3653,6 +3660,45 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
 .c23 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
+}
+
+.c8 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c9 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
 }
 
 .c21 {
@@ -3742,73 +3788,6 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   display: block;
 }
 
-.c12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  border-radius: 0.1875rem;
-  width: 100%;
-}
-
-.c13 {
-  border-radius: 0.1875rem 0 0 0.1875rem;
-  min-width: 0.75rem;
-  background-color: rgb(0,152,88);
-  background-color: rgb(210,67,58);
-}
-
-.c14 {
-  padding: 1.125rem 1.125rem;
-}
-
-.c16 {
-  line-height: 0.875rem;
-  font-size: 0.8125rem;
-}
-
-.c8 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c9 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
 .c30 {
   display: inline-block;
   padding: 0;
@@ -3888,8 +3867,33 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c5 {
-  font-weight: 200;
+.c12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
+}
+
+.c13 {
+  border-radius: 0.1875rem 0 0 0.1875rem;
+  min-width: 0.75rem;
+  background-color: rgb(0,152,88);
+  background-color: rgb(210,67,58);
+}
+
+.c14 {
+  padding: 1.125rem 1.125rem;
+}
+
+.c16 {
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
 }
 
 .c17 {
@@ -3909,6 +3913,10 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   margin-bottom: 0;
 }
 
+.c5 {
+  font-weight: 200;
+}
+
 @media only screen and (min-width:48em) {
   .c1 {
     width: 46rem;
@@ -4342,6 +4350,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c43 {
@@ -4401,7 +4410,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
 
 .c41:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c41:active,
@@ -4461,6 +4470,45 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
 .c31 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
+}
+
+.c8 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c9 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
 }
 
 .c16 {
@@ -4574,44 +4622,6 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   display: block;
 }
 
-.c8 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c9 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
 .c36 {
   display: inline-block;
   padding: 0;
@@ -4998,10 +5008,6 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   flex-wrap: wrap;
 }
 
-.c5 {
-  font-weight: 200;
-}
-
 .c46 {
   margin-bottom: -0.375rem;
 }
@@ -5033,6 +5039,10 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   margin-bottom: 0;
 }
 
+.c5 {
+  font-weight: 200;
+}
+
 @media only screen and (min-width:48em) {
   .c1 {
     width: 46rem;
@@ -6192,6 +6202,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c38 {
@@ -6251,7 +6262,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
 
 .c36:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c36:active,
@@ -6296,7 +6307,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
 .c15 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -6304,6 +6315,45 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
 .c23 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
+}
+
+.c8 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c9 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
 }
 
 .c21 {
@@ -6417,73 +6467,6 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   display: block;
 }
 
-.c12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  border-radius: 0.1875rem;
-  width: 100%;
-}
-
-.c13 {
-  border-radius: 0.1875rem 0 0 0.1875rem;
-  min-width: 0.75rem;
-  background-color: rgb(0,152,88);
-  background-color: rgb(210,67,58);
-}
-
-.c14 {
-  padding: 1.125rem 1.125rem;
-}
-
-.c16 {
-  line-height: 0.875rem;
-  font-size: 0.8125rem;
-}
-
-.c8 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c9 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
 .c30 {
   display: inline-block;
   padding: 0;
@@ -6660,8 +6643,33 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   display: none;
 }
 
-.c5 {
-  font-weight: 200;
+.c12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
+}
+
+.c13 {
+  border-radius: 0.1875rem 0 0 0.1875rem;
+  min-width: 0.75rem;
+  background-color: rgb(0,152,88);
+  background-color: rgb(210,67,58);
+}
+
+.c14 {
+  padding: 1.125rem 1.125rem;
+}
+
+.c16 {
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
 }
 
 .c17 {
@@ -6685,6 +6693,10 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   margin-bottom: 0;
 }
 
+.c5 {
+  font-weight: 200;
+}
+
 @media only screen and (min-width:48em) {
   .c1 {
     width: 46rem;
@@ -7150,6 +7162,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c33 {
@@ -7209,7 +7222,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
 
 .c31:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c31:active,
@@ -7254,6 +7267,45 @@ exports[`renders <Cns services /> without throwing 1`] = `
 .c18 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
+}
+
+.c8 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c9 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
 }
 
 .c16 {
@@ -7367,44 +7419,6 @@ exports[`renders <Cns services /> without throwing 1`] = `
   display: block;
 }
 
-.c8 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c9 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
 .c25 {
   display: inline-block;
   padding: 0;
@@ -7622,10 +7636,6 @@ exports[`renders <Cns services /> without throwing 1`] = `
   flex-wrap: wrap;
 }
 
-.c5 {
-  font-weight: 200;
-}
-
 .c36 {
   margin-bottom: -0.375rem;
 }
@@ -7651,6 +7661,10 @@ exports[`renders <Cns services /> without throwing 1`] = `
   margin-bottom: 0;
 }
 
+.c5 {
+  font-weight: 200;
+}
+
 @media only screen and (min-width:48em) {
   .c1 {
     width: 46rem;
@@ -8142,6 +8156,7 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c15 {
@@ -8161,30 +8176,6 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c13 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 .c8 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -8223,6 +8214,30 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   background-color: transparent;
 }
 
+.c13 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c12 {
   display: inline-block;
   padding: 0;
@@ -8338,14 +8353,14 @@ exports[`renders <Cns services hostnames /> without throwing 1`] = `
   display: none;
 }
 
-.c5 {
-  font-weight: 200;
-}
-
 .c18 {
   margin: 0 6px;
 }
 
+.c5 {
+  font-weight: 200;
+}
+
 @media only screen and (min-width:48em) {
   .c1 {
     width: 46rem;
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 90c16d44..e4a96ed7 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
@@ -140,6 +140,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -983,6 +984,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -1888,6 +1890,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -2731,6 +2734,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -3561,6 +3565,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c7 {
@@ -3840,6 +3845,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c7 {
@@ -4202,6 +4208,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c25 {
@@ -4266,40 +4273,11 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
 .c11 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
 
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  border-radius: 0.1875rem;
-  width: 100%;
-}
-
-.c9 {
-  border-radius: 0.1875rem 0 0 0.1875rem;
-  min-width: 0.75rem;
-  background-color: rgb(0,152,88);
-  background-color: rgb(210,67,58);
-}
-
-.c10 {
-  padding: 1.125rem 1.125rem;
-}
-
-.c12 {
-  line-height: 0.875rem;
-  font-size: 0.8125rem;
-}
-
 .c29 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -4457,6 +4435,35 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
   cursor: pointer;
 }
 
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
+}
+
+.c9 {
+  border-radius: 0.1875rem 0 0 0.1875rem;
+  min-width: 0.75rem;
+  background-color: rgb(0,152,88);
+  background-color: rgb(210,67,58);
+}
+
+.c10 {
+  padding: 1.125rem 1.125rem;
+}
+
+.c12 {
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
+}
+
 .c33 {
   color: rgb(151,151,151);
   text-align: center;
@@ -5114,6 +5121,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c25 {
@@ -5178,40 +5186,11 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
 .c11 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
 
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  border-radius: 0.1875rem;
-  width: 100%;
-}
-
-.c9 {
-  border-radius: 0.1875rem 0 0 0.1875rem;
-  min-width: 0.75rem;
-  background-color: rgb(0,152,88);
-  background-color: rgb(210,67,58);
-}
-
-.c10 {
-  padding: 1.125rem 1.125rem;
-}
-
-.c12 {
-  line-height: 0.875rem;
-  font-size: 0.8125rem;
-}
-
 .c29 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -5369,6 +5348,35 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
   cursor: pointer;
 }
 
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
+}
+
+.c9 {
+  border-radius: 0.1875rem 0 0 0.1875rem;
+  min-width: 0.75rem;
+  background-color: rgb(0,152,88);
+  background-color: rgb(210,67,58);
+}
+
+.c10 {
+  padding: 1.125rem 1.125rem;
+}
+
+.c12 {
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
+}
+
 .c33 {
   color: rgb(151,151,151);
   text-align: center;
@@ -5980,6 +5988,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -6429,6 +6438,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -6960,6 +6970,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -7824,6 +7835,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -8273,6 +8285,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
@@ -8804,6 +8817,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c19 {
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 ddf6183b..099cf27c 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
@@ -14,8 +14,9 @@ exports[`renders <List /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c31 {
-  padding: 1.125rem;
+.c24 {
+  display: inline-block;
+  margin-left: 0.375rem;
 }
 
 .c32 {
@@ -125,7 +126,7 @@ exports[`renders <List /> without throwing 1`] = `
 
 .c12:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c12:active,
@@ -172,6 +173,44 @@ exports[`renders <List /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
+.c30 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c31 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
+}
+
 .c5 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -200,44 +239,6 @@ exports[`renders <List /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c29 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c30 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
 .c20 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -463,7 +464,7 @@ exports[`renders <List /> without throwing 1`] = `
   border-top-right-radius: 0.25rem;
 }
 
-.c28 {
+.c29 {
   width: 100%;
 }
 
@@ -474,7 +475,7 @@ exports[`renders <List /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -526,7 +527,7 @@ exports[`renders <List /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c24 {
+.c25 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -550,38 +551,6 @@ exports[`renders <List /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c24:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c24:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c25 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
 .c25:not(:first-child) {
   border-left-width: 0;
 }
@@ -631,8 +600,15 @@ exports[`renders <List /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -647,6 +623,31 @@ exports[`renders <List /> without throwing 1`] = `
   border-right-width: 0;
 }
 
+.c28 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c28:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c28:not(:last-child) {
+  border-right-width: 0;
+}
+
 .c16 {
   display: table-row;
   color: rgb(73,73,73);
@@ -707,14 +708,14 @@ exports[`renders <List /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c25 {
+  .c26 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c26 {
+  .c27 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -857,25 +858,29 @@ exports[`renders <List /> without throwing 1`] = `
             <span>
               Name 
             </span>
-            <svg
-              height="6"
-              style={
-                Object {
-                  "transform": "rotate(180deg)",
-                }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              className="c24"
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(73, 73, 73)"
-              />
-            </svg>
+              <svg
+                height="6"
+                style={
+                  Object {
+                    "transform": "rotate(180deg)",
+                  }
+                }
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(73, 73, 73)"
+                />
+              </svg>
+            </div>
           </th>
           <th
-            className="c24"
+            className="c25"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -886,7 +891,7 @@ exports[`renders <List /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c25"
+            className="c26"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -897,7 +902,7 @@ exports[`renders <List /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c26"
+            className="c27"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -908,7 +913,7 @@ exports[`renders <List /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c27"
+            className="c28"
             disabled={undefined}
             name="th"
             selected={undefined}
@@ -916,7 +921,7 @@ exports[`renders <List /> without throwing 1`] = `
         </tr>
       </thead>
       <tbody
-        className="c28"
+        className="c29"
         disabled={undefined}
         name="tbody"
         selected={undefined}
@@ -924,37 +929,21 @@ exports[`renders <List /> without throwing 1`] = `
     </table>
   </form>
   <div
-    className="c29"
+    className="c30"
     disabled={false}
     name="card"
   >
     <div
-      className="c30 c29"
+      className="c31 c30"
       disabled={false}
       name="card-outlet"
     >
-      <span
-        name="react-responsive-mock"
-        query="only screen and (max-width: 37.4375rem)"
+      <div
+        className="c32"
       >
-        <div
-          className="c31"
-        >
-          You haven't created any instances yet, but they're really easy to set up.
-                  Click above to get going.
-        </div>
-      </span>
-      <span
-        name="react-responsive-mock"
-        query="only screen and (min-width: 37.5rem)"
-      >
-        <div
-          className="c32"
-        >
-          You haven't created any instances yet, but they're really easy to set up.
-                  Click above to get going.
-        </div>
-      </span>
+        You haven't created any instances yet, but they're really easy to set up.
+                Click above to get going.
+      </div>
     </div>
   </div>
 </div>
@@ -974,12 +963,13 @@ exports[`renders <List error /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c14 {
-  margin-bottom: 1.875rem;
+.c31 {
+  display: inline-block;
+  margin-left: 0.375rem;
 }
 
-.c38 {
-  padding: 1.125rem;
+.c14 {
+  margin-bottom: 1.875rem;
 }
 
 .c39 {
@@ -1031,6 +1021,7 @@ exports[`renders <List error /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c13 {
@@ -1096,7 +1087,7 @@ exports[`renders <List error /> without throwing 1`] = `
 
 .c12:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c12:active,
@@ -1146,11 +1137,49 @@ exports[`renders <List error /> without throwing 1`] = `
 .c18 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
 
+.c37 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c38 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
+}
+
 .c5 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1179,73 +1208,6 @@ exports[`renders <List error /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  border-radius: 0.1875rem;
-  width: 100%;
-}
-
-.c16 {
-  border-radius: 0.1875rem 0 0 0.1875rem;
-  min-width: 0.75rem;
-  background-color: rgb(0,152,88);
-  background-color: rgb(210,67,58);
-}
-
-.c17 {
-  padding: 1.125rem 1.125rem;
-}
-
-.c19 {
-  line-height: 0.875rem;
-  font-size: 0.8125rem;
-}
-
-.c36 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c37 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
 .c27 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   display: none;
@@ -1449,6 +1411,35 @@ exports[`renders <List error /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
+.c15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
+}
+
+.c16 {
+  border-radius: 0.1875rem 0 0 0.1875rem;
+  min-width: 0.75rem;
+  background-color: rgb(0,152,88);
+  background-color: rgb(210,67,58);
+}
+
+.c17 {
+  padding: 1.125rem 1.125rem;
+}
+
+.c19 {
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
+}
+
 .c21 {
   overflow: hidden;
   border-spacing: 0;
@@ -1471,7 +1462,7 @@ exports[`renders <List error /> without throwing 1`] = `
   border-top-right-radius: 0.25rem;
 }
 
-.c35 {
+.c36 {
   width: 100%;
 }
 
@@ -1482,7 +1473,7 @@ exports[`renders <List error /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -1534,7 +1525,7 @@ exports[`renders <List error /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c31 {
+.c32 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -1558,38 +1549,6 @@ exports[`renders <List error /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c31:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c31:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c32 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
 .c32:not(:first-child) {
   border-left-width: 0;
 }
@@ -1639,8 +1598,15 @@ exports[`renders <List error /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -1655,6 +1621,31 @@ exports[`renders <List error /> without throwing 1`] = `
   border-right-width: 0;
 }
 
+.c35 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c35:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c35:not(:last-child) {
+  border-right-width: 0;
+}
+
 .c23 {
   display: table-row;
   color: rgb(73,73,73);
@@ -1715,14 +1706,14 @@ exports[`renders <List error /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c32 {
+  .c33 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c33 {
+  .c34 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -1890,25 +1881,29 @@ exports[`renders <List error /> without throwing 1`] = `
             <span>
               Name 
             </span>
-            <svg
-              height="6"
-              style={
-                Object {
-                  "transform": "rotate(180deg)",
-                }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              className="c31"
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(73, 73, 73)"
-              />
-            </svg>
+              <svg
+                height="6"
+                style={
+                  Object {
+                    "transform": "rotate(180deg)",
+                  }
+                }
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(73, 73, 73)"
+                />
+              </svg>
+            </div>
           </th>
           <th
-            className="c31"
+            className="c32"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -1919,7 +1914,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c32"
+            className="c33"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -1930,7 +1925,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c33"
+            className="c34"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -1941,7 +1936,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c34"
+            className="c35"
             disabled={undefined}
             name="th"
             selected={undefined}
@@ -1949,7 +1944,7 @@ exports[`renders <List error /> without throwing 1`] = `
         </tr>
       </thead>
       <tbody
-        className="c35"
+        className="c36"
         disabled={undefined}
         name="tbody"
         selected={undefined}
@@ -1957,37 +1952,21 @@ exports[`renders <List error /> without throwing 1`] = `
     </table>
   </form>
   <div
-    className="c36"
+    className="c37"
     disabled={false}
     name="card"
   >
     <div
-      className="c37 c36"
+      className="c38 c37"
       disabled={false}
       name="card-outlet"
     >
-      <span
-        name="react-responsive-mock"
-        query="only screen and (max-width: 37.4375rem)"
+      <div
+        className="c39"
       >
-        <div
-          className="c38"
-        >
-          You haven't created any instances yet, but they're really easy to set up.
-                  Click above to get going.
-        </div>
-      </span>
-      <span
-        name="react-responsive-mock"
-        query="only screen and (min-width: 37.5rem)"
-      >
-        <div
-          className="c39"
-        >
-          You haven't created any instances yet, but they're really easy to set up.
-                  Click above to get going.
-        </div>
-      </span>
+        You haven't created any instances yet, but they're really easy to set up.
+                Click above to get going.
+      </div>
     </div>
   </div>
 </div>
@@ -2007,7 +1986,18 @@ exports[`renders <List instances /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c47 {
+.c24 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
+.c44 {
+  display: inline-block;
+  margin-left: 0.375rem;
+  margin-right: 0.375rem;
+}
+
+.c50 {
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
   text-decoration-skip: objects;
@@ -2053,16 +2043,16 @@ exports[`renders <List instances /> without throwing 1`] = `
   font: inherit;
 }
 
-.c46 {
+.c49 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
 }
 
-.c32 {
+.c34 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c32:hover {
+.c34:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -2130,7 +2120,7 @@ exports[`renders <List instances /> without throwing 1`] = `
 
 .c12:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c12:active,
@@ -2147,7 +2137,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c33 {
+.c35 {
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 50%;
@@ -2157,7 +2147,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   margin-left: 0rem;
 }
 
-.c37 {
+.c39 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -2233,7 +2223,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c39 {
+.c41 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2473,20 +2463,20 @@ exports[`renders <List instances /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c40 {
+.c42 {
   width: 100%;
   background: rgb(250,250,250);
 }
 
-.c40 th:first-child {
+.c42 th:first-child {
   border-bottom-left-radius: 0.25rem;
 }
 
-.c40 th:last-child {
+.c42 th:last-child {
   border-bottom-right-radius: 0.25rem;
 }
 
-.c40 th {
+.c42 th {
   border-top-width: 0;
 }
 
@@ -2503,7 +2493,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   border-top-right-radius: 0.25rem;
 }
 
-.c28 {
+.c29 {
   width: 100%;
 }
 
@@ -2514,7 +2504,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -2566,7 +2556,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c24 {
+.c25 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -2590,38 +2580,6 @@ exports[`renders <List instances /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c24:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c24:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c25 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
 .c25:not(:first-child) {
   border-left-width: 0;
 }
@@ -2671,8 +2629,15 @@ exports[`renders <List instances /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -2687,7 +2652,32 @@ exports[`renders <List instances /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c41 {
+.c28 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c28:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c28:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c43 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -2705,15 +2695,37 @@ exports[`renders <List instances /> without throwing 1`] = `
   border-bottom-width: 0.0625rem !important;
 }
 
-.c41:not(:first-child) {
+.c43:not(:first-child) {
   border-left-width: 0;
 }
 
-.c41:not(:last-child) {
+.c43:not(:last-child) {
   border-right-width: 0;
 }
 
-.c30 {
+.c31 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c31:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c31:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c32 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -2727,59 +2739,11 @@ exports[`renders <List instances /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c30:not(:first-child) {
+.c32:not(:first-child) {
   border-left-width: 0;
 }
 
-.c30:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c34 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c34:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c34:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c35 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c35:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c35:not(:last-child) {
+.c32:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -2792,8 +2756,11 @@ exports[`renders <List instances /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
   border-bottom-width: 0;
-  border-left-width: 0.0625rem !important;
 }
 
 .c36:not(:first-child) {
@@ -2804,6 +2771,51 @@ exports[`renders <List instances /> without throwing 1`] = `
   border-right-width: 0;
 }
 
+.c37 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c37:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c37:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c38 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  border-bottom-width: 0;
+  border-left-width: 0.0625rem !important;
+}
+
+.c38:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c38:not(:last-child) {
+  border-right-width: 0;
+}
+
 .c16 {
   display: table-row;
   color: rgb(73,73,73);
@@ -2824,7 +2836,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c29 {
+.c30 {
   display: table-row;
   color: rgb(73,73,73);
   background-color: rgb(255,255,255);
@@ -2832,20 +2844,20 @@ exports[`renders <List instances /> without throwing 1`] = `
   box-sizing: border-box;
 }
 
-.c29:last-child {
+.c30:last-child {
   box-shadow: none;
 }
 
-.c29:last-child td {
+.c30:last-child td {
   border-bottom-width: 0.0625rem;
 }
 
-.c42 {
+.c45 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c45 {
+.c48 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   -webkit-text-decoration: none;
@@ -2857,15 +2869,15 @@ exports[`renders <List instances /> without throwing 1`] = `
   color: rgb(255,255,255);
 }
 
-.c43 {
+.c46 {
   margin-right: 0.1875rem;
 }
 
-.c48 {
+.c51 {
   margin-left: 0.1875rem;
 }
 
-.c31 {
+.c33 {
   color: rgb(73,73,73);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -2877,12 +2889,12 @@ exports[`renders <List instances /> without throwing 1`] = `
   display: block;
 }
 
-.c44 {
+.c47 {
   margin: 0 0.1875rem;
 }
 
-.c38 {
-  height: 3rem;
+.c40 {
+  height: 100%;
 }
 
 @media only screen and (min-width:48em) {
@@ -2925,28 +2937,28 @@ exports[`renders <List instances /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c25 {
+  .c26 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c26 {
+  .c27 {
     width: 8.125rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c34 {
+  .c36 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c35 {
+  .c37 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -3089,25 +3101,29 @@ exports[`renders <List instances /> without throwing 1`] = `
             <span>
               Name 
             </span>
-            <svg
-              height="6"
-              style={
-                Object {
-                  "transform": "rotate(180deg)",
-                }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              className="c24"
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(73, 73, 73)"
-              />
-            </svg>
+              <svg
+                height="6"
+                style={
+                  Object {
+                    "transform": "rotate(180deg)",
+                  }
+                }
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(73, 73, 73)"
+                />
+              </svg>
+            </div>
           </th>
           <th
-            className="c24"
+            className="c25"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -3118,7 +3134,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c25"
+            className="c26"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -3129,7 +3145,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c26"
+            className="c27"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -3140,7 +3156,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c27"
+            className="c28"
             disabled={undefined}
             name="th"
             selected={undefined}
@@ -3148,19 +3164,19 @@ exports[`renders <List instances /> without throwing 1`] = `
         </tr>
       </thead>
       <tbody
-        className="c28"
+        className="c29"
         disabled={undefined}
         name="tbody"
         selected={undefined}
       >
         <tr
-          className="c29"
+          className="c30"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <td
-            className="c30"
+            className="c31"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -3199,27 +3215,27 @@ exports[`renders <List instances /> without throwing 1`] = `
             </div>
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <a
               activeClassName="active"
-              className="c31 c32"
+              className="c33 c34"
               secondary={false}
               to="/instances/2252839a"
             />
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <span>
               <span
-                className="c33"
+                className="c35"
                 color="green"
                 size="0.75rem"
               />
@@ -3228,7 +3244,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             </span>
           </td>
           <td
-            className="c34"
+            className="c36"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -3236,7 +3252,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             almost NaN years
           </td>
           <td
-            className="c35"
+            className="c37"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -3246,14 +3262,14 @@ exports[`renders <List instances /> without throwing 1`] = `
             </code>
           </td>
           <td
-            className="c36"
+            className="c38"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
               box={true}
-              className="c37"
+              className="c39"
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
@@ -3265,7 +3281,7 @@ exports[`renders <List instances /> without throwing 1`] = `
               tag="div"
             >
               <div
-                className="c38 c39"
+                className="c40 c41"
               >
                 <svg
                   height="16"
@@ -3288,13 +3304,13 @@ exports[`renders <List instances /> without throwing 1`] = `
           </td>
         </tr>
         <tr
-          className="c29"
+          className="c30"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <td
-            className="c30"
+            className="c31"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -3333,27 +3349,27 @@ exports[`renders <List instances /> without throwing 1`] = `
             </div>
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <a
               activeClassName="active"
-              className="c31 c32"
+              className="c33 c34"
               secondary={false}
               to="/instances/f1bd1730"
             />
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <span>
               <span
-                className="c33"
+                className="c35"
                 color="green"
                 size="0.75rem"
               />
@@ -3362,7 +3378,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             </span>
           </td>
           <td
-            className="c34"
+            className="c36"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -3370,7 +3386,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             almost NaN years
           </td>
           <td
-            className="c35"
+            className="c37"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -3380,14 +3396,14 @@ exports[`renders <List instances /> without throwing 1`] = `
             </code>
           </td>
           <td
-            className="c36"
+            className="c38"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
               box={true}
-              className="c37"
+              className="c39"
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
@@ -3399,7 +3415,7 @@ exports[`renders <List instances /> without throwing 1`] = `
               tag="div"
             >
               <div
-                className="c38 c39"
+                className="c40 c41"
               >
                 <svg
                   height="16"
@@ -3423,7 +3439,7 @@ exports[`renders <List instances /> without throwing 1`] = `
         </tr>
       </tbody>
       <tfoot
-        className="c40"
+        className="c42"
         disabled={undefined}
         name="tfoot"
         selected={undefined}
@@ -3435,77 +3451,89 @@ exports[`renders <List instances /> without throwing 1`] = `
           selected={undefined}
         >
           <th
-            className="c41"
+            className="c43"
             colSpan="6"
             disabled={undefined}
             name="th"
             selected={undefined}
           >
-            <a
-              active={undefined}
-              activeClassName="active"
-              className="c42 c32"
-              disabled={false}
-              secondary={false}
-              to="/?limit=0&offset=0"
+            <div
+              className="c44"
             >
-              <svg
-                className="c43"
-                height="6"
-                innerRef={undefined}
-                left={true}
-                style={
-                  Object {
-                    "transform": "rotate(90deg)",
-                  }
-                }
-                viewBox="0 0 9.6 6"
-                width="9.6"
-                xmlns="http://www.w3.org/2000/svg"
+              <a
+                active={undefined}
+                activeClassName="active"
+                className="c45 c34"
+                disabled={false}
+                secondary={false}
+                to="/?limit=0&offset=0"
               >
-                <path
-                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                  fill="rgb(59, 70, 204)"
-                />
-              </svg>
-              Prev
-            </a>
-            <a
-              className="c44 c45 c32 c46 c47"
-              disabled={undefined}
-              to={null}
-            >
-              NaN
-            </a>
-            <a
-              active={undefined}
-              activeClassName="active"
-              className="c42 c32"
-              disabled={false}
-              secondary={false}
-              to="/?limit=0&offset=0"
-            >
-              Next
-              <svg
-                className="c48"
-                height="6"
-                innerRef={undefined}
-                right={true}
-                style={
-                  Object {
-                    "transform": "rotate(-90deg)",
+                <svg
+                  className="c46"
+                  height="6"
+                  innerRef={undefined}
+                  left={true}
+                  style={
+                    Object {
+                      "transform": "rotate(90deg)",
+                    }
                   }
-                }
-                viewBox="0 0 9.6 6"
-                width="9.6"
-                xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 9.6 6"
+                  width="9.6"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                    fill="rgb(59, 70, 204)"
+                  />
+                </svg>
+                Prev
+              </a>
+            </div>
+            <div
+              className="c44"
+            >
+              <a
+                className="c47 c48 c34 c49 c50"
+                disabled={undefined}
+                to={null}
               >
-                <path
-                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                  fill="rgb(59, 70, 204)"
-                />
-              </svg>
-            </a>
+                NaN
+              </a>
+            </div>
+            <div
+              className="c44"
+            >
+              <a
+                active={undefined}
+                activeClassName="active"
+                className="c45 c34"
+                disabled={false}
+                secondary={false}
+                to="/?limit=0&offset=0"
+              >
+                Next
+                <svg
+                  className="c51"
+                  height="6"
+                  innerRef={undefined}
+                  right={true}
+                  style={
+                    Object {
+                      "transform": "rotate(-90deg)",
+                    }
+                  }
+                  viewBox="0 0 9.6 6"
+                  width="9.6"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                    fill="rgb(59, 70, 204)"
+                  />
+                </svg>
+              </a>
+            </div>
           </th>
         </tr>
       </tfoot>
@@ -3528,17 +3556,28 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c58 {
+.c24 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
+.c44 {
+  display: inline-block;
+  margin-left: 0.375rem;
   margin-right: 0.375rem;
 }
 
-.c47 {
+.c61 {
+  margin-right: 0.375rem;
+}
+
+.c50 {
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
   text-decoration-skip: objects;
 }
 
-.c57 {
+.c60 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -3550,18 +3589,18 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   appearance: button;
 }
 
-.c57::-moz-focus-inner,
-.c57[type='button']::-moz-focus-inner,
-.c57[type='reset']::-moz-focus-inner,
-.c57[type='submit']::-moz-focus-inner {
+.c60::-moz-focus-inner,
+.c60[type='button']::-moz-focus-inner,
+.c60[type='reset']::-moz-focus-inner,
+.c60[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c57:-moz-focusring,
-.c57[type='button']:-moz-focusring,
-.c57[type='reset']:-moz-focusring,
-.c57[type='submit']:-moz-focusring {
+.c60:-moz-focusring,
+.c60[type='button']:-moz-focusring,
+.c60[type='reset']:-moz-focusring,
+.c60[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -3605,21 +3644,21 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   font: inherit;
 }
 
-.c46 {
+.c49 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
 }
 
-.c32 {
+.c34 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c32:hover {
+.c34:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c56 {
+.c59 {
   min-width: 7.5rem;
 }
 
@@ -3686,7 +3725,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 
 .c12:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c12:active,
@@ -3703,7 +3742,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c55 {
+.c58 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3764,7 +3803,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   align-items: center;
 }
 
-.c55:focus {
+.c58:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3772,318 +3811,55 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c55:hover {
+.c58:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c55:active,
-.c55:active:hover,
-.c55:active:focus {
+.c58:active,
+.c58:active:hover,
+.c58:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c55[disabled] {
+.c58[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c55:focus {
+.c58:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c55:hover {
+.c58:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c55:active,
-.c55:active:hover,
-.c55:active:focus {
+.c58:active,
+.c58:active:hover,
+.c58:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c55:focus {
+.c58:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c55:hover {
+.c58:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c55:active,
-.c55:active:hover,
-.c55:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c59 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c59:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c59:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c59:active,
-.c59:active:hover,
-.c59:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c59[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c59:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c59:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c59:active,
-.c59:active:hover,
-.c59:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c59:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c59:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c59:active,
-.c59:active:hover,
-.c59:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c61 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-  padding: 0.625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
-  min-height: 0rem;
-  height: auto;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  float: right;
-}
-
-.c61:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c61:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c61:active,
-.c61:active:hover,
-.c61:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c61[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c61:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c61:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c61:active,
-.c61:active:hover,
-.c61:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c61:focus {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c61:hover {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c61:active,
-.c61:active:hover,
-.c61:active:focus {
-  background-color: rgba(210,67,58,0.1);
-  border-color: rgb(205,37,27);
-}
-
-.c61:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c61:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c61:active,
-.c61:active:hover,
-.c61:active:focus {
+.c58:active,
+.c58:active:hover,
+.c58:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
@@ -4129,10 +3905,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
   cursor: not-allowed;
   pointer-events: none;
   color: rgb(216,216,216);
@@ -4146,7 +3918,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  float: right;
 }
 
 .c62:focus {
@@ -4159,7 +3930,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 
 .c62:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c62:active,
@@ -4193,25 +3964,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c62:focus {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c62:hover {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c62:active,
-.c62:active:hover,
-.c62:active:focus {
-  background-color: rgba(210,67,58,0.1);
-  border-color: rgb(205,37,27);
-}
-
 .c62:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
@@ -4229,7 +3981,294 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c64 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  padding: 0.625rem 1.125rem;
+  font-size: 0.8125rem;
+  min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  float: right;
+}
+
+.c64:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c64:hover {
+  background-color: rgb(72,83,217);
+  border-color: rgb(45,56,132);
+}
+
+.c64:active,
+.c64:active:hover,
+.c64:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c64[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c64:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c64:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c64:active,
+.c64:active:hover,
+.c64:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c64:focus {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c64:hover {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c64:active,
+.c64:active:hover,
+.c64:active:focus {
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
+}
+
+.c64:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c64:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c64:active,
+.c64:active:hover,
+.c64:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c65 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  float: right;
+}
+
+.c65:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c65:hover {
+  background-color: rgb(72,83,217);
+  border-color: rgb(45,56,132);
+}
+
+.c65:active,
+.c65:active:hover,
+.c65:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c65[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c65:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c65:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c65:active,
+.c65:active:hover,
+.c65:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c65:focus {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c65:hover {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c65:active,
+.c65:active:hover,
+.c65:active:focus {
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
+}
+
+.c65:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c65:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c65:active,
+.c65:active:hover,
+.c65:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c35 {
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 50%;
@@ -4239,7 +4278,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   margin-left: 0rem;
 }
 
-.c37 {
+.c39 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -4272,7 +4311,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   margin-left: auto;
 }
 
-.c52 {
+.c55 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4291,7 +4330,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c53 {
+.c56 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4301,7 +4340,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   display: block;
 }
 
-.c60 {
+.c63 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4318,7 +4357,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c51 {
+.c54 {
   box-sizing: border-box;
   width: 100%;
   max-width: 78.75rem;
@@ -4332,7 +4371,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c50 {
+.c53 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4350,7 +4389,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   background: rgb(250,250,250);
 }
 
-.c49 {
+.c52 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4368,7 +4407,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  background-color: #FAFAFA;
   border-top: 0.0625rem solid rgb(216,216,216);
   max-height: 3.3125rem;
   min-height: 3.3125rem;
@@ -4410,7 +4448,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c39 {
+.c41 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4438,7 +4476,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   align-items: center;
 }
 
-.c54 {
+.c57 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4670,20 +4708,20 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c40 {
+.c42 {
   width: 100%;
   background: rgb(250,250,250);
 }
 
-.c40 th:first-child {
+.c42 th:first-child {
   border-bottom-left-radius: 0.25rem;
 }
 
-.c40 th:last-child {
+.c42 th:last-child {
   border-bottom-right-radius: 0.25rem;
 }
 
-.c40 th {
+.c42 th {
   border-top-width: 0;
 }
 
@@ -4700,7 +4738,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   border-top-right-radius: 0.25rem;
 }
 
-.c28 {
+.c29 {
   width: 100%;
 }
 
@@ -4711,7 +4749,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -4763,7 +4801,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c24 {
+.c25 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -4787,38 +4825,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c24:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c24:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c25 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
 .c25:not(:first-child) {
   border-left-width: 0;
 }
@@ -4868,8 +4874,15 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -4884,7 +4897,32 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c41 {
+.c28 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c28:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c28:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c43 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -4902,15 +4940,37 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   border-bottom-width: 0.0625rem !important;
 }
 
-.c41:not(:first-child) {
+.c43:not(:first-child) {
   border-left-width: 0;
 }
 
-.c41:not(:last-child) {
+.c43:not(:last-child) {
   border-right-width: 0;
 }
 
-.c30 {
+.c31 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c31:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c31:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c32 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -4924,59 +4984,11 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c30:not(:first-child) {
+.c32:not(:first-child) {
   border-left-width: 0;
 }
 
-.c30:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c34 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c34:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c34:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c35 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c35:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c35:not(:last-child) {
+.c32:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -4989,8 +5001,11 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
   border-bottom-width: 0;
-  border-left-width: 0.0625rem !important;
 }
 
 .c36:not(:first-child) {
@@ -5001,6 +5016,51 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   border-right-width: 0;
 }
 
+.c37 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c37:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c37:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c38 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  border-bottom-width: 0;
+  border-left-width: 0.0625rem !important;
+}
+
+.c38:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c38:not(:last-child) {
+  border-right-width: 0;
+}
+
 .c16 {
   display: table-row;
   color: rgb(73,73,73);
@@ -5021,7 +5081,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c29 {
+.c30 {
   display: table-row;
   color: rgb(73,73,73);
   background-color: rgb(255,255,255);
@@ -5029,20 +5089,20 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   box-sizing: border-box;
 }
 
-.c29:last-child {
+.c30:last-child {
   box-shadow: none;
 }
 
-.c29:last-child td {
+.c30:last-child td {
   border-bottom-width: 0.0625rem;
 }
 
-.c42 {
+.c45 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c45 {
+.c48 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   -webkit-text-decoration: none;
@@ -5054,15 +5114,15 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   color: rgb(255,255,255);
 }
 
-.c43 {
+.c46 {
   margin-right: 0.1875rem;
 }
 
-.c48 {
+.c51 {
   margin-left: 0.1875rem;
 }
 
-.c31 {
+.c33 {
   color: rgb(73,73,73);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -5074,12 +5134,12 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   display: block;
 }
 
-.c44 {
+.c47 {
   margin: 0 0.1875rem;
 }
 
-.c38 {
-  height: 3rem;
+.c40 {
+  height: 100%;
 }
 
 @media only screen and (min-width:48em) {
@@ -5101,7 +5161,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c52 {
+  .c55 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -5110,7 +5170,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c52 {
+  .c55 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -5119,7 +5179,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c53 {
+  .c56 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -5128,7 +5188,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c60 {
+  .c63 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -5158,49 +5218,49 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 }
 
 @media only screen and (max-width:37.4375rem) {
-  .c51 {
+  .c54 {
     padding-left: 0.75rem;
     padding-right: 0.75rem;
   }
 }
 
 @media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
-  .c51 {
+  .c54 {
     padding-left: 1.875rem;
     padding-right: 1.875rem;
   }
 }
 
 @media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
-  .c51 {
+  .c54 {
     padding-left: 4.375rem;
     padding-right: 4.375rem;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c25 {
+  .c26 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c26 {
+  .c27 {
     width: 8.125rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c34 {
+  .c36 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c35 {
+  .c37 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -5343,25 +5403,29 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             <span>
               Name 
             </span>
-            <svg
-              height="6"
-              style={
-                Object {
-                  "transform": "rotate(180deg)",
-                }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              className="c24"
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(73, 73, 73)"
-              />
-            </svg>
+              <svg
+                height="6"
+                style={
+                  Object {
+                    "transform": "rotate(180deg)",
+                  }
+                }
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(73, 73, 73)"
+                />
+              </svg>
+            </div>
           </th>
           <th
-            className="c24"
+            className="c25"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -5372,7 +5436,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c25"
+            className="c26"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -5383,7 +5447,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c26"
+            className="c27"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -5394,7 +5458,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c27"
+            className="c28"
             disabled={undefined}
             name="th"
             selected={undefined}
@@ -5402,19 +5466,19 @@ exports[`renders <List instances selected /> without throwing 1`] = `
         </tr>
       </thead>
       <tbody
-        className="c28"
+        className="c29"
         disabled={undefined}
         name="tbody"
         selected={undefined}
       >
         <tr
-          className="c29"
+          className="c30"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <td
-            className="c30"
+            className="c31"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -5453,14 +5517,14 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </div>
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <a
               activeClassName="active"
-              className="c31 c32"
+              className="c33 c34"
               secondary={false}
               to="/instances/2252839a-e698-ceec-afac-9549ad0c6624"
             >
@@ -5468,14 +5532,14 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </a>
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <span>
               <span
-                className="c33"
+                className="c35"
                 color="green"
                 size="0.75rem"
               />
@@ -5484,7 +5548,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </span>
           </td>
           <td
-            className="c34"
+            className="c36"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -5492,7 +5556,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             almost NaN years
           </td>
           <td
-            className="c35"
+            className="c37"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -5502,14 +5566,14 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </code>
           </td>
           <td
-            className="c36"
+            className="c38"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
               box={true}
-              className="c37"
+              className="c39"
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
@@ -5521,7 +5585,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
               tag="div"
             >
               <div
-                className="c38 c39"
+                className="c40 c41"
               >
                 <svg
                   height="16"
@@ -5544,13 +5608,13 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           </td>
         </tr>
         <tr
-          className="c29"
+          className="c30"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <td
-            className="c30"
+            className="c31"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -5589,14 +5653,14 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </div>
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <a
               activeClassName="active"
-              className="c31 c32"
+              className="c33 c34"
               secondary={false}
               to="/instances/f1bd1730-e8a6-4956-e738-d8e85cc6aa04"
             >
@@ -5604,14 +5668,14 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </a>
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <span>
               <span
-                className="c33"
+                className="c35"
                 color="green"
                 size="0.75rem"
               />
@@ -5620,7 +5684,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </span>
           </td>
           <td
-            className="c34"
+            className="c36"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -5628,7 +5692,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             almost NaN years
           </td>
           <td
-            className="c35"
+            className="c37"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -5638,14 +5702,14 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </code>
           </td>
           <td
-            className="c36"
+            className="c38"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
               box={true}
-              className="c37"
+              className="c39"
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
@@ -5657,7 +5721,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
               tag="div"
             >
               <div
-                className="c38 c39"
+                className="c40 c41"
               >
                 <svg
                   height="16"
@@ -5681,7 +5745,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
         </tr>
       </tbody>
       <tfoot
-        className="c40"
+        className="c42"
         disabled={undefined}
         name="tfoot"
         selected={undefined}
@@ -5693,104 +5757,116 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           selected={undefined}
         >
           <th
-            className="c41"
+            className="c43"
             colSpan="6"
             disabled={undefined}
             name="th"
             selected={undefined}
           >
-            <a
-              active={undefined}
-              activeClassName="active"
-              className="c42 c32"
-              disabled={false}
-              secondary={false}
-              to="/?limit=0&offset=0"
+            <div
+              className="c44"
             >
-              <svg
-                className="c43"
-                height="6"
-                innerRef={undefined}
-                left={true}
-                style={
-                  Object {
-                    "transform": "rotate(90deg)",
-                  }
-                }
-                viewBox="0 0 9.6 6"
-                width="9.6"
-                xmlns="http://www.w3.org/2000/svg"
+              <a
+                active={undefined}
+                activeClassName="active"
+                className="c45 c34"
+                disabled={false}
+                secondary={false}
+                to="/?limit=0&offset=0"
               >
-                <path
-                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                  fill="rgb(59, 70, 204)"
-                />
-              </svg>
-              Prev
-            </a>
-            <a
-              className="c44 c45 c32 c46 c47"
-              disabled={undefined}
-              to={null}
-            >
-              NaN
-            </a>
-            <a
-              active={undefined}
-              activeClassName="active"
-              className="c42 c32"
-              disabled={false}
-              secondary={false}
-              to="/?limit=0&offset=0"
-            >
-              Next
-              <svg
-                className="c48"
-                height="6"
-                innerRef={undefined}
-                right={true}
-                style={
-                  Object {
-                    "transform": "rotate(-90deg)",
+                <svg
+                  className="c46"
+                  height="6"
+                  innerRef={undefined}
+                  left={true}
+                  style={
+                    Object {
+                      "transform": "rotate(90deg)",
+                    }
                   }
-                }
-                viewBox="0 0 9.6 6"
-                width="9.6"
-                xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 9.6 6"
+                  width="9.6"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                    fill="rgb(59, 70, 204)"
+                  />
+                </svg>
+                Prev
+              </a>
+            </div>
+            <div
+              className="c44"
+            >
+              <a
+                className="c47 c48 c34 c49 c50"
+                disabled={undefined}
+                to={null}
               >
-                <path
-                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                  fill="rgb(59, 70, 204)"
-                />
-              </svg>
-            </a>
+                NaN
+              </a>
+            </div>
+            <div
+              className="c44"
+            >
+              <a
+                active={undefined}
+                activeClassName="active"
+                className="c45 c34"
+                disabled={false}
+                secondary={false}
+                to="/?limit=0&offset=0"
+              >
+                Next
+                <svg
+                  className="c51"
+                  height="6"
+                  innerRef={undefined}
+                  right={true}
+                  style={
+                    Object {
+                      "transform": "rotate(-90deg)",
+                    }
+                  }
+                  viewBox="0 0 9.6 6"
+                  width="9.6"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                    fill="rgb(59, 70, 204)"
+                  />
+                </svg>
+              </a>
+            </div>
           </th>
         </tr>
       </tfoot>
     </table>
   </form>
   <div
-    className="c49"
+    className="c52"
     fill="#FAFAFA"
   >
     <div
-      className="c50 c51 c1"
+      className="c53 c54 c1"
     >
       <div
-        className="c52"
+        className="c55"
       >
         <div
-          className="c53"
+          className="c56"
         >
           <div
-            className="c54"
+            className="c57"
           >
             <span
               name="react-responsive-mock"
               query="only screen and (max-width: 37.4375rem)"
             >
               <button
-                className="c55 c13 c56 c57"
+                className="c58 c13 c59 c60"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -5817,14 +5893,14 @@ exports[`renders <List instances selected /> without throwing 1`] = `
               </button>
             </span>
             <div
-              className="c58"
+              className="c61"
             >
               <span
                 name="react-responsive-mock"
                 query="only screen and (min-width: 37.5rem)"
               >
                 <button
-                  className="c59 c13 c56 c57"
+                  className="c62 c13 c59 c60"
                   data-ui-button="true"
                   disabled={true}
                   href=""
@@ -5833,7 +5909,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
                   type="button"
                 >
                   <div
-                    className="c58"
+                    className="c61"
                   >
                     <svg
                       height="14"
@@ -5863,7 +5939,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
               query="only screen and (max-width: 37.4375rem)"
             >
               <button
-                className="c55 c13 c56 c57"
+                className="c58 c13 c59 c60"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -5890,14 +5966,14 @@ exports[`renders <List instances selected /> without throwing 1`] = `
               </button>
             </span>
             <div
-              className="c58"
+              className="c61"
             >
               <span
                 name="react-responsive-mock"
                 query="only screen and (min-width: 37.5rem)"
               >
                 <button
-                  className="c59 c13 c56 c57"
+                  className="c62 c13 c59 c60"
                   data-ui-button="true"
                   disabled={true}
                   href=""
@@ -5906,7 +5982,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
                   type="button"
                 >
                   <div
-                    className="c58"
+                    className="c61"
                   >
                     <svg
                       height="14"
@@ -5936,7 +6012,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
               query="only screen and (max-width: 37.4375rem)"
             >
               <button
-                className="c55 c13 c56 c57"
+                className="c58 c13 c59 c60"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -5979,14 +6055,14 @@ exports[`renders <List instances selected /> without throwing 1`] = `
               </button>
             </span>
             <div
-              className="c58"
+              className="c61"
             >
               <span
                 name="react-responsive-mock"
                 query="only screen and (min-width: 37.5rem)"
               >
                 <button
-                  className="c59 c13 c56 c57"
+                  className="c62 c13 c59 c60"
                   data-ui-button="true"
                   disabled={true}
                   href=""
@@ -6035,14 +6111,14 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c60"
+          className="c63"
         >
           <span
             name="react-responsive-mock"
             query="only screen and (max-width: 37.4375rem)"
           >
             <button
-              className="c61 c13 c56 c57"
+              className="c64 c13 c59 c60"
               data-ui-button="true"
               disabled={true}
               href=""
@@ -6073,7 +6149,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             query="only screen and (min-width: 37.5rem)"
           >
             <button
-              className="c62 c13 c56 c57"
+              className="c65 c13 c59 c60"
               data-ui-button="true"
               disabled={true}
               href=""
@@ -6082,7 +6158,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
               type="button"
             >
               <div
-                className="c58"
+                className="c61"
               >
                 <svg
                   height="16"
@@ -6127,17 +6203,28 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c58 {
+.c24 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
+.c44 {
+  display: inline-block;
+  margin-left: 0.375rem;
   margin-right: 0.375rem;
 }
 
-.c47 {
+.c61 {
+  margin-right: 0.375rem;
+}
+
+.c50 {
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
   text-decoration-skip: objects;
 }
 
-.c57 {
+.c60 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -6149,18 +6236,18 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   appearance: button;
 }
 
-.c57::-moz-focus-inner,
-.c57[type='button']::-moz-focus-inner,
-.c57[type='reset']::-moz-focus-inner,
-.c57[type='submit']::-moz-focus-inner {
+.c60::-moz-focus-inner,
+.c60[type='button']::-moz-focus-inner,
+.c60[type='reset']::-moz-focus-inner,
+.c60[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c57:-moz-focusring,
-.c57[type='button']:-moz-focusring,
-.c57[type='reset']:-moz-focusring,
-.c57[type='submit']:-moz-focusring {
+.c60:-moz-focusring,
+.c60[type='button']:-moz-focusring,
+.c60[type='reset']:-moz-focusring,
+.c60[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -6204,21 +6291,21 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   font: inherit;
 }
 
-.c46 {
+.c49 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
 }
 
-.c32 {
+.c34 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c32:hover {
+.c34:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c56 {
+.c59 {
   min-width: 7.5rem;
 }
 
@@ -6285,7 +6372,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 
 .c12:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c12:active,
@@ -6302,7 +6389,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c55 {
+.c58 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6363,7 +6450,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   align-items: center;
 }
 
-.c55:focus {
+.c58:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -6371,318 +6458,55 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c55:hover {
+.c58:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c55:active,
-.c55:active:hover,
-.c55:active:focus {
+.c58:active,
+.c58:active:hover,
+.c58:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c55[disabled] {
+.c58[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c55:focus {
+.c58:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c55:hover {
+.c58:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c55:active,
-.c55:active:hover,
-.c55:active:focus {
+.c58:active,
+.c58:active:hover,
+.c58:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c55:focus {
+.c58:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c55:hover {
+.c58:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c55:active,
-.c55:active:hover,
-.c55:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c59 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c59:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c59:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c59:active,
-.c59:active:hover,
-.c59:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c59[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c59:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c59:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c59:active,
-.c59:active:hover,
-.c59:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c59:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c59:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c59:active,
-.c59:active:hover,
-.c59:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c61 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-  padding: 0.625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
-  min-height: 0rem;
-  height: auto;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  float: right;
-}
-
-.c61:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c61:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c61:active,
-.c61:active:hover,
-.c61:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c61[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c61:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c61:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c61:active,
-.c61:active:hover,
-.c61:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c61:focus {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c61:hover {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c61:active,
-.c61:active:hover,
-.c61:active:focus {
-  background-color: rgba(210,67,58,0.1);
-  border-color: rgb(205,37,27);
-}
-
-.c61:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c61:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c61:active,
-.c61:active:hover,
-.c61:active:focus {
+.c58:active,
+.c58:active:hover,
+.c58:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
@@ -6728,10 +6552,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
   cursor: not-allowed;
   pointer-events: none;
   color: rgb(216,216,216);
@@ -6745,7 +6565,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  float: right;
 }
 
 .c62:focus {
@@ -6758,7 +6577,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 
 .c62:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c62:active,
@@ -6792,25 +6611,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c62:focus {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c62:hover {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c62:active,
-.c62:active:hover,
-.c62:active:focus {
-  background-color: rgba(210,67,58,0.1);
-  border-color: rgb(205,37,27);
-}
-
 .c62:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
@@ -6828,7 +6628,294 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c64 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  padding: 0.625rem 1.125rem;
+  font-size: 0.8125rem;
+  min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  float: right;
+}
+
+.c64:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c64:hover {
+  background-color: rgb(72,83,217);
+  border-color: rgb(45,56,132);
+}
+
+.c64:active,
+.c64:active:hover,
+.c64:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c64[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c64:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c64:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c64:active,
+.c64:active:hover,
+.c64:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c64:focus {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c64:hover {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c64:active,
+.c64:active:hover,
+.c64:active:focus {
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
+}
+
+.c64:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c64:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c64:active,
+.c64:active:hover,
+.c64:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c65 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  float: right;
+}
+
+.c65:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c65:hover {
+  background-color: rgb(72,83,217);
+  border-color: rgb(45,56,132);
+}
+
+.c65:active,
+.c65:active:hover,
+.c65:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c65[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c65:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c65:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c65:active,
+.c65:active:hover,
+.c65:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c65:focus {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c65:hover {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c65:active,
+.c65:active:hover,
+.c65:active:focus {
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
+}
+
+.c65:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c65:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c65:active,
+.c65:active:hover,
+.c65:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c35 {
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 50%;
@@ -6838,7 +6925,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   margin-left: 0rem;
 }
 
-.c37 {
+.c39 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -6871,7 +6958,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   margin-left: auto;
 }
 
-.c52 {
+.c55 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6890,7 +6977,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c53 {
+.c56 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -6900,7 +6987,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   display: block;
 }
 
-.c60 {
+.c63 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -6917,7 +7004,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c51 {
+.c54 {
   box-sizing: border-box;
   width: 100%;
   max-width: 78.75rem;
@@ -6931,7 +7018,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c50 {
+.c53 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6949,7 +7036,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   background: rgb(250,250,250);
 }
 
-.c49 {
+.c52 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6967,7 +7054,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  background-color: #FAFAFA;
   border-top: 0.0625rem solid rgb(216,216,216);
   max-height: 3.3125rem;
   min-height: 3.3125rem;
@@ -7009,7 +7095,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c39 {
+.c41 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7037,7 +7123,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   align-items: center;
 }
 
-.c54 {
+.c57 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7269,20 +7355,20 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c40 {
+.c42 {
   width: 100%;
   background: rgb(250,250,250);
 }
 
-.c40 th:first-child {
+.c42 th:first-child {
   border-bottom-left-radius: 0.25rem;
 }
 
-.c40 th:last-child {
+.c42 th:last-child {
   border-bottom-right-radius: 0.25rem;
 }
 
-.c40 th {
+.c42 th {
   border-top-width: 0;
 }
 
@@ -7299,7 +7385,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   border-top-right-radius: 0.25rem;
 }
 
-.c28 {
+.c29 {
   width: 100%;
 }
 
@@ -7310,7 +7396,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -7362,7 +7448,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c24 {
+.c25 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -7386,38 +7472,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c24:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c24:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c25 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
 .c25:not(:first-child) {
   border-left-width: 0;
 }
@@ -7467,8 +7521,15 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -7483,7 +7544,32 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c41 {
+.c28 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c28:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c28:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c43 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -7501,15 +7587,37 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   border-bottom-width: 0.0625rem !important;
 }
 
-.c41:not(:first-child) {
+.c43:not(:first-child) {
   border-left-width: 0;
 }
 
-.c41:not(:last-child) {
+.c43:not(:last-child) {
   border-right-width: 0;
 }
 
-.c30 {
+.c31 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c31:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c31:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c32 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -7523,59 +7631,11 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c30:not(:first-child) {
+.c32:not(:first-child) {
   border-left-width: 0;
 }
 
-.c30:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c34 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c34:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c34:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c35 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c35:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c35:not(:last-child) {
+.c32:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -7588,8 +7648,11 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
   border-bottom-width: 0;
-  border-left-width: 0.0625rem !important;
 }
 
 .c36:not(:first-child) {
@@ -7600,6 +7663,51 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   border-right-width: 0;
 }
 
+.c37 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c37:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c37:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c38 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  border-bottom-width: 0;
+  border-left-width: 0.0625rem !important;
+}
+
+.c38:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c38:not(:last-child) {
+  border-right-width: 0;
+}
+
 .c16 {
   display: table-row;
   color: rgb(73,73,73);
@@ -7620,7 +7728,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c29 {
+.c30 {
   display: table-row;
   color: rgb(73,73,73);
   background-color: rgb(255,255,255);
@@ -7628,20 +7736,20 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   box-sizing: border-box;
 }
 
-.c29:last-child {
+.c30:last-child {
   box-shadow: none;
 }
 
-.c29:last-child td {
+.c30:last-child td {
   border-bottom-width: 0.0625rem;
 }
 
-.c42 {
+.c45 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c45 {
+.c48 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   -webkit-text-decoration: none;
@@ -7653,15 +7761,15 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   color: rgb(255,255,255);
 }
 
-.c43 {
+.c46 {
   margin-right: 0.1875rem;
 }
 
-.c48 {
+.c51 {
   margin-left: 0.1875rem;
 }
 
-.c31 {
+.c33 {
   color: rgb(73,73,73);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -7673,12 +7781,12 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   display: block;
 }
 
-.c44 {
+.c47 {
   margin: 0 0.1875rem;
 }
 
-.c38 {
-  height: 3rem;
+.c40 {
+  height: 100%;
 }
 
 @media only screen and (min-width:48em) {
@@ -7700,7 +7808,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c52 {
+  .c55 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -7709,7 +7817,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c52 {
+  .c55 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -7718,7 +7826,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c53 {
+  .c56 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -7727,7 +7835,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c60 {
+  .c63 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -7757,49 +7865,49 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 }
 
 @media only screen and (max-width:37.4375rem) {
-  .c51 {
+  .c54 {
     padding-left: 0.75rem;
     padding-right: 0.75rem;
   }
 }
 
 @media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
-  .c51 {
+  .c54 {
     padding-left: 1.875rem;
     padding-right: 1.875rem;
   }
 }
 
 @media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
-  .c51 {
+  .c54 {
     padding-left: 4.375rem;
     padding-right: 4.375rem;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c25 {
+  .c26 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c26 {
+  .c27 {
     width: 8.125rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c34 {
+  .c36 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c35 {
+  .c37 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -7942,25 +8050,29 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             <span>
               Name 
             </span>
-            <svg
-              height="6"
-              style={
-                Object {
-                  "transform": "rotate(180deg)",
-                }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              className="c24"
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(73, 73, 73)"
-              />
-            </svg>
+              <svg
+                height="6"
+                style={
+                  Object {
+                    "transform": "rotate(180deg)",
+                  }
+                }
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(73, 73, 73)"
+                />
+              </svg>
+            </div>
           </th>
           <th
-            className="c24"
+            className="c25"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -7971,7 +8083,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c25"
+            className="c26"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -7982,7 +8094,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c26"
+            className="c27"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -7993,7 +8105,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c27"
+            className="c28"
             disabled={undefined}
             name="th"
             selected={undefined}
@@ -8001,19 +8113,19 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
         </tr>
       </thead>
       <tbody
-        className="c28"
+        className="c29"
         disabled={undefined}
         name="tbody"
         selected={undefined}
       >
         <tr
-          className="c29"
+          className="c30"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <td
-            className="c30"
+            className="c31"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -8052,14 +8164,14 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </div>
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <a
               activeClassName="active"
-              className="c31 c32"
+              className="c33 c34"
               secondary={false}
               to="/instances/2252839a-e698-ceec-afac-9549ad0c6624"
             >
@@ -8067,14 +8179,14 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </a>
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <span>
               <span
-                className="c33"
+                className="c35"
                 color="green"
                 size="0.75rem"
               />
@@ -8083,7 +8195,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </span>
           </td>
           <td
-            className="c34"
+            className="c36"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -8091,7 +8203,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             almost NaN years
           </td>
           <td
-            className="c35"
+            className="c37"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -8101,14 +8213,14 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </code>
           </td>
           <td
-            className="c36"
+            className="c38"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
               box={true}
-              className="c37"
+              className="c39"
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
@@ -8120,7 +8232,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
               tag="div"
             >
               <div
-                className="c38 c39"
+                className="c40 c41"
               >
                 <svg
                   height="16"
@@ -8143,13 +8255,13 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           </td>
         </tr>
         <tr
-          className="c29"
+          className="c30"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <td
-            className="c30"
+            className="c31"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -8188,14 +8300,14 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </div>
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <a
               activeClassName="active"
-              className="c31 c32"
+              className="c33 c34"
               secondary={false}
               to="/instances/f1bd1730-e8a6-4956-e738-d8e85cc6aa04"
             >
@@ -8203,14 +8315,14 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </a>
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <span>
               <span
-                className="c33"
+                className="c35"
                 color="green"
                 size="0.75rem"
               />
@@ -8219,7 +8331,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </span>
           </td>
           <td
-            className="c34"
+            className="c36"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -8227,7 +8339,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             almost NaN years
           </td>
           <td
-            className="c35"
+            className="c37"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -8237,14 +8349,14 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </code>
           </td>
           <td
-            className="c36"
+            className="c38"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
               box={true}
-              className="c37"
+              className="c39"
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
@@ -8256,7 +8368,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
               tag="div"
             >
               <div
-                className="c38 c39"
+                className="c40 c41"
               >
                 <svg
                   height="16"
@@ -8280,7 +8392,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
         </tr>
       </tbody>
       <tfoot
-        className="c40"
+        className="c42"
         disabled={undefined}
         name="tfoot"
         selected={undefined}
@@ -8292,104 +8404,116 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           selected={undefined}
         >
           <th
-            className="c41"
+            className="c43"
             colSpan="6"
             disabled={undefined}
             name="th"
             selected={undefined}
           >
-            <a
-              active={undefined}
-              activeClassName="active"
-              className="c42 c32"
-              disabled={false}
-              secondary={false}
-              to="/?limit=0&offset=0"
+            <div
+              className="c44"
             >
-              <svg
-                className="c43"
-                height="6"
-                innerRef={undefined}
-                left={true}
-                style={
-                  Object {
-                    "transform": "rotate(90deg)",
-                  }
-                }
-                viewBox="0 0 9.6 6"
-                width="9.6"
-                xmlns="http://www.w3.org/2000/svg"
+              <a
+                active={undefined}
+                activeClassName="active"
+                className="c45 c34"
+                disabled={false}
+                secondary={false}
+                to="/?limit=0&offset=0"
               >
-                <path
-                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                  fill="rgb(59, 70, 204)"
-                />
-              </svg>
-              Prev
-            </a>
-            <a
-              className="c44 c45 c32 c46 c47"
-              disabled={undefined}
-              to={null}
-            >
-              NaN
-            </a>
-            <a
-              active={undefined}
-              activeClassName="active"
-              className="c42 c32"
-              disabled={false}
-              secondary={false}
-              to="/?limit=0&offset=0"
-            >
-              Next
-              <svg
-                className="c48"
-                height="6"
-                innerRef={undefined}
-                right={true}
-                style={
-                  Object {
-                    "transform": "rotate(-90deg)",
+                <svg
+                  className="c46"
+                  height="6"
+                  innerRef={undefined}
+                  left={true}
+                  style={
+                    Object {
+                      "transform": "rotate(90deg)",
+                    }
                   }
-                }
-                viewBox="0 0 9.6 6"
-                width="9.6"
-                xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 9.6 6"
+                  width="9.6"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                    fill="rgb(59, 70, 204)"
+                  />
+                </svg>
+                Prev
+              </a>
+            </div>
+            <div
+              className="c44"
+            >
+              <a
+                className="c47 c48 c34 c49 c50"
+                disabled={undefined}
+                to={null}
               >
-                <path
-                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                  fill="rgb(59, 70, 204)"
-                />
-              </svg>
-            </a>
+                NaN
+              </a>
+            </div>
+            <div
+              className="c44"
+            >
+              <a
+                active={undefined}
+                activeClassName="active"
+                className="c45 c34"
+                disabled={false}
+                secondary={false}
+                to="/?limit=0&offset=0"
+              >
+                Next
+                <svg
+                  className="c51"
+                  height="6"
+                  innerRef={undefined}
+                  right={true}
+                  style={
+                    Object {
+                      "transform": "rotate(-90deg)",
+                    }
+                  }
+                  viewBox="0 0 9.6 6"
+                  width="9.6"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                    fill="rgb(59, 70, 204)"
+                  />
+                </svg>
+              </a>
+            </div>
           </th>
         </tr>
       </tfoot>
     </table>
   </form>
   <div
-    className="c49"
+    className="c52"
     fill="#FAFAFA"
   >
     <div
-      className="c50 c51 c1"
+      className="c53 c54 c1"
     >
       <div
-        className="c52"
+        className="c55"
       >
         <div
-          className="c53"
+          className="c56"
         >
           <div
-            className="c54"
+            className="c57"
           >
             <span
               name="react-responsive-mock"
               query="only screen and (max-width: 37.4375rem)"
             >
               <button
-                className="c55 c13 c56 c57"
+                className="c58 c13 c59 c60"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -8416,14 +8540,14 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
               </button>
             </span>
             <div
-              className="c58"
+              className="c61"
             >
               <span
                 name="react-responsive-mock"
                 query="only screen and (min-width: 37.5rem)"
               >
                 <button
-                  className="c59 c13 c56 c57"
+                  className="c62 c13 c59 c60"
                   data-ui-button="true"
                   disabled={true}
                   href=""
@@ -8432,7 +8556,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
                   type="button"
                 >
                   <div
-                    className="c58"
+                    className="c61"
                   >
                     <svg
                       height="14"
@@ -8462,7 +8586,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
               query="only screen and (max-width: 37.4375rem)"
             >
               <button
-                className="c55 c13 c56 c57"
+                className="c58 c13 c59 c60"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -8489,14 +8613,14 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
               </button>
             </span>
             <div
-              className="c58"
+              className="c61"
             >
               <span
                 name="react-responsive-mock"
                 query="only screen and (min-width: 37.5rem)"
               >
                 <button
-                  className="c59 c13 c56 c57"
+                  className="c62 c13 c59 c60"
                   data-ui-button="true"
                   disabled={true}
                   href=""
@@ -8505,7 +8629,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
                   type="button"
                 >
                   <div
-                    className="c58"
+                    className="c61"
                   >
                     <svg
                       height="14"
@@ -8535,7 +8659,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
               query="only screen and (max-width: 37.4375rem)"
             >
               <button
-                className="c55 c13 c56 c57"
+                className="c58 c13 c59 c60"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -8578,14 +8702,14 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
               </button>
             </span>
             <div
-              className="c58"
+              className="c61"
             >
               <span
                 name="react-responsive-mock"
                 query="only screen and (min-width: 37.5rem)"
               >
                 <button
-                  className="c59 c13 c56 c57"
+                  className="c62 c13 c59 c60"
                   data-ui-button="true"
                   disabled={true}
                   href=""
@@ -8634,14 +8758,14 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c60"
+          className="c63"
         >
           <span
             name="react-responsive-mock"
             query="only screen and (max-width: 37.4375rem)"
           >
             <button
-              className="c61 c13 c56 c57"
+              className="c64 c13 c59 c60"
               data-ui-button="true"
               disabled={true}
               href=""
@@ -8672,7 +8796,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             query="only screen and (min-width: 37.5rem)"
           >
             <button
-              className="c62 c13 c56 c57"
+              className="c65 c13 c59 c60"
               data-ui-button="true"
               disabled={true}
               href=""
@@ -8681,7 +8805,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
               type="button"
             >
               <div
-                className="c58"
+                className="c61"
               >
                 <svg
                   height="16"
@@ -8726,17 +8850,28 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   margin-top: 0.1875rem;
 }
 
-.c58 {
+.c24 {
+  display: inline-block;
+  margin-left: 0.375rem;
+}
+
+.c44 {
+  display: inline-block;
+  margin-left: 0.375rem;
   margin-right: 0.375rem;
 }
 
-.c47 {
+.c61 {
+  margin-right: 0.375rem;
+}
+
+.c50 {
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
   text-decoration-skip: objects;
 }
 
-.c57 {
+.c60 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -8748,18 +8883,18 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   appearance: button;
 }
 
-.c57::-moz-focus-inner,
-.c57[type='button']::-moz-focus-inner,
-.c57[type='reset']::-moz-focus-inner,
-.c57[type='submit']::-moz-focus-inner {
+.c60::-moz-focus-inner,
+.c60[type='button']::-moz-focus-inner,
+.c60[type='reset']::-moz-focus-inner,
+.c60[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c57:-moz-focusring,
-.c57[type='button']:-moz-focusring,
-.c57[type='reset']:-moz-focusring,
-.c57[type='submit']:-moz-focusring {
+.c60:-moz-focusring,
+.c60[type='button']:-moz-focusring,
+.c60[type='reset']:-moz-focusring,
+.c60[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -8803,21 +8938,21 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   font: inherit;
 }
 
-.c46 {
+.c49 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
 }
 
-.c32 {
+.c34 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c32:hover {
+.c34:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c56 {
+.c59 {
   min-width: 7.5rem;
 }
 
@@ -8884,7 +9019,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 
 .c12:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c12:active,
@@ -8901,245 +9036,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   pointer-events: none;
 }
 
-.c60 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-  padding: 0.625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
-  min-height: 0rem;
-  height: auto;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c60:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c60:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c60:active,
-.c60:active:hover,
-.c60:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c60[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c60:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c60:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c60:active,
-.c60:active:hover,
-.c60:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c60:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c60:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c60:active,
-.c60:active:hover,
-.c60:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c61 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c61:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c61:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c61:active,
-.c61:active:hover,
-.c61:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c61[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c61:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c61:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c61:active,
-.c61:active:hover,
-.c61:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c61:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c61:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c61:active,
-.c61:active:hover,
-.c61:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
 .c63 {
   box-sizing: border-box;
   display: inline-block;
@@ -9181,10 +9077,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
   cursor: not-allowed;
   pointer-events: none;
   color: rgb(216,216,216);
@@ -9203,7 +9095,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  float: right;
 }
 
 .c63:focus {
@@ -9216,7 +9107,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 
 .c63:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c63:active,
@@ -9250,25 +9141,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-color: rgb(216,216,216);
 }
 
-.c63:focus {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c63:hover {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c63:active,
-.c63:active:hover,
-.c63:active:focus {
-  background-color: rgba(210,67,58,0.1);
-  border-color: rgb(205,37,27);
-}
-
 .c63:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
@@ -9327,10 +9199,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
   cursor: not-allowed;
   pointer-events: none;
   color: rgb(216,216,216);
@@ -9344,7 +9212,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  float: right;
 }
 
 .c64:focus {
@@ -9357,7 +9224,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 
 .c64:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c64:active,
@@ -9391,25 +9258,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-color: rgb(216,216,216);
 }
 
-.c64:focus {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c64:hover {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c64:active,
-.c64:active:hover,
-.c64:active:focus {
-  background-color: rgba(210,67,58,0.1);
-  border-color: rgb(205,37,27);
-}
-
 .c64:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
@@ -9427,7 +9275,294 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-color: rgb(250,250,250);
 }
 
-.c55 {
+.c66 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  padding: 0.625rem 1.125rem;
+  font-size: 0.8125rem;
+  min-width: 0rem;
+  min-height: 0rem;
+  height: auto;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  float: right;
+}
+
+.c66:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c66:hover {
+  background-color: rgb(72,83,217);
+  border-color: rgb(45,56,132);
+}
+
+.c66:active,
+.c66:active:hover,
+.c66:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c66[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c66:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c66:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c66:active,
+.c66:active:hover,
+.c66:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c66:focus {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c66:hover {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c66:active,
+.c66:active:hover,
+.c66:active:focus {
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
+}
+
+.c66:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c66:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c66:active,
+.c66:active:hover,
+.c66:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c67 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  float: right;
+}
+
+.c67:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c67:hover {
+  background-color: rgb(72,83,217);
+  border-color: rgb(45,56,132);
+}
+
+.c67:active,
+.c67:active:hover,
+.c67:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c67[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c67:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c67:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c67:active,
+.c67:active:hover,
+.c67:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c67:focus {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c67:hover {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c67:active,
+.c67:active:hover,
+.c67:active:focus {
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
+}
+
+.c67:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c67:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c67:active,
+.c67:active:hover,
+.c67:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c58 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -9483,7 +9618,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   align-items: center;
 }
 
-.c55:focus {
+.c58:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -9491,43 +9626,43 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-color: rgb(45,56,132);
 }
 
-.c55:hover {
+.c58:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c55:active,
-.c55:active:hover,
-.c55:active:focus {
+.c58:active,
+.c58:active:hover,
+.c58:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c55[disabled] {
+.c58[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c55:focus {
+.c58:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c55:hover {
+.c58:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c55:active,
-.c55:active:hover,
-.c55:active:focus {
+.c58:active,
+.c58:active:hover,
+.c58:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c59 {
+.c62 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -9578,7 +9713,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   align-items: center;
 }
 
-.c59:focus {
+.c62:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -9586,43 +9721,43 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-color: rgb(45,56,132);
 }
 
-.c59:hover {
+.c62:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c59:active,
-.c59:active:hover,
-.c59:active:focus {
+.c62:active,
+.c62:active:hover,
+.c62:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c59[disabled] {
+.c62[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c59:focus {
+.c62:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c59:hover {
+.c62:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c59:active,
-.c59:active:hover,
-.c59:active:focus {
+.c62:active,
+.c62:active:hover,
+.c62:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33 {
+.c35 {
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 50%;
@@ -9632,7 +9767,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   margin-left: 0rem;
 }
 
-.c37 {
+.c39 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -9665,7 +9800,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   margin-left: auto;
 }
 
-.c52 {
+.c55 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -9684,7 +9819,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   margin-left: -0.625rem;
 }
 
-.c53 {
+.c56 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -9694,7 +9829,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   display: block;
 }
 
-.c62 {
+.c65 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -9711,7 +9846,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   padding-bottom: 1.125rem;
 }
 
-.c51 {
+.c54 {
   box-sizing: border-box;
   width: 100%;
   max-width: 78.75rem;
@@ -9725,7 +9860,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   font-size: 1.3125rem;
 }
 
-.c50 {
+.c53 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9743,7 +9878,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   background: rgb(250,250,250);
 }
 
-.c49 {
+.c52 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9761,7 +9896,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  background-color: #FAFAFA;
   border-top: 0.0625rem solid rgb(216,216,216);
   max-height: 3.3125rem;
   min-height: 3.3125rem;
@@ -9803,7 +9937,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   align-items: flex-end;
 }
 
-.c39 {
+.c41 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9831,7 +9965,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   align-items: center;
 }
 
-.c54 {
+.c57 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10063,20 +10197,20 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   max-width: 100%;
 }
 
-.c40 {
+.c42 {
   width: 100%;
   background: rgb(250,250,250);
 }
 
-.c40 th:first-child {
+.c42 th:first-child {
   border-bottom-left-radius: 0.25rem;
 }
 
-.c40 th:last-child {
+.c42 th:last-child {
   border-bottom-right-radius: 0.25rem;
 }
 
-.c40 th {
+.c42 th {
   border-top-width: 0;
 }
 
@@ -10093,7 +10227,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-top-right-radius: 0.25rem;
 }
 
-.c28 {
+.c29 {
   width: 100%;
 }
 
@@ -10104,7 +10238,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-spacing: 0;
   white-space: nowrap;
   box-sizing: border-box;
-  padding: 0 1.5rem;
+  padding: 0 0rem;
   height: 3.75rem;
   width: 2rem;
   display: table-cell;
@@ -10156,7 +10290,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-right-width: 0;
 }
 
-.c24 {
+.c25 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -10180,38 +10314,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-bottom-width: 0;
 }
 
-.c24:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c24:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c25 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  border-bottom-width: 0;
-}
-
 .c25:not(:first-child) {
   border-left-width: 0;
 }
@@ -10261,8 +10363,15 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
   height: 2.625rem;
   color: rgb(189,189,189);
   font-weight: 500;
@@ -10277,7 +10386,32 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-right-width: 0;
 }
 
-.c41 {
+.c28 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  border-bottom-width: 0;
+}
+
+.c28:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c28:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c43 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -10295,15 +10429,37 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-bottom-width: 0.0625rem !important;
 }
 
-.c41:not(:first-child) {
+.c43:not(:first-child) {
   border-left-width: 0;
 }
 
-.c41:not(:last-child) {
+.c43:not(:last-child) {
   border-right-width: 0;
 }
 
-.c30 {
+.c31 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c31:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c31:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c32 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -10317,59 +10473,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-bottom-width: 0;
 }
 
-.c30:not(:first-child) {
+.c32:not(:first-child) {
   border-left-width: 0;
 }
 
-.c30:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c34 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c34:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c34:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c35 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c35:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c35:not(:last-child) {
+.c32:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -10382,8 +10490,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
   border-bottom-width: 0;
-  border-left-width: 0.0625rem !important;
 }
 
 .c36:not(:first-child) {
@@ -10394,6 +10505,51 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-right-width: 0;
 }
 
+.c37 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c37:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c37:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c38 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  height: 3.75rem;
+  border-bottom-width: 0;
+  border-left-width: 0.0625rem !important;
+}
+
+.c38:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c38:not(:last-child) {
+  border-right-width: 0;
+}
+
 .c16 {
   display: table-row;
   color: rgb(73,73,73);
@@ -10414,7 +10570,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-bottom-width: 0.0625rem;
 }
 
-.c29 {
+.c30 {
   display: table-row;
   color: rgb(73,73,73);
   background-color: rgb(255,255,255);
@@ -10422,20 +10578,20 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   box-sizing: border-box;
 }
 
-.c29:last-child {
+.c30:last-child {
   box-shadow: none;
 }
 
-.c29:last-child td {
+.c30:last-child td {
   border-bottom-width: 0.0625rem;
 }
 
-.c42 {
+.c45 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c45 {
+.c48 {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   -webkit-text-decoration: none;
@@ -10447,15 +10603,15 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   color: rgb(255,255,255);
 }
 
-.c43 {
+.c46 {
   margin-right: 0.1875rem;
 }
 
-.c48 {
+.c51 {
   margin-left: 0.1875rem;
 }
 
-.c31 {
+.c33 {
   color: rgb(73,73,73);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -10467,12 +10623,12 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   display: block;
 }
 
-.c44 {
+.c47 {
   margin: 0 0.1875rem;
 }
 
-.c38 {
-  height: 3rem;
+.c40 {
+  height: 100%;
 }
 
 @media only screen and (min-width:48em) {
@@ -10494,7 +10650,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 @media only screen and (min-width:0em) {
-  .c52 {
+  .c55 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -10503,7 +10659,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 @media only screen and (min-width:0em) {
-  .c52 {
+  .c55 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -10512,7 +10668,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 @media only screen and (min-width:0em) {
-  .c53 {
+  .c56 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -10521,7 +10677,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 @media only screen and (min-width:0em) {
-  .c62 {
+  .c65 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -10551,49 +10707,49 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 @media only screen and (max-width:37.4375rem) {
-  .c51 {
+  .c54 {
     padding-left: 0.75rem;
     padding-right: 0.75rem;
   }
 }
 
 @media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
-  .c51 {
+  .c54 {
     padding-left: 1.875rem;
     padding-right: 1.875rem;
   }
 }
 
 @media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
-  .c51 {
+  .c54 {
     padding-left: 4.375rem;
     padding-right: 4.375rem;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c25 {
+  .c26 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c26 {
+  .c27 {
     width: 8.125rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c34 {
+  .c36 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:37.4375rem) {
-  .c35 {
+  .c37 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -10736,25 +10892,29 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             <span>
               Name 
             </span>
-            <svg
-              height="6"
-              style={
-                Object {
-                  "transform": "rotate(180deg)",
-                }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              className="c24"
             >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgb(73, 73, 73)"
-              />
-            </svg>
+              <svg
+                height="6"
+                style={
+                  Object {
+                    "transform": "rotate(180deg)",
+                  }
+                }
+                viewBox="0 0 9.6 6"
+                width="9.6"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                  fill="rgb(73, 73, 73)"
+                />
+              </svg>
+            </div>
           </th>
           <th
-            className="c24"
+            className="c25"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -10765,7 +10925,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </span>
           </th>
           <th
-            className="c25"
+            className="c26"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -10776,7 +10936,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </span>
           </th>
           <th
-            className="c26"
+            className="c27"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -10787,7 +10947,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </span>
           </th>
           <th
-            className="c27"
+            className="c28"
             disabled={undefined}
             name="th"
             selected={undefined}
@@ -10795,19 +10955,19 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
         </tr>
       </thead>
       <tbody
-        className="c28"
+        className="c29"
         disabled={undefined}
         name="tbody"
         selected={undefined}
       >
         <tr
-          className="c29"
+          className="c30"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <td
-            className="c30"
+            className="c31"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -10846,14 +11006,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </div>
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <a
               activeClassName="active"
-              className="c31 c32"
+              className="c33 c34"
               secondary={false}
               to="/instances/2252839a-e698-ceec-afac-9549ad0c6624"
             >
@@ -10861,14 +11021,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </a>
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <span>
               <span
-                className="c33"
+                className="c35"
                 color="green"
                 size="0.75rem"
               />
@@ -10877,7 +11037,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </span>
           </td>
           <td
-            className="c34"
+            className="c36"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -10885,7 +11045,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             almost NaN years
           </td>
           <td
-            className="c35"
+            className="c37"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -10895,14 +11055,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </code>
           </td>
           <td
-            className="c36"
+            className="c38"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
               box={true}
-              className="c37"
+              className="c39"
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
@@ -10914,7 +11074,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
               tag="div"
             >
               <div
-                className="c38 c39"
+                className="c40 c41"
               >
                 <svg
                   height="16"
@@ -10937,13 +11097,13 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           </td>
         </tr>
         <tr
-          className="c29"
+          className="c30"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <td
-            className="c30"
+            className="c31"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -10982,14 +11142,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </div>
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <a
               activeClassName="active"
-              className="c31 c32"
+              className="c33 c34"
               secondary={false}
               to="/instances/f1bd1730-e8a6-4956-e738-d8e85cc6aa04"
             >
@@ -10997,14 +11157,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </a>
           </td>
           <td
-            className="c30"
+            className="c32"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <span>
               <span
-                className="c33"
+                className="c35"
                 color="green"
                 size="0.75rem"
               />
@@ -11013,7 +11173,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </span>
           </td>
           <td
-            className="c34"
+            className="c36"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -11021,7 +11181,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             almost NaN years
           </td>
           <td
-            className="c35"
+            className="c37"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -11031,14 +11191,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </code>
           </td>
           <td
-            className="c36"
+            className="c38"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
               box={true}
-              className="c37"
+              className="c39"
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
@@ -11050,7 +11210,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
               tag="div"
             >
               <div
-                className="c38 c39"
+                className="c40 c41"
               >
                 <svg
                   height="16"
@@ -11074,7 +11234,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
         </tr>
       </tbody>
       <tfoot
-        className="c40"
+        className="c42"
         disabled={undefined}
         name="tfoot"
         selected={undefined}
@@ -11086,104 +11246,116 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           selected={undefined}
         >
           <th
-            className="c41"
+            className="c43"
             colSpan="6"
             disabled={undefined}
             name="th"
             selected={undefined}
           >
-            <a
-              active={undefined}
-              activeClassName="active"
-              className="c42 c32"
-              disabled={false}
-              secondary={false}
-              to="/?limit=0&offset=0"
+            <div
+              className="c44"
             >
-              <svg
-                className="c43"
-                height="6"
-                innerRef={undefined}
-                left={true}
-                style={
-                  Object {
-                    "transform": "rotate(90deg)",
-                  }
-                }
-                viewBox="0 0 9.6 6"
-                width="9.6"
-                xmlns="http://www.w3.org/2000/svg"
+              <a
+                active={undefined}
+                activeClassName="active"
+                className="c45 c34"
+                disabled={false}
+                secondary={false}
+                to="/?limit=0&offset=0"
               >
-                <path
-                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                  fill="rgb(59, 70, 204)"
-                />
-              </svg>
-              Prev
-            </a>
-            <a
-              className="c44 c45 c32 c46 c47"
-              disabled={undefined}
-              to={null}
-            >
-              NaN
-            </a>
-            <a
-              active={undefined}
-              activeClassName="active"
-              className="c42 c32"
-              disabled={false}
-              secondary={false}
-              to="/?limit=0&offset=0"
-            >
-              Next
-              <svg
-                className="c48"
-                height="6"
-                innerRef={undefined}
-                right={true}
-                style={
-                  Object {
-                    "transform": "rotate(-90deg)",
+                <svg
+                  className="c46"
+                  height="6"
+                  innerRef={undefined}
+                  left={true}
+                  style={
+                    Object {
+                      "transform": "rotate(90deg)",
+                    }
                   }
-                }
-                viewBox="0 0 9.6 6"
-                width="9.6"
-                xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 9.6 6"
+                  width="9.6"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                    fill="rgb(59, 70, 204)"
+                  />
+                </svg>
+                Prev
+              </a>
+            </div>
+            <div
+              className="c44"
+            >
+              <a
+                className="c47 c48 c34 c49 c50"
+                disabled={undefined}
+                to={null}
               >
-                <path
-                  d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                  fill="rgb(59, 70, 204)"
-                />
-              </svg>
-            </a>
+                NaN
+              </a>
+            </div>
+            <div
+              className="c44"
+            >
+              <a
+                active={undefined}
+                activeClassName="active"
+                className="c45 c34"
+                disabled={false}
+                secondary={false}
+                to="/?limit=0&offset=0"
+              >
+                Next
+                <svg
+                  className="c51"
+                  height="6"
+                  innerRef={undefined}
+                  right={true}
+                  style={
+                    Object {
+                      "transform": "rotate(-90deg)",
+                    }
+                  }
+                  viewBox="0 0 9.6 6"
+                  width="9.6"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                    fill="rgb(59, 70, 204)"
+                  />
+                </svg>
+              </a>
+            </div>
           </th>
         </tr>
       </tfoot>
     </table>
   </form>
   <div
-    className="c49"
+    className="c52"
     fill="#FAFAFA"
   >
     <div
-      className="c50 c51 c1"
+      className="c53 c54 c1"
     >
       <div
-        className="c52"
+        className="c55"
       >
         <div
-          className="c53"
+          className="c56"
         >
           <div
-            className="c54"
+            className="c57"
           >
             <span
               name="react-responsive-mock"
               query="only screen and (max-width: 37.4375rem)"
             >
               <button
-                className="c55 c13 c56 c57"
+                className="c58 c13 c59 c60"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -11210,14 +11382,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
               </button>
             </span>
             <div
-              className="c58"
+              className="c61"
             >
               <span
                 name="react-responsive-mock"
                 query="only screen and (min-width: 37.5rem)"
               >
                 <button
-                  className="c59 c13 c56 c57"
+                  className="c62 c13 c59 c60"
                   data-ui-button="true"
                   disabled={false}
                   href=""
@@ -11226,7 +11398,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
                   type="button"
                 >
                   <div
-                    className="c58"
+                    className="c61"
                   >
                     <svg
                       height="14"
@@ -11256,7 +11428,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
               query="only screen and (max-width: 37.4375rem)"
             >
               <button
-                className="c60 c13 c56 c57"
+                className="c63 c13 c59 c60"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -11283,14 +11455,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
               </button>
             </span>
             <div
-              className="c58"
+              className="c61"
             >
               <span
                 name="react-responsive-mock"
                 query="only screen and (min-width: 37.5rem)"
               >
                 <button
-                  className="c61 c13 c56 c57"
+                  className="c64 c13 c59 c60"
                   data-ui-button="true"
                   disabled={true}
                   href=""
@@ -11299,7 +11471,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
                   type="button"
                 >
                   <div
-                    className="c58"
+                    className="c61"
                   >
                     <svg
                       height="14"
@@ -11329,7 +11501,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
               query="only screen and (max-width: 37.4375rem)"
             >
               <button
-                className="c60 c13 c56 c57"
+                className="c63 c13 c59 c60"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -11372,14 +11544,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
               </button>
             </span>
             <div
-              className="c58"
+              className="c61"
             >
               <span
                 name="react-responsive-mock"
                 query="only screen and (min-width: 37.5rem)"
               >
                 <button
-                  className="c61 c13 c56 c57"
+                  className="c64 c13 c59 c60"
                   data-ui-button="true"
                   disabled={true}
                   href=""
@@ -11428,14 +11600,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           </div>
         </div>
         <div
-          className="c62"
+          className="c65"
         >
           <span
             name="react-responsive-mock"
             query="only screen and (max-width: 37.4375rem)"
           >
             <button
-              className="c63 c13 c56 c57"
+              className="c66 c13 c59 c60"
               data-ui-button="true"
               disabled={true}
               href=""
@@ -11466,7 +11638,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             query="only screen and (min-width: 37.5rem)"
           >
             <button
-              className="c64 c13 c56 c57"
+              className="c67 c13 c59 c60"
               data-ui-button="true"
               disabled={true}
               href=""
@@ -11475,7 +11647,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
               type="button"
             >
               <div
-                className="c58"
+                className="c61"
               >
                 <svg
                   height="16"
@@ -11542,6 +11714,7 @@ exports[`renders <List loading /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c16 {
@@ -11645,7 +11818,7 @@ exports[`renders <List loading /> without throwing 1`] = `
 
 .c12:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c12:active,
@@ -11714,6 +11887,7 @@ exports[`renders <List loading /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 1.875rem;
   background-color: transparent;
 }
 
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 7f599c54..53fc6ae9 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
@@ -9,7 +9,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c17 {
+.c18 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
@@ -108,7 +108,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -166,7 +166,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c18 {
+.c19 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -177,12 +177,21 @@ exports[`renders <Metadata /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
 .c16 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
+}
+
+.c17 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 1.5rem;
+  background-color: transparent;
 }
 
 .c3 {
@@ -410,14 +419,14 @@ exports[`renders <Metadata /> without throwing 1`] = `
     height="0.0625rem"
   />
   <div
-    className="c14 c15"
+    className="c17 c15"
     height="1.5rem"
   />
   <div
-    className="c17"
+    className="c18"
   >
     <h3
-      className="c18"
+      className="c19"
     >
       0
        key-value pair
@@ -436,12 +445,12 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c17 {
+.c18 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
 
-.c19 {
+.c20 {
   margin-bottom: 1.125rem;
 }
 
@@ -559,7 +568,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -629,7 +638,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 
 .c42:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c42:active,
@@ -717,7 +726,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 
 .c43:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c43:active,
@@ -817,7 +826,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 
 .c45:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c45:active,
@@ -960,7 +969,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c18 {
+.c19 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -971,7 +980,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 .c30 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -979,68 +988,21 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
 .c16 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
 }
 
-.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-}
-
-.c27 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+.c17 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 1.5rem;
+  background-color: transparent;
 }
 
 .c21 {
@@ -1177,6 +1139,62 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   color: inherit;
 }
 
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c27 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -1375,10 +1393,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c20 {
-  margin-bottom: 0;
-}
-
 .c22 {
   border-top: 0;
   border-left: 0;
@@ -1548,14 +1562,14 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
     height="0.0625rem"
   />
   <div
-    className="c14 c15"
+    className="c17 c15"
     height="1.5rem"
   />
   <div
-    className="c17"
+    className="c18"
   >
     <h3
-      className="c18"
+      className="c19"
     >
       0
        key-value pair
@@ -1563,10 +1577,9 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
     </h3>
   </div>
   <div
-    className="c19"
+    className="c20"
   >
     <form
-      className="c20"
       onSubmit={undefined}
     >
       <div
@@ -1646,10 +1659,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     </div>
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div
@@ -1691,10 +1700,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     />
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div
@@ -1789,7 +1794,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c23 {
+.c24 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
@@ -1821,11 +1826,12 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c22 {
+.c23 {
   color: rgb(73,73,73);
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c12 {
@@ -1895,7 +1901,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -1953,7 +1959,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c24 {
+.c25 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -1961,10 +1967,10 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c20 {
+.c21 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -1972,12 +1978,21 @@ exports[`renders <Metadata error /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
 .c16 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
+}
+
+.c17 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 1.5rem;
+  background-color: transparent;
 }
 
 .c3 {
@@ -2008,35 +2023,6 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c17 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-  border: 0.0625rem solid rgb(216,216,216);
-  border-radius: 0.1875rem;
-  width: 100%;
-}
-
-.c18 {
-  border-radius: 0.1875rem 0 0 0.1875rem;
-  min-width: 0.75rem;
-  background-color: rgb(0,152,88);
-  background-color: rgb(210,67,58);
-}
-
-.c19 {
-  padding: 1.125rem 1.125rem;
-}
-
-.c21 {
-  line-height: 0.875rem;
-  font-size: 0.8125rem;
-}
-
 .c4 {
   display: inline-block;
   padding: 0;
@@ -2129,6 +2115,35 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
+.c18 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid rgb(216,216,216);
+  border-radius: 0.1875rem;
+  width: 100%;
+}
+
+.c19 {
+  border-radius: 0.1875rem 0 0 0.1875rem;
+  min-width: 0.75rem;
+  background-color: rgb(0,152,88);
+  background-color: rgb(210,67,58);
+}
+
+.c20 {
+  padding: 1.125rem 1.125rem;
+}
+
+.c22 {
+  line-height: 0.875rem;
+  font-size: 0.8125rem;
+}
+
 @media only screen and (min-width:48em) {
   .c1 {
     width: 46rem;
@@ -2234,28 +2249,28 @@ exports[`renders <Metadata error /> without throwing 1`] = `
     height="0.0625rem"
   />
   <div
-    className="c14 c15"
+    className="c17 c15"
     height="1.5rem"
   />
   <div
     className="c2"
   >
     <div
-      className="c17"
+      className="c18"
     >
       <div
-        className="c18"
+        className="c19"
       />
       <div
-        className="c19"
+        className="c20"
       >
         <h4
-          className="c20"
+          className="c21"
         >
           Ooops!
         </h4>
         <p
-          className="c21 c22"
+          className="c22 c23"
         >
           An error occurred while loading your metadata
         </p>
@@ -2263,10 +2278,10 @@ exports[`renders <Metadata error /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c23"
+    className="c24"
   >
     <h3
-      className="c24"
+      className="c25"
     >
       0
        key-value pair
@@ -2334,6 +2349,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c16 {
@@ -2446,7 +2462,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -2524,6 +2540,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
@@ -2809,7 +2826,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c17 {
+.c18 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
@@ -2822,7 +2839,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-right: 0.75rem;
 }
 
-.c19 {
+.c20 {
   margin-bottom: 0.75rem;
 }
 
@@ -2977,7 +2994,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -3047,7 +3064,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 
 .c43:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c43:active,
@@ -3135,7 +3152,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 
 .c44:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c44:active,
@@ -3235,7 +3252,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 
 .c46:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c46:active,
@@ -3359,7 +3376,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 
 .c48:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c48:active,
@@ -3529,7 +3546,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c18 {
+.c19 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -3540,68 +3557,21 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
 .c16 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
 }
 
-.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-}
-
-.c27 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+.c17 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 1.5rem;
+  background-color: transparent;
 }
 
 .c32 {
@@ -3740,6 +3710,62 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   color: inherit;
 }
 
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c27 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -3938,10 +3964,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c20 {
-  margin-bottom: 0;
-}
-
 .c30 {
   word-break: break-all;
   line-height: 1.5;
@@ -4132,14 +4154,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     height="0.0625rem"
   />
   <div
-    className="c14 c15"
+    className="c17 c15"
     height="1.5rem"
   />
   <div
-    className="c17"
+    className="c18"
   >
     <h3
-      className="c18"
+      className="c19"
     >
       3
        key-value pair
@@ -4147,10 +4169,9 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     </h3>
   </div>
   <div
-    className="c19"
+    className="c20"
   >
     <form
-      className="c20"
       onSubmit={undefined}
     >
       <div
@@ -4245,10 +4266,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     </div>
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div
@@ -4290,10 +4307,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     />
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div
@@ -4377,10 +4390,9 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     </form>
   </div>
   <div
-    className="c19"
+    className="c20"
   >
     <form
-      className="c20"
       onSubmit={undefined}
     >
       <div
@@ -4475,10 +4487,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     </div>
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div
@@ -4520,10 +4528,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     />
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div
@@ -4607,10 +4611,9 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     </form>
   </div>
   <div
-    className="c19"
+    className="c20"
   >
     <form
-      className="c20"
       onSubmit={undefined}
     >
       <div
@@ -4705,10 +4708,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     </div>
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div
@@ -4750,10 +4749,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     />
                   </div>
                 </div>
-                <div
-                  className="c14 c15"
-                  height="0.75rem"
-                />
               </div>
             </div>
             <div
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 823b5e93..9cd6b619 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
@@ -18,6 +18,7 @@ exports[`renders <Networks /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c1 {
@@ -69,6 +70,28 @@ exports[`renders <Networks /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
+.c9 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
 .c11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -100,28 +123,6 @@ exports[`renders <Networks /> without throwing 1`] = `
   align-items: center;
 }
 
-.c9 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
 .c13 {
   color: rgb(151,151,151);
   text-align: center;
@@ -555,6 +556,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c1 {
@@ -609,7 +611,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
 .c12 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -796,6 +798,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c8 {
@@ -1056,6 +1059,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c1 {
@@ -1120,74 +1124,13 @@ exports[`renders <Networks networks /> without throwing 1`] = `
 .c15 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
   -webkit-text-fill-color: currentcolor;
   color: rgb(255,255,255);
 }
 
-.c18 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-}
-
-.c21 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c20 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
-}
-
 .c10 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -1399,6 +1342,67 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   color: inherit;
 }
 
+.c18 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c21 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c20 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  display: block;
+}
+
 .c5 {
   font-weight: 200;
 }
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 811f29c3..f8c3861b 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
@@ -23,6 +23,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c2 {
@@ -199,6 +200,7 @@ exports[`renders <Summary loading /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c2 {
@@ -362,6 +364,7 @@ exports[`renders <Summary loadingError /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c1 {
@@ -379,7 +382,7 @@ exports[`renders <Summary loadingError /> without throwing 1`] = `
 .c6 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -506,6 +509,7 @@ exports[`renders <Summary mutationError /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c2 {
@@ -582,7 +586,7 @@ exports[`renders <Summary mutationError /> without throwing 1`] = `
 .c11 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -740,6 +744,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c2 {
@@ -1059,7 +1064,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c29:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c29:active,
@@ -1146,7 +1151,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c35:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c35:active,
@@ -1251,7 +1256,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c41:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c41:active,
@@ -1371,7 +1376,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c42:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c42:active,
@@ -1600,43 +1605,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c44 {
   height: 1px;
   background-color: rgb(216,216,216);
-}
-
-.c12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-}
-
-.c26 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
+  height: 1;
 }
 
 .c4 {
@@ -1677,6 +1646,43 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: transparent;
 }
 
+.c12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c26 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  display: block;
+}
+
 .c50 {
   box-sizing: border-box;
   width: 18.75rem;
@@ -3041,7 +3047,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c29:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c29:active,
@@ -3128,7 +3134,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c35:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c35:active,
@@ -3233,7 +3239,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c41:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c41:active,
@@ -3353,7 +3359,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 
 .c42:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c42:active,
@@ -3582,43 +3588,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c44 {
   height: 1px;
   background-color: rgb(216,216,216);
-}
-
-.c12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-}
-
-.c26 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
+  height: 1;
 }
 
 .c4 {
@@ -3659,6 +3629,43 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: transparent;
 }
 
+.c12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c26 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  display: block;
+}
+
 .c50 {
   box-sizing: border-box;
   width: 18.75rem;
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 fa6824e8..940e21d6 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
@@ -9,7 +9,7 @@ exports[`renders <Tags /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c17 {
+.c18 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
@@ -108,7 +108,7 @@ exports[`renders <Tags /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -166,7 +166,7 @@ exports[`renders <Tags /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c18 {
+.c19 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -177,12 +177,21 @@ exports[`renders <Tags /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
 .c16 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
+}
+
+.c17 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 1.5rem;
+  background-color: transparent;
 }
 
 .c3 {
@@ -305,7 +314,7 @@ exports[`renders <Tags /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c19 {
+.c20 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -423,14 +432,14 @@ exports[`renders <Tags /> without throwing 1`] = `
     height="0.0625rem"
   />
   <div
-    className="c14 c15"
+    className="c17 c15"
     height="1.5rem"
   />
   <div
-    className="c17"
+    className="c18"
   >
     <h3
-      className="c18"
+      className="c19"
     >
       0
        tag
@@ -438,7 +447,7 @@ exports[`renders <Tags /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c19"
+    className="c20"
   />
 </div>
 `;
@@ -452,30 +461,30 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c44 {
+.c43 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
 
-.c33 {
+.c32 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c35 {
+.c34 {
   margin-top: 0.75rem;
 }
 
-.c43 {
+.c42 {
   margin-right: 0.75rem;
 }
 
-.c22 {
+.c21 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c29 {
+.c28 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
@@ -576,7 +585,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -593,7 +602,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c39 {
+.c38 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -636,7 +645,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c39:focus {
+.c38:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -644,43 +653,43 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c39:hover {
+.c38:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c39:active,
-.c39:active:hover,
-.c39:active:focus {
+.c38:active,
+.c38:active:hover,
+.c38:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c39[disabled] {
+.c38[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c39:focus {
+.c38:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c39:hover {
+.c38:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c39:active,
-.c39:active:hover,
-.c39:active:focus {
+.c38:active,
+.c38:active:hover,
+.c38:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c40 {
+.c39 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -724,7 +733,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c40:focus {
+.c39:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -732,43 +741,43 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c40:hover {
+.c39:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c40:active,
-.c40:active:hover,
-.c40:active:focus {
+.c39:active,
+.c39:active:hover,
+.c39:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c40[disabled] {
+.c39[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c40:focus {
+.c39:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c40:hover {
+.c39:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c40:active,
-.c40:active:hover,
-.c40:active:focus {
+.c39:active,
+.c39:active:hover,
+.c39:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c42 {
+.c41 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -824,7 +833,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   float: right;
 }
 
-.c42:focus {
+.c41:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -832,57 +841,57 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c42:hover {
+.c41:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c42:active,
-.c42:active:hover,
-.c42:active:focus {
+.c41:active,
+.c41:active:hover,
+.c41:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c42[disabled] {
+.c41[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c42:focus {
+.c41:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c42:hover {
+.c41:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c42:active,
-.c42:active:hover,
-.c42:active:focus {
+.c41:active,
+.c41:active:hover,
+.c41:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c42:focus {
+.c41:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c42:hover {
+.c41:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c42:active,
-.c42:active:hover,
-.c42:active:focus {
+.c41:active,
+.c41:active:hover,
+.c41:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
@@ -921,7 +930,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c36 {
+.c35 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -940,7 +949,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c34 {
+.c33 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -950,7 +959,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   display: block;
 }
 
-.c37 {
+.c36 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -960,7 +969,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   display: block;
 }
 
-.c41 {
+.c40 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -977,7 +986,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c45 {
+.c44 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -985,10 +994,10 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c26 {
+.c25 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -996,116 +1005,11 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
-.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-}
-
-.c23 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c30 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-}
-
-.c31 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-}
-
-.c17 {
+.c16 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1128,7 +1032,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c20 {
+.c19 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1155,7 +1059,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c28 {
+.c27 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1177,7 +1081,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27 {
+.c26 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1193,7 +1097,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c19 {
+.c18 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -1205,7 +1109,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c25 {
+.c24 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -1239,6 +1143,112 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   color: inherit;
 }
 
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c22 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c29 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c30 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  display: block;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -1264,7 +1274,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   float: right;
 }
 
-.c32 {
+.c31 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -1344,33 +1354,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c16 {
-  margin-bottom: 0;
-}
-
-.c18 {
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-}
-
-.c38 {
-  margin-right: 0.375rem;
-}
-
-.c21 {
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.c24 {
-  height: 2.9375rem;
-  max-width: 98%;
-}
-
-.c46 {
+.c45 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -1383,6 +1367,28 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex-wrap: wrap;
 }
 
+.c17 {
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.c37 {
+  margin-right: 0.375rem;
+}
+
+.c20 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.c23 {
+  height: 2.9375rem;
+  max-width: 98%;
+}
+
 @media only screen and (min-width:48em) {
   .c1 {
     width: 46rem;
@@ -1402,7 +1408,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c36 {
+  .c35 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1411,7 +1417,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c36 {
+  .c35 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1420,7 +1426,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c34 {
+  .c33 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1429,7 +1435,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c37 {
+  .c36 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1438,7 +1444,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c41 {
+  .c40 {
     display: none;
   }
 }
@@ -1526,33 +1532,32 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
     height="0.6875rem"
   />
   <form
-    className="c16"
     onSubmit={undefined}
   >
     <div
-      className="c17"
+      className="c16"
       disabled={false}
       name="card"
     >
       <div
-        className="c18 c19 c20"
+        className="c17 c18 c19"
         disabled={false}
         name="card-header"
         onClick={false}
       >
         <div
-          className="c21 c22"
+          className="c20 c21"
         >
           <div
-            className="c23"
+            className="c22"
           >
             <div
-              className="c24 c25 c20"
+              className="c23 c24 c19"
               disabled={false}
               name="card-header-meta"
             >
               <h4
-                className="c26"
+                className="c25"
               >
                 Add tag
               </h4>
@@ -1561,22 +1566,22 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c27 c28"
+        className="c26 c27"
         disabled={false}
         name="card-outlet"
       >
         <div
-          className="c29"
+          className="c28"
         >
           <div
-            className="c30"
+            className="c29"
             wrap={true}
           >
             <div
-              className="c31"
+              className="c30"
             >
               <div
-                className="c32"
+                className="c31"
                 id={null}
                 name="name"
                 role="group"
@@ -1591,7 +1596,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                   key
                 </label>
                 <div
-                  className="c33"
+                  className="c32"
                 >
                   <input
                     className="c8"
@@ -1603,17 +1608,17 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                     className="c15"
                   >
                     <div
-                      className="c34"
+                      className="c33"
                     />
                   </div>
                 </div>
               </div>
             </div>
             <div
-              className="c31"
+              className="c30"
             >
               <div
-                className="c32"
+                className="c31"
                 id={null}
                 name="value"
                 role="group"
@@ -1639,7 +1644,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                     className="c15"
                   >
                     <div
-                      className="c34"
+                      className="c33"
                     />
                   </div>
                 </div>
@@ -1647,16 +1652,16 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
             </div>
           </div>
           <div
-            className="c35"
+            className="c34"
           >
             <div
-              className="c36"
+              className="c35"
             >
               <div
-                className="c37"
+                className="c36"
               >
                 <button
-                  className="c38 c39 c11 c12 c13"
+                  className="c37 c38 c11 c12 c13"
                   data-ui-button="true"
                   disabled={false}
                   href=""
@@ -1669,7 +1674,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                   </span>
                 </button>
                 <button
-                  className="c40 c11 c12 c13"
+                  className="c39 c11 c12 c13"
                   data-ui-button="true"
                   disabled={true}
                   href=""
@@ -1682,10 +1687,10 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                 </button>
               </div>
               <div
-                className="c41"
+                className="c40"
               >
                 <button
-                  className="c42 c11 c12 c13"
+                  className="c41 c11 c12 c13"
                   data-ui-button="true"
                   disabled={false}
                   href=""
@@ -1695,7 +1700,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                   type="button"
                 >
                   <div
-                    className="c43"
+                    className="c42"
                   >
                     <svg
                       height="16"
@@ -1726,10 +1731,10 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
     </div>
   </form>
   <div
-    className="c44"
+    className="c43"
   >
     <h3
-      className="c45"
+      className="c44"
     >
       0
        tag
@@ -1737,7 +1742,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c46"
+    className="c45"
   />
 </div>
 `;
@@ -1751,7 +1756,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c17 {
+.c18 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
@@ -1850,7 +1855,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -1908,7 +1913,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c18 {
+.c19 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -1919,12 +1924,21 @@ exports[`renders <Tags editable /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
 .c16 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
+}
+
+.c17 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 1.5rem;
+  background-color: transparent;
 }
 
 .c3 {
@@ -2047,7 +2061,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c19 {
+.c20 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -2165,14 +2179,14 @@ exports[`renders <Tags editable /> without throwing 1`] = `
     height="0.0625rem"
   />
   <div
-    className="c14 c15"
+    className="c17 c15"
     height="1.5rem"
   />
   <div
-    className="c17"
+    className="c18"
   >
     <h3
-      className="c18"
+      className="c19"
     >
       0
        tag
@@ -2180,7 +2194,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c19"
+    className="c20"
   />
 </div>
 `;
@@ -2312,7 +2326,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 
 .c40:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c40:active,
@@ -2400,7 +2414,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 
 .c41:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c41:active,
@@ -2500,7 +2514,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 
 .c43:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c43:active,
@@ -2617,7 +2631,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -2752,118 +2766,21 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
 .c16 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
 }
 
-.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-}
-
-.c24 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c31 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-}
-
-.c32 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
+.c17 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 1.5rem;
+  background-color: transparent;
 }
 
 .c29 {
@@ -3002,6 +2919,112 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   color: inherit;
 }
 
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c31 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c32 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  display: block;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -3107,8 +3130,17 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c17 {
-  margin-bottom: 0;
+.c47 {
+  margin: 0;
+  padding: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  list-style: none;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .c27 {
@@ -3142,19 +3174,6 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   max-width: 98%;
 }
 
-.c47 {
-  margin: 0;
-  padding: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  list-style: none;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
 @media only screen and (min-width:48em) {
   .c1 {
     width: 46rem;
@@ -3305,11 +3324,10 @@ exports[`renders <Tags editing /> without throwing 1`] = `
     height="0.0625rem"
   />
   <div
-    className="c14 c15"
+    className="c17 c15"
     height="1.5rem"
   />
   <form
-    className="c17"
     onSubmit={undefined}
   >
     <div
@@ -3715,7 +3733,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 
 .c40:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c40:active,
@@ -3803,7 +3821,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 
 .c41:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c41:active,
@@ -3901,7 +3919,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -4006,7 +4024,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 
 .c43:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c43:active,
@@ -4177,118 +4195,21 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
 .c16 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
 }
 
-.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-}
-
-.c24 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c31 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-}
-
-.c32 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
+.c17 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 1.5rem;
+  background-color: transparent;
 }
 
 .c29 {
@@ -4427,6 +4348,112 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   color: inherit;
 }
 
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c31 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c32 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  display: block;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -4532,8 +4559,17 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c17 {
-  margin-bottom: 0;
+.c50 {
+  margin: 0;
+  padding: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  list-style: none;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .c27 {
@@ -4567,19 +4603,6 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   max-width: 98%;
 }
 
-.c50 {
-  margin: 0;
-  padding: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  list-style: none;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
 @media only screen and (min-width:48em) {
   .c1 {
     width: 46rem;
@@ -4730,11 +4753,10 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
     height="0.0625rem"
   />
   <div
-    className="c14 c15"
+    className="c17 c15"
     height="1.5rem"
   />
   <form
-    className="c17"
     onSubmit={undefined}
   >
     <div
@@ -4988,7 +5010,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c17 {
+.c18 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
@@ -5087,7 +5109,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -5145,7 +5167,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c18 {
+.c19 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -5156,12 +5178,21 @@ exports[`renders <Tags error /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
 .c16 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
+}
+
+.c17 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 1.5rem;
+  background-color: transparent;
 }
 
 .c3 {
@@ -5284,7 +5315,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c19 {
+.c20 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -5402,14 +5433,14 @@ exports[`renders <Tags error /> without throwing 1`] = `
     height="0.0625rem"
   />
   <div
-    className="c14 c15"
+    className="c17 c15"
     height="1.5rem"
   />
   <div
-    className="c17"
+    className="c18"
   >
     <h3
-      className="c18"
+      className="c19"
     >
       0
        tag
@@ -5417,7 +5448,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c19"
+    className="c20"
   />
 </div>
 `;
@@ -5480,6 +5511,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c16 {
@@ -5587,7 +5619,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -5648,6 +5680,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
@@ -5933,12 +5966,12 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c17 {
+.c18 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
 
-.c20 {
+.c21 {
   margin-right: 0.375rem;
   margin-bottom: 0.375rem;
 }
@@ -6037,7 +6070,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
 
 .c10:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c10:active,
@@ -6095,7 +6128,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c18 {
+.c19 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -6106,12 +6139,21 @@ exports[`renders <Tags tags /> without throwing 1`] = `
 .c14 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.6875rem;
   background-color: transparent;
 }
 
 .c16 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0.0625rem;
+}
+
+.c17 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 1.5rem;
+  background-color: transparent;
 }
 
 .c3 {
@@ -6234,7 +6276,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c21 {
+.c22 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -6255,7 +6297,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   align-items: center;
 }
 
-.c19 {
+.c20 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -6373,14 +6415,14 @@ exports[`renders <Tags tags /> without throwing 1`] = `
     height="0.0625rem"
   />
   <div
-    className="c14 c15"
+    className="c17 c15"
     height="1.5rem"
   />
   <div
-    className="c17"
+    className="c18"
   >
     <h3
-      className="c18"
+      className="c19"
     >
       3
        tag
@@ -6388,13 +6430,13 @@ exports[`renders <Tags tags /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c19"
+    className="c20"
   >
     <div
-      className="c20"
+      className="c21"
     >
       <li
-        className="c21"
+        className="c22"
         fill={null}
         onClick={undefined}
       >
@@ -6402,10 +6444,10 @@ exports[`renders <Tags tags /> without throwing 1`] = `
       </li>
     </div>
     <div
-      className="c20"
+      className="c21"
     >
       <li
-        className="c21"
+        className="c22"
         fill={null}
         onClick={undefined}
       >
@@ -6413,10 +6455,10 @@ exports[`renders <Tags tags /> without throwing 1`] = `
       </li>
     </div>
     <div
-      className="c20"
+      className="c21"
     >
       <li
-        className="c21"
+        className="c22"
         fill={null}
         onClick={undefined}
       >
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/firewall.spec.js b/consoles/my-joy-instances/src/containers/instances/__tests__/firewall.spec.js
index 095bddab..3f2f485e 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/firewall.spec.js
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/firewall.spec.js
@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import React, { Fragment } from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/firewall.ui.js b/consoles/my-joy-instances/src/containers/instances/__tests__/firewall.ui.js
index 8606d4f7..7963904e 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/firewall.ui.js
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/firewall.ui.js
@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import React, { Fragment } from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 import screenshot from 'react-screenshot-renderer';
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/networks.spec.js b/consoles/my-joy-instances/src/containers/instances/__tests__/networks.spec.js
index d8c44b23..6769e7c0 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/networks.spec.js
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/networks.spec.js
@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/networks.ui.js b/consoles/my-joy-instances/src/containers/instances/__tests__/networks.ui.js
index 7ad11da6..0cbf879b 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/networks.ui.js
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/networks.ui.js
@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import React from 'react';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 import screenshot from 'react-screenshot-renderer';
diff --git a/consoles/my-joy-instances/src/containers/instances/cns.js b/consoles/my-joy-instances/src/containers/instances/cns.js
index 54d597bd..b50be292 100644
--- a/consoles/my-joy-instances/src/containers/instances/cns.js
+++ b/consoles/my-joy-instances/src/containers/instances/cns.js
@@ -22,12 +22,13 @@ import {
   MessageDescription
 } from 'joyent-ui-toolkit';
 
-import Description from '@components/instances/description';
 import {
   Cns,
   CnsFooter as Footer,
   CnsAddServiceForm as AddServiceForm
 } from 'joyent-ui-resource-widgets';
+
+import Description from '@components/instances/description';
 import GetAccount from '@graphql/get-account.gql';
 import DeleteTag from '@graphql/delete-tag.gql';
 import UpdateTags from '@graphql/update-tags.gql';
@@ -52,7 +53,7 @@ const CnsContainer = ({
   handleAsyncValidate
 }) => (
   <ViewContainer main>
-    <Margin bottom={3}>
+    <Margin bottom="3">
       <Description href="https://docs.joyent.com/private-cloud/install/cns">
         Triton CNS is used to automatically update hostnames for your instances.
         You can serve multiple instances (with multiple IP addresses) under the
@@ -66,7 +67,7 @@ const CnsContainer = ({
             <Padding all={5}>
               {loading ? <StatusLoader /> : null}
               {!loading && loadingError ? (
-                <Margin bottom={5}>
+                <Margin bottom="5">
                   <Message error>
                     <MessageTitle>Ooops!</MessageTitle>
                     <MessageDescription>
@@ -76,7 +77,7 @@ const CnsContainer = ({
                 </Margin>
               ) : null}
               {!loading && mutationError ? (
-                <Margin bottom={5}>
+                <Margin bottom="5">
                   <Message error>
                     <MessageTitle>Ooops!</MessageTitle>
                     <MessageDescription>{mutationError}</MessageDescription>
@@ -108,7 +109,7 @@ const CnsContainer = ({
           </CardOutlet>
         </Card>
         {!loading && !loadingError ? (
-          <Margin top={5}>
+          <Margin top="5">
             <Footer
               enabled={!disabled}
               submitting={mutating}
@@ -278,14 +279,8 @@ export default compose(
         ]);
 
         const newValue = value.join(',');
-        const mutation = !newValue.length
-          ? deleteTag({
-              variables: {
-                id: instance.id,
-                name: 'triton.cns.services'
-              }
-            })
-          : updateTags({
+        const mutation = newValue.length
+          ? updateTags({
               variables: {
                 id: instance.id,
                 tags: [
@@ -295,6 +290,12 @@ export default compose(
                   }
                 ]
               }
+            })
+          : deleteTag({
+              variables: {
+                id: instance.id,
+                name: 'triton.cns.services'
+              }
             });
 
         const [err] = await intercept(mutation);
diff --git a/consoles/my-joy-instances/src/containers/instances/firewall.js b/consoles/my-joy-instances/src/containers/instances/firewall.js
index 6d4c3615..75fd1e17 100644
--- a/consoles/my-joy-instances/src/containers/instances/firewall.js
+++ b/consoles/my-joy-instances/src/containers/instances/firewall.js
@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import React from 'react';
 import intercept from 'apr-intercept';
 import { connect } from 'react-redux';
@@ -43,7 +42,7 @@ export const Firewall = ({
   handleEnabledToggle
 }) => (
   <ViewContainer main>
-    <Margin bottom={3}>
+    <Margin bottom="3">
       <Description href="https://docs.joyent.com/private-cloud/install/cns">
         Cloud Firewall rules control traffic across instances. Enabling the
         firewall adds a default set of rules and rules defined by your chosen
@@ -52,7 +51,7 @@ export const Firewall = ({
     </Margin>
     {loading ? <StatusLoader /> : null}
     {!loading && loadingError ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -62,7 +61,7 @@ export const Firewall = ({
       </Margin>
     ) : null}
     {!loading && mutationError ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>{mutationError}</MessageDescription>
@@ -80,7 +79,7 @@ export const Firewall = ({
         >
           {props =>
             loading ? null : (
-              <Margin right={5}>
+              <Margin right="5">
                 <ToggleFirewallForm {...props} submitOnChange />
               </Margin>
             )
@@ -101,19 +100,19 @@ export const Firewall = ({
       </FlexItem>
     </Flex>
     {!loading && !defaultRules.length && !tagRules.length ? (
-      <Margin top={5}>
+      <Margin top="5">
         <Empty borderTop>
           Sorry, but we weren’t able to find any firewall rules.
         </Empty>
       </Margin>
     ) : null}
     {!loading && enabled && defaultRules.length ? (
-      <Margin top={5}>
+      <Margin top="5">
         <DefaultRules rules={defaultRules} />
       </Margin>
     ) : null}
     {!loading && enabled && tagRules.length ? (
-      <Margin top={5}>
+      <Margin top="5">
         <TagRules rules={tagRules} />
       </Margin>
     ) : null}
diff --git a/consoles/my-joy-instances/src/containers/instances/list.js b/consoles/my-joy-instances/src/containers/instances/list.js
index e00ae8de..12cf9769 100644
--- a/consoles/my-joy-instances/src/containers/instances/list.js
+++ b/consoles/my-joy-instances/src/containers/instances/list.js
@@ -83,7 +83,7 @@ export const List = ({
 
   const _error =
     error && !_instances.length && !_loading && !filter.length ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -94,7 +94,7 @@ export const List = ({
     ) : null;
 
   const _mutationError = mutationError && (
-    <Margin bottom={5}>
+    <Margin bottom="5">
       <Message error>
         <MessageTitle>Ooops!</MessageTitle>
         <MessageDescription>{mutationError}</MessageDescription>
@@ -107,7 +107,7 @@ export const List = ({
   const handleReboot = selected => handleAction({ name: 'reboot', selected });
   const handleRemove = selected => handleAction({ name: 'remove', selected });
 
-  const _table = !_loading ? (
+  const _table = _loading ? null : (
     <ReduxForm form={TABLE_FORM_NAME}>
       {props => (
         <InstanceList
@@ -123,7 +123,7 @@ export const List = ({
           total={total}
         >
           {fetching ? <InstanceListFetchingItem /> : null}
-          {(!fetching ? _instances : []).map(instance => (
+          {(fetching ? [] : _instances).map(instance => (
             <InstanceListItem
               key={instance.id}
               {...instance}
@@ -137,7 +137,7 @@ export const List = ({
         </InstanceList>
       )}
     </ReduxForm>
-  ) : null;
+  );
 
   const _empty =
     !_loading && !_instances.length ? (
@@ -164,10 +164,10 @@ export const List = ({
 
   return (
     <ViewContainer main>
-      <Margin top={5}>
+      <Margin top="5">
         <H3>Instances</H3>
       </Margin>
-      <Margin top={3} bottom={5}>
+      <Margin top="3" bottom="5">
         <ReduxForm form={MENU_FORM_NAME}>
           {props => (
             <ToolbarForm
@@ -180,7 +180,7 @@ export const List = ({
           )}
         </ReduxForm>
       </Margin>
-      {!_mutationError ? _error : null}
+      {_mutationError ? null : _error}
       {_mutationError}
       {_loading}
       {_table}
@@ -259,7 +259,6 @@ export default compose(
       const sortBy = get(values, 'instance-list-sort-by', 'name');
       const sortOrder = get(values, 'instance-list-sort-order', 'asc');
 
-      console.log(index, filter);
       // if user is searching something, get items that match that query
       const filtered =
         filter && index.list.length
@@ -366,13 +365,13 @@ export default compose(
       handleAction: async ({ selected, name }) => {
         // eslint-disable-next-line no-alert
         if (
-          !await Confirm(
+          !(await Confirm(
             `Do you want to ${name} ${
               selected.length === 1
                 ? `"${selected[0].name}"`
                 : `${selected.length} instances`
             }`
-          )
+          ))
         ) {
           return;
         }
diff --git a/consoles/my-joy-instances/src/containers/instances/metadata.js b/consoles/my-joy-instances/src/containers/instances/metadata.js
index 281298db..ba0c6fee 100644
--- a/consoles/my-joy-instances/src/containers/instances/metadata.js
+++ b/consoles/my-joy-instances/src/containers/instances/metadata.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import paramCase from 'param-case';
 import { Margin } from 'styled-components-spacing';
 import { set } from 'react-redux-values';
@@ -53,10 +53,10 @@ export const Metadata = ({
   handleUpdate,
   handleRemove
 }) => {
-  const _loading = !(loading && !metadata.length) ? null : <StatusLoader />;
+  const _loading = loading && !metadata.length ? <StatusLoader /> : null;
 
   const _add = addOpen ? (
-    <Margin bottom={3}>
+    <Margin bottom="3">
       <ReduxForm
         form={ADD_FORM_NAME}
         onSubmit={handleCreate}
@@ -73,25 +73,25 @@ export const Metadata = ({
     </Margin>
   ) : null;
 
-  const _line = !_loading
-    ? [
-        <Divider key="line" height={remcalc(1)} />,
-        <Divider key="after-line-space" height={remcalc(24)} transparent />
-      ]
-    : null;
+  const _line = _loading ? null : (
+    <Fragment>
+      <Divider key="line" height={remcalc(1)} />
+      <Divider key="after-line-space" height={remcalc(24)} transparent />
+    </Fragment>
+  );
 
-  const _count = !_loading ? (
-    <Margin bottom={3} top={5}>
+  const _count = _loading ? null : (
+    <Margin bottom="3" top="5">
       <H3>
         {metadata.length} key-value pair{metadata.length === 1 ? '' : 's'}
       </H3>
     </Margin>
-  ) : null;
+  );
 
   const _metadata =
     !_loading &&
     metadata.map(({ form, initialValues, expanded, removing }) => (
-      <Margin bottom={2}>
+      <Margin bottom="2">
         <ReduxForm
           form={form}
           key={form}
@@ -119,7 +119,7 @@ export const Metadata = ({
 
   const _error =
     error && !_metadata.length && !_loading ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -131,7 +131,7 @@ export const Metadata = ({
 
   return (
     <ViewContainer main>
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <ReduxForm form={MENU_FORM_NAME}>
           {props => (
             <ToolbarForm
@@ -316,7 +316,7 @@ export default compose(
             'initialValues.name'
           );
 
-          if (!await Confirm(`Do you want to remove "${name}"?`)) {
+          if (!(await Confirm(`Do you want to remove "${name}"?`))) {
             return;
           }
 
diff --git a/consoles/my-joy-instances/src/containers/instances/networks.js b/consoles/my-joy-instances/src/containers/instances/networks.js
index bf284c14..b6c483ae 100644
--- a/consoles/my-joy-instances/src/containers/instances/networks.js
+++ b/consoles/my-joy-instances/src/containers/instances/networks.js
@@ -30,7 +30,7 @@ export const Networks = ({
   setInfoExpanded
 }) => (
   <ViewContainer main>
-    <Margin bottom={3}>
+    <Margin bottom="3">
       <Description href="https://docs.joyent.com/public-cloud/network/sdn">
         Use predefined or customized fabric networks which can be public-facing
         or private. All fabrics are isolated from other customers giving you
@@ -42,7 +42,7 @@ export const Networks = ({
     </Margin>
     {loading ? <StatusLoader /> : null}
     {!loading && error && !networks.length ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -81,7 +81,6 @@ export default compose(
       }
     }),
     props: ({ data }) => {
-      console.log(data);
       const { loading, error, variables } = data;
       const { id } = variables;
 
diff --git a/consoles/my-joy-instances/src/containers/instances/snapshots.js b/consoles/my-joy-instances/src/containers/instances/snapshots.js
index afab55de..0ba8bfe0 100644
--- a/consoles/my-joy-instances/src/containers/instances/snapshots.js
+++ b/consoles/my-joy-instances/src/containers/instances/snapshots.js
@@ -70,7 +70,7 @@ const Snapshots = ({
   const _error = error &&
     !_loading &&
     !_values.length && (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -82,7 +82,7 @@ const Snapshots = ({
 
   const _createSnapshot =
     !loading && createSnapshotOpen ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <ReduxForm
           form={CREATE_FORM_NAME}
           shouldAsyncValidate={shouldAsyncValidate}
@@ -111,7 +111,7 @@ const Snapshots = ({
     ) : null;
 
   const _mutationError = mutationError ? (
-    <Margin bottom={5}>
+    <Margin bottom="5">
       <Message error>
         <MessageTitle>Ooops!</MessageTitle>
         <MessageDescription>{mutationError}</MessageDescription>
@@ -119,7 +119,7 @@ const Snapshots = ({
     </Margin>
   ) : null;
 
-  const _items = !_loading ? (
+  const _items = _loading ? null : (
     <ReduxForm form={TABLE_FORM_NAME}>
       {props => (
         <SnapshotsList
@@ -135,11 +135,11 @@ const Snapshots = ({
         />
       )}
     </ReduxForm>
-  ) : null;
+  );
 
   return (
     <ViewContainer main>
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <ReduxForm form={MENU_FORM_NAME}>
           {props => (
             <ToolbarForm
@@ -349,13 +349,13 @@ export default compose(
         handleAction: async ({ name, selected = [] }) => {
           // eslint-disable-next-line no-alert
           if (
-            !await Confirm(
+            !(await Confirm(
               `Do you want to ${name} ${
                 selected.length === 1
                   ? `"${selected[0].name}"`
                   : `${selected.length} snapshots`
               }`
-            )
+            ))
           ) {
             return;
           }
diff --git a/consoles/my-joy-instances/src/containers/instances/summary.js b/consoles/my-joy-instances/src/containers/instances/summary.js
index c83eb2c0..3ec322af 100644
--- a/consoles/my-joy-instances/src/containers/instances/summary.js
+++ b/consoles/my-joy-instances/src/containers/instances/summary.js
@@ -79,7 +79,7 @@ export const Summary = ({
   const _error = loadingError &&
     !_loading &&
     !instance && (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
@@ -265,7 +265,7 @@ export default compose(
         const { instance } = ownProps;
         const { id } = instance;
 
-        if (!await Confirm(`Do you want to ${action} "${instance.name}"?`)) {
+        if (!(await Confirm(`Do you want to ${action} "${instance.name}"?`))) {
           return;
         }
 
diff --git a/consoles/my-joy-instances/src/containers/instances/tags.js b/consoles/my-joy-instances/src/containers/instances/tags.js
index 1e3fbce7..61fc5de2 100644
--- a/consoles/my-joy-instances/src/containers/instances/tags.js
+++ b/consoles/my-joy-instances/src/containers/instances/tags.js
@@ -18,10 +18,11 @@ import {
   Divider,
   H3,
   TagList,
-  TagItem,
-  KeyValue
+  TagItem
 } from 'joyent-ui-toolkit';
 
+import { KeyValue } from 'joyent-ui-resource-widgets';
+
 import ToolbarForm from '@components/instances/toolbar';
 import GetTags from '@graphql/list-tags.gql';
 import UpdateTags from '@graphql/update-tags.gql';
@@ -37,11 +38,13 @@ const EDIT_FORM_KEY = field => `instance-tags-${paramCase(field)}`;
 const TagsAddForm = props => (
   <KeyValue {...props} method="add" input="input" type="tag" expanded />
 );
+
 const TagsEditForm = props => (
   <KeyValue {...props} method="edit" input="input" type="tag" expanded />
 );
+
 const Tag = ({ name, value, onRemoveClick, onClick }) => (
-  <Margin right={1} bottom={1} key={`${name}-${value}`}>
+  <Margin right="1" bottom="1" key={`${name}-${value}`}>
     <TagItem onClick={onClick} onRemoveClick={onRemoveClick}>
       {name ? `${name}: ${value}` : value}
     </TagItem>
@@ -63,7 +66,7 @@ export const Tags = ({
   shouldAsyncValidate,
   handleAsyncValidate
 }) => {
-  const _loading = !(loading && !tags.length) ? null : <StatusLoader />;
+  const _loading = loading && !tags.length ? <StatusLoader /> : null;
 
   const _add = addOpen ? (
     <ReduxForm
@@ -85,15 +88,15 @@ export const Tags = ({
         ]
       : null;
 
-  const _count = !_loading ? (
-    <Margin bottom={3} top={5}>
+  const _count = _loading ? null : (
+    <Margin bottom="3" top="5">
       <H3>
         {tags.length} tag{tags.length === 1 ? '' : 's'}
       </H3>
     </Margin>
-  ) : null;
+  );
 
-  const _tags = !_loading ? (
+  const _tags = _loading ? null : (
     <TagList>
       {tags.map(({ id, name, value }) => (
         <Tag
@@ -105,7 +108,7 @@ export const Tags = ({
         />
       ))}
     </TagList>
-  ) : null;
+  );
 
   const _edit = editing ? (
     <ReduxForm
@@ -131,7 +134,7 @@ export const Tags = ({
 
   return (
     <ViewContainer main>
-      <Margin bottom={3}>
+      <Margin bottom="3">
         <ReduxForm form={MENU_FORM_NAME}>
           {props => (
             <ToolbarForm
@@ -282,7 +285,7 @@ export default compose(
         },
         handleRemove: async (form, { name }) => {
           // eslint-disable-next-line no-alert
-          if (!await Confirm(`Do you want to remove "${name}"?`)) {
+          if (!(await Confirm(`Do you want to remove "${name}"?`))) {
             return;
           }
 
diff --git a/consoles/my-joy-instances/src/containers/instances/user-script.js b/consoles/my-joy-instances/src/containers/instances/user-script.js
index f28de730..f9ac27c2 100644
--- a/consoles/my-joy-instances/src/containers/instances/user-script.js
+++ b/consoles/my-joy-instances/src/containers/instances/user-script.js
@@ -18,14 +18,14 @@ import GetMetadata from '@graphql/list-metadata.gql';
 
 export const UserScript = ({ metadata, loading = false, error = null }) => (
   <ViewContainer main>
-    <Margin bottom={3}>
+    <Margin bottom="3">
       <Description href="https://docs.joyent.com/private-cloud/instances/using-mdata#UsingtheMetadataAPI-ListofMetadataKeys">
         User script can be used to inject a custom boot script.
       </Description>
     </Margin>
     {loading ? <StatusLoader /> : null}
     {!loading && error ? (
-      <Margin bottom={5}>
+      <Margin bottom="5">
         <Message error>
           <MessageTitle>Ooops!</MessageTitle>
           <MessageDescription>
diff --git a/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap b/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
index e5386bb2..c154b7b9 100644
--- a/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
@@ -70,7 +70,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
 .c10 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -322,7 +322,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
 .c10 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
diff --git a/consoles/my-joy-instances/src/containers/navigation/breadcrumb.js b/consoles/my-joy-instances/src/containers/navigation/breadcrumb.js
index 211b632a..3bbfc740 100644
--- a/consoles/my-joy-instances/src/containers/navigation/breadcrumb.js
+++ b/consoles/my-joy-instances/src/containers/navigation/breadcrumb.js
@@ -30,7 +30,7 @@ export default ({ match }) => {
     .filter(Boolean)
     .map(({ name, pathname }) => (
       <BreadcrumbItem key={name} to={pathname} component={Link}>
-        <Margin horizontal={1} vertical={3}>
+        <Margin horizontal="1" vertical="3">
           {name}
         </Margin>
       </BreadcrumbItem>
diff --git a/consoles/my-joy-instances/src/html.js b/consoles/my-joy-instances/src/html.js
index 93f95c79..a6e2d580 100644
--- a/consoles/my-joy-instances/src/html.js
+++ b/consoles/my-joy-instances/src/html.js
@@ -20,7 +20,7 @@ module.exports = ({
     </head>
     <body {...bodyAttrs}>
       <div id="header" />
-      {!children ? <div id="root" /> : null}
+      {children ? null : <div id="root" />}
       {children}
       <script src="/navigation/static/main.js" />
     </body>
diff --git a/consoles/my-joy-instances/src/server-error.js b/consoles/my-joy-instances/src/server-error.js
index 58253fb7..0118e50c 100644
--- a/consoles/my-joy-instances/src/server-error.js
+++ b/consoles/my-joy-instances/src/server-error.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Margin } from 'styled-components-spacing';
-import remcalc from 'remcalc';
 
 import {
   RootContainer,
@@ -8,16 +7,14 @@ import {
   ViewContainer,
   Message,
   MessageDescription,
-  MessageTitle,
-  Divider
+  MessageTitle
 } from 'joyent-ui-toolkit';
 
 import Breadcrumb from '@containers/navigation/breadcrumb';
 
 export const Route = () => (
   <ViewContainer main>
-    <Divider height={remcalc(24)} transparent />
-    <Margin bottom={5}>
+    <Margin bottom="4">
       <Message error>
         <MessageTitle>Ooops!</MessageTitle>
         <MessageDescription>
diff --git a/consoles/my-joy-instances/src/state/validators.js b/consoles/my-joy-instances/src/state/validators.js
index 0f7300e1..bb006cf3 100644
--- a/consoles/my-joy-instances/src/state/validators.js
+++ b/consoles/my-joy-instances/src/state/validators.js
@@ -16,7 +16,7 @@ const validateSchema = async (schema, value) => {
     keys(schema),
     async (errors, name) => {
       const msg = await validateField(schema[name], value[name]);
-      return !msg ? errors : assign(errors, { [name]: msg });
+      return msg ? assign(errors, { [name]: msg }) : errors;
     },
     {}
   );
@@ -109,6 +109,6 @@ export const addMetadata = metadata =>
   validateSchema(Schemas.metadata, metadata);
 
 export const instanceName = ({ name }) =>
-  !name ? null : validateSchema(Schemas.instanceName, { name });
+  name ? validateSchema(Schemas.instanceName, { name }) : null;
 
 export const editMetadata = addMetadata;
diff --git a/consoles/my-joy-navigation/.eslintignore b/consoles/my-joy-navigation/.eslintignore
deleted file mode 100644
index 9d0b71a3..00000000
--- a/consoles/my-joy-navigation/.eslintignore
+++ /dev/null
@@ -1,2 +0,0 @@
-build
-dist
diff --git a/consoles/my-joy-navigation/.eslintrc b/consoles/my-joy-navigation/.eslintrc
deleted file mode 100644
index 8dbd2da5..00000000
--- a/consoles/my-joy-navigation/.eslintrc
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "extends": "joyent-portal",
-  "rules": {
-    "no-console": 0,
-    "new-cap": 0,
-    "camelcase": 1,
-    // temp
-    "no-undef": 1,
-    "no-debugger": 1,
-    "no-negated-condition": 0,
-    "jsx-a11y/href-no-hash": 0
-  }
-}
diff --git a/consoles/my-joy-navigation/lib/index.js b/consoles/my-joy-navigation/lib/index.js
index 6b1a07f4..c0a2b0b7 100644
--- a/consoles/my-joy-navigation/lib/index.js
+++ b/consoles/my-joy-navigation/lib/index.js
@@ -15,6 +15,7 @@ exports.register = async server => {
     if (NODE_ENV === 'production') {
       throw err;
     } else {
+      // eslint-disable-next-line no-console
       console.error(err);
     }
   }
diff --git a/consoles/my-joy-navigation/package.json b/consoles/my-joy-navigation/package.json
index ebf418ee..94565ea2 100644
--- a/consoles/my-joy-navigation/package.json
+++ b/consoles/my-joy-navigation/package.json
@@ -10,8 +10,6 @@
     "build:lib": "echo 0",
     "build:bundle": "NAMESPACE=navigation NODE_ENV=production redrun build",
     "prepublish": "NAMESPACE=navigation NODE_ENV=production redrun build",
-    "lint": "redrun lint:ci -- --fix",
-    "lint:ci": "NODE_ENV=test eslint . --ext .js --ext .md",
     "test": "echo 0",
     "test:ci": "redrun test",
     "build": "PREACT=1 joyent-react-scripts build"
diff --git a/consoles/my-joy-navigation/src/containers/account.js b/consoles/my-joy-navigation/src/containers/account.js
index d8ab888b..261cef4a 100644
--- a/consoles/my-joy-navigation/src/containers/account.js
+++ b/consoles/my-joy-navigation/src/containers/account.js
@@ -24,7 +24,7 @@ const GetAccountServices = gql`
 `;
 
 const Account = ({ expanded, services = [] }) => {
-  return !expanded ? null : (
+  return expanded ? (
     <Popover>
       <Ul>
         {services.map(({ name, url }) => (
@@ -34,7 +34,7 @@ const Account = ({ expanded, services = [] }) => {
         ))}
       </Ul>
     </Popover>
-  );
+  ) : null;
 };
 
 export default compose(
diff --git a/consoles/my-joy-templates/.babelrc b/consoles/my-joy-templates/.babelrc
new file mode 100644
index 00000000..d09473cc
--- /dev/null
+++ b/consoles/my-joy-templates/.babelrc
@@ -0,0 +1,12 @@
+{
+  "ignore": ["_document.js", "_aliases.js"],
+  "presets": [
+    [
+      "joyent-portal",
+      {
+        "aliases": true,
+        "autoAliases": true
+      }
+    ]
+  ]
+}
diff --git a/consoles/my-joy-templates/.gitignore b/consoles/my-joy-templates/.gitignore
new file mode 100644
index 00000000..4a6d8eef
--- /dev/null
+++ b/consoles/my-joy-templates/.gitignore
@@ -0,0 +1,25 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+
+yarn-error.log*
+
+## Image Snapshots Diff
+
+**/__diff_output__
+
+lib/app
+
diff --git a/consoles/my-joy-templates/.lighthouserc b/consoles/my-joy-templates/.lighthouserc
new file mode 100644
index 00000000..c0641475
--- /dev/null
+++ b/consoles/my-joy-templates/.lighthouserc
@@ -0,0 +1,8 @@
+{
+  "setup": {
+    "compile": "npm run build",
+    "start": "serve -s build --port 3069 --single",
+    "href": "http://0.0.0.0:3069"
+  },
+  "extends": "lighthouse:default"
+}
diff --git a/consoles/my-joy-templates/.npmignore b/consoles/my-joy-templates/.npmignore
new file mode 100644
index 00000000..6140a085
--- /dev/null
+++ b/consoles/my-joy-templates/.npmignore
@@ -0,0 +1,27 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+
+yarn-error.log*
+
+## Image Snapshots Diff
+
+**/__diff_output__
+
+!lib/app
+!dist
+!build
+
diff --git a/consoles/my-joy-templates/.stylelintrc b/consoles/my-joy-templates/.stylelintrc
new file mode 100644
index 00000000..3a875f40
--- /dev/null
+++ b/consoles/my-joy-templates/.stylelintrc
@@ -0,0 +1,4 @@
+{
+  "test": ["./src/**/*.js"],
+  "extends": ["stylelint-config-joyent-portal"]
+}
diff --git a/consoles/my-joy-templates/.tern-project b/consoles/my-joy-templates/.tern-project
new file mode 100644
index 00000000..851b348c
--- /dev/null
+++ b/consoles/my-joy-templates/.tern-project
@@ -0,0 +1,13 @@
+{
+  "libs": ["ecmascript", "browser"],
+  "plugins": {
+    "doc_comment": true,
+    "local-scope": true,
+    "jsx": true,
+    "node": true,
+    "webpack": {
+      "configPath":
+        "../../node_modules/joyent-react-scripts/src/webpack.config.dev.js"
+    }
+  }
+}
diff --git a/consoles/my-joy-templates/.yarnclean b/consoles/my-joy-templates/.yarnclean
new file mode 100644
index 00000000..e69de29b
diff --git a/consoles/my-joy-templates/lib/index.js b/consoles/my-joy-templates/lib/index.js
new file mode 100644
index 00000000..ff913ffa
--- /dev/null
+++ b/consoles/my-joy-templates/lib/index.js
@@ -0,0 +1,92 @@
+const Inert = require('inert');
+const Path = require('path');
+const RenderReact = require('hapi-render-react');
+const Intercept = require('apr-intercept');
+const Fs = require('mz/fs');
+
+const { NAMESPACE = 'templates' } = process.env;
+
+exports.register = async server => {
+  const relativeTo = Path.join(__dirname, 'app');
+  const buildRoot = Path.join(__dirname, `../build/${NAMESPACE}/static/`);
+  const publicRoot = Path.join(__dirname, `../public/static/`);
+
+  await server.register([
+    {
+      plugin: Inert
+    },
+    {
+      plugin: RenderReact
+    }
+  ]);
+
+  server.route([
+    {
+      method: 'GET',
+      path: `/${NAMESPACE}/service-worker.js`,
+      config: {
+        auth: false,
+        handler: {
+          file: {
+            path: Path.join(__dirname, '../build/service-worker.js')
+          }
+        }
+      }
+    },
+    {
+      method: 'GET',
+      path: `/${NAMESPACE}/favicon.ico`,
+      config: {
+        auth: false,
+        handler: {
+          file: {
+            path: Path.join(__dirname, '../build/favicon.ico')
+          }
+        }
+      }
+    },
+    {
+      method: 'GET',
+      path: `/${NAMESPACE}/static/{rest*}`,
+      config: {
+        auth: false
+      },
+      handler: async (request, h) => {
+        const { params } = request;
+        const { rest } = params;
+
+        const publicPathname = Path.join(publicRoot, rest);
+        const buildPathname = Path.join(buildRoot, rest);
+
+        const [err] = await Intercept(
+          Fs.access(publicPathname, Fs.constants.R_OK)
+        );
+
+        const file = err ? buildPathname : publicPathname;
+        return h.file(file, { confine: false });
+      }
+    },
+    {
+      method: '*',
+      path: `/${NAMESPACE}/~server-error`,
+      handler: {
+        view: {
+          name: 'server-error',
+          relativeTo
+        }
+      }
+    },
+    {
+      method: '*',
+      path: `/${NAMESPACE}/{path*}`,
+      handler: {
+        view: {
+          name: 'app',
+          relativeTo
+        }
+      }
+    }
+  ]);
+};
+
+exports.pkg = require('../package.json');
diff --git a/consoles/my-joy-templates/package.json b/consoles/my-joy-templates/package.json
new file mode 100644
index 00000000..cc8a6b28
--- /dev/null
+++ b/consoles/my-joy-templates/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "my-joy-templates",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MPL-2.0",
+  "repository": "github:yldio/joyent-portal",
+  "main": "lib/index.js",
+  "scripts": {
+    "dev": "NAMESPACE=templates NODE_ENV=development REACT_APP_GQL_PORT=4000 PORT=3071 joyent-react-scripts start",
+    "build:test": "echo 0",
+    "build:lib": "echo 0",
+    "build:bundle": "NAMESPACE=templates NODE_ENV=production redrun -p build:frontend build:ssr",
+    "prepublish": "NODE_ENV=production redrun build:bundle",
+    "test": "DEFAULT_TIMEOUT_INTERVAL=100000 NODE_ENV=test joyent-react-scripts test --env=jsdom",
+    "test:ci": "NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'",
+    "build:frontend": "joyent-react-scripts build",
+    "build:ssr": "SSR=1 UMD=1 babel src --out-dir lib/app --copy-files"
+  },
+  "dependencies": {
+    "@manaflair/redux-batch": "^0.1.0",
+    "cross-fetch": "^2.1.0",
+    "exenv": "^1.2.2",
+    "hapi-render-react": "^2.5.2",
+    "hapi-render-react-joyent-document": "^5.0.0",
+    "inert": "^5.1.0",
+    "joyent-manifest-editor": "^1.4.0",
+    "joyent-ui-instance-steps": "^1.0.0",
+    "joyent-ui-resource-step": "^1.0.0",
+    "joyent-ui-resource-widgets": "^1.0.0",
+    "joyent-ui-toolkit": "^6.0.0",
+    "lodash.get": "^4.4.2",
+    "query-string": "^6.1.0",
+    "react": "^16.3.1",
+    "react-apollo": "^2.1.2",
+    "react-dom": "^16.3.1",
+    "react-redux-values": "^1.1.2",
+    "react-router-dom": "^4.2.2",
+    "redux": "^3.7.2",
+    "redux-form": "^7.3.0",
+    "remcalc": "^1.0.10",
+    "styled-components": "^3.2.5",
+    "styled-components-spacing": "^2.1.3"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-preset-joyent-portal": "^7.0.1",
+    "eslint": "^4.19.1",
+    "eslint-config-joyent-portal": "^3.3.1",
+    "jest-image-snapshot": "^2.4.0",
+    "jest-styled-components": "^5.0.1",
+    "joyent-react-scripts": "^8.0.3",
+    "react-screenshot-renderer": "^1.1.2",
+    "react-test-renderer": "^16.3.1",
+    "redrun": "^6.0.2"
+  }
+}
diff --git a/consoles/my-joy-templates/public/manifest.json b/consoles/my-joy-templates/public/manifest.json
new file mode 100644
index 00000000..4372986a
--- /dev/null
+++ b/consoles/my-joy-templates/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Joyent",
+  "name": "My Joyent &beta;",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#1E313B",
+  "background_color": "#FAFAFA"
+}
diff --git a/consoles/my-joy-templates/public/static/css/libre-franklin.css b/consoles/my-joy-templates/public/static/css/libre-franklin.css
new file mode 100644
index 00000000..73f4397c
--- /dev/null
+++ b/consoles/my-joy-templates/public/static/css/libre-franklin.css
@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Libre Franklin'), local('LibreFranklin-Regular'),
+    url(../fonts/libre-franklin/libre-franklin-regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Libre Franklin Medium'), local('LibreFranklin-Medium'),
+    url(../fonts/libre-franklin/libre-franklin-medium.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Libre Franklin SemiBold'), local('LibreFranklin-SemiBold'),
+    url(../fonts/libre-franklin/libre-franklin-semibold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Libre Franklin Bold'), local('LibreFranklin-Bold'),
+    url(../fonts/libre-franklin/libre-franklin-bold.ttf) format('truetype');
+}
diff --git a/consoles/my-joy-templates/public/static/css/roboto-mono.css b/consoles/my-joy-templates/public/static/css/roboto-mono.css
new file mode 100644
index 00000000..dd436dc9
--- /dev/null
+++ b/consoles/my-joy-templates/public/static/css/roboto-mono.css
@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'),
+    url(../fonts/roboto-mono/roboto-mono-regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Mono Bold'), local('RobotoMono-Bold'),
+    url(../fonts/roboto-mono/roboto-mono-bold.ttf) format('truetype');
+}
diff --git a/consoles/my-joy-templates/public/static/fonts/libre-franklin/libre-franklin-bold.ttf b/consoles/my-joy-templates/public/static/fonts/libre-franklin/libre-franklin-bold.ttf
new file mode 100755
index 00000000..b43e97cc
Binary files /dev/null and b/consoles/my-joy-templates/public/static/fonts/libre-franklin/libre-franklin-bold.ttf differ
diff --git a/consoles/my-joy-templates/public/static/fonts/libre-franklin/libre-franklin-light.ttf b/consoles/my-joy-templates/public/static/fonts/libre-franklin/libre-franklin-light.ttf
new file mode 100755
index 00000000..2167ab43
Binary files /dev/null and b/consoles/my-joy-templates/public/static/fonts/libre-franklin/libre-franklin-light.ttf differ
diff --git a/consoles/my-joy-templates/public/static/fonts/libre-franklin/libre-franklin-medium.ttf b/consoles/my-joy-templates/public/static/fonts/libre-franklin/libre-franklin-medium.ttf
new file mode 100755
index 00000000..41daf855
Binary files /dev/null and b/consoles/my-joy-templates/public/static/fonts/libre-franklin/libre-franklin-medium.ttf differ
diff --git a/consoles/my-joy-templates/public/static/fonts/libre-franklin/libre-franklin-regular.ttf b/consoles/my-joy-templates/public/static/fonts/libre-franklin/libre-franklin-regular.ttf
new file mode 100755
index 00000000..487c31e2
Binary files /dev/null and b/consoles/my-joy-templates/public/static/fonts/libre-franklin/libre-franklin-regular.ttf differ
diff --git a/consoles/my-joy-templates/public/static/fonts/libre-franklin/libre-franklin-semibold.ttf b/consoles/my-joy-templates/public/static/fonts/libre-franklin/libre-franklin-semibold.ttf
new file mode 100755
index 00000000..98341cd5
Binary files /dev/null and b/consoles/my-joy-templates/public/static/fonts/libre-franklin/libre-franklin-semibold.ttf differ
diff --git a/consoles/my-joy-templates/public/static/fonts/libre-franklin/license.txt b/consoles/my-joy-templates/public/static/fonts/libre-franklin/license.txt
new file mode 100755
index 00000000..9df4654e
--- /dev/null
+++ b/consoles/my-joy-templates/public/static/fonts/libre-franklin/license.txt
@@ -0,0 +1,93 @@
+Copyright (c) 2015, Impallari Type (www.impallari.com)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/consoles/my-joy-templates/public/static/fonts/roboto-mono/license.txt b/consoles/my-joy-templates/public/static/fonts/roboto-mono/license.txt
new file mode 100755
index 00000000..75b52484
--- /dev/null
+++ b/consoles/my-joy-templates/public/static/fonts/roboto-mono/license.txt
@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/consoles/my-joy-templates/public/static/fonts/roboto-mono/roboto-mono-bold.ttf b/consoles/my-joy-templates/public/static/fonts/roboto-mono/roboto-mono-bold.ttf
new file mode 100755
index 00000000..07ef607d
Binary files /dev/null and b/consoles/my-joy-templates/public/static/fonts/roboto-mono/roboto-mono-bold.ttf differ
diff --git a/consoles/my-joy-templates/public/static/fonts/roboto-mono/roboto-mono-regular.ttf b/consoles/my-joy-templates/public/static/fonts/roboto-mono/roboto-mono-regular.ttf
new file mode 100755
index 00000000..b158a334
Binary files /dev/null and b/consoles/my-joy-templates/public/static/fonts/roboto-mono/roboto-mono-regular.ttf differ
diff --git a/consoles/my-joy-templates/readme.md b/consoles/my-joy-templates/readme.md
new file mode 100644
index 00000000..f10656bf
--- /dev/null
+++ b/consoles/my-joy-templates/readme.md
@@ -0,0 +1,20 @@
+# my-joy-templates
+
+[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg?style=flat-square)](https://opensource.org/licenses/MPL-2.0)
+[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
+
+## Table of Contents
+
+* [Usage](#usage)
+* [License](#license)
+
+## Usage
+
+```
+npm run start
+open http://0.0.0.0:3069
+```
+
+## License
+
+MPL-2.0
diff --git a/consoles/my-joy-templates/src/_aliases.js b/consoles/my-joy-templates/src/_aliases.js
new file mode 100644
index 00000000..f053ebf7
--- /dev/null
+++ b/consoles/my-joy-templates/src/_aliases.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/consoles/my-joy-templates/src/_document.js b/consoles/my-joy-templates/src/_document.js
new file mode 100644
index 00000000..8fa62f86
--- /dev/null
+++ b/consoles/my-joy-templates/src/_document.js
@@ -0,0 +1,54 @@
+const get = require('lodash.get');
+const Document = require('hapi-render-react-joyent-document');
+const url = require('url');
+
+const { theme } = require('joyent-ui-toolkit');
+const { default: createClient } = require('./state/apollo-client');
+const { default: createStore } = require('./state/redux-store');
+
+const assets = require('../../build/asset-manifest.json');
+
+const { NODE_ENV = 'development' } = process.env;
+
+const getState = request => {
+  const { req } = request.raw;
+  const { headers } = req;
+  const { host } = headers;
+
+  const protocol = NODE_ENV === 'development' ? 'http:' : 'https:';
+  const _font = get(theme, 'font.href', () => '');
+  const _mono = get(theme, 'monoFont.href', () => '');
+  const _addr = url.parse(`${protocol}//${host}`);
+
+  const _theme = Object.assign({}, theme, {
+    font: Object.assign({}, theme.font, {
+      href: () =>
+        _font(
+          Object.assign(_addr, {
+            namespace: 'templates'
+          })
+        )
+    }),
+    monoFont: Object.assign({}, theme.monoFont, {
+      href: () =>
+        _mono(
+          Object.assign(_addr, {
+            namespace: 'templates'
+          })
+        )
+    })
+  });
+
+  return {
+    theme: _theme,
+    createClient,
+    createStore
+  };
+};
+
+module.exports = Document({
+  namespace: 'templates/',
+  assets,
+  Html: require('./html'),
+  getState
+});
diff --git a/consoles/my-joy-templates/src/app.js b/consoles/my-joy-templates/src/app.js
new file mode 100644
index 00000000..cf61df7e
--- /dev/null
+++ b/consoles/my-joy-templates/src/app.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { RootContainer } from 'joyent-ui-toolkit';
+import Routes from '@root/routes';
+
+export default () => (
+  <RootContainer>
+    <Routes />
+  </RootContainer>
+);
diff --git a/consoles/my-joy-templates/src/components/list.js b/consoles/my-joy-templates/src/components/list.js
new file mode 100644
index 00000000..ad8f118b
--- /dev/null
+++ b/consoles/my-joy-templates/src/components/list.js
@@ -0,0 +1,190 @@
+import React from 'react';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import styled from 'styled-components';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
+import Flex, { FlexItem } from 'styled-flex-component';
+import { Margin, Padding } from 'styled-components-spacing';
+import { Link } from 'react-router-dom';
+import { Field } from 'redux-form';
+
+import {
+  Anchor,
+  Button,
+  P,
+  FormGroup,
+  Checkbox,
+  Table,
+  TableThead,
+  TableTr,
+  TableTh,
+  TableTd,
+  TableTbody,
+  StickyFooter,
+  StatusLoader,
+  DeleteIcon
+} from 'joyent-ui-toolkit';
+
+const A = styled(Anchor)`
+  color: ${props => props.theme.text};
+  text-decoration: none;
+  font-weight: ${props => props.theme.font.weight.semibold};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
+`;
+
+export const BulkFooter = ({ items = [], onRemove }) => {
+  const disabled = items.some(({ removing }) => removing);
+
+  return (
+    <StickyFooter fill="disabled" fixed bottom>
+      <Row between="xs" middle="xs">
+        <Col xs="7">
+          <Flex>
+            <Margin right="1">
+              <Button
+                type="button"
+                to={`/service-groups/~create?template=${items[0].id}`}
+                component={Link}
+                disabled={disabled || items.length > 1}
+                icon
+              >
+                <span>Create Service Group</span>
+              </Button>
+            </Margin>
+            <Button
+              type="button"
+              to={`/templates/~duplicate/${items[0].id}/name`}
+              component={Link}
+              disabled={disabled || items.length > 1}
+              secondary
+              icon
+            >
+              <span>Duplicate</span>
+            </Button>
+          </Flex>
+        </Col>
+        <Col xs="5">
+          <Flex justifyEnd alignCenter>
+            <FlexItem>
+              <Button
+                type="button"
+                onClick={ev => onRemove(ev, items)}
+                disabled={disabled}
+                error
+                secondary
+                icon
+              >
+                <Margin right="1">
+                  <DeleteIcon fill={disabled ? 'grey' : 'red'} />
+                </Margin>
+                <span>Remove</span>
+              </Button>
+            </FlexItem>
+          </Flex>
+        </Col>
+      </Row>
+    </StickyFooter>
+  );
+};
+
+export const LoadingRow = ({ children }) => (
+  <TableTr colSpan="5">
+    <TableTd colSpan="5" middle center>
+      <StatusLoader>{children}</StatusLoader>
+    </TableTd>
+  </TableTr>
+);
+
+export const Empty = ({ filter = false }) => (
+  <TableTr colSpan="5">
+    <TableTd colSpan="5" middle center>
+      <Padding vertical="4">
+        <P>
+          {filter
+            ? 'You have no templates that match your query'
+            : "You haven't created any templates yet, but they're really easy to set up. Click below to get going."}
+        </P>
+        {filter ? null : (
+          <Margin top="3">
+            <Button type="button" component={Link} to="/templates/~create">
+              Create template
+            </Button>
+          </Margin>
+        )}
+      </Padding>
+    </TableTd>
+  </TableTr>
+);
+
+export const Item = ({ id = '', name, image, created, ...template }) => (
+  <TableTr>
+    <TableTd padding="0" middle left>
+      <FormGroup name={id} field={Field}>
+        <Margin left="3" inline>
+          <Checkbox noMargin />
+        </Margin>
+      </FormGroup>
+    </TableTd>
+    <TableTd middle left>
+      <A to={`/templates/${id}`} component={Link}>
+        {name}
+      </A>
+    </TableTd>
+    <TableTd middle left>
+      {image.substring(0, 7)}
+    </TableTd>
+    <TableTd middle left>
+      {template.package.substring(0, 7)}
+    </TableTd>
+    <TableTd middle left>
+      {distanceInWordsToNow(created)}
+    </TableTd>
+  </TableTr>
+);
+
+export default ({
+  sortBy = 'name',
+  sortOrder = 'desc',
+  submitting = false,
+  checked = false,
+  onToggleCheckAll = () => null,
+  onSortBy = () => null,
+  children
+}) => (
+  <form>
+    <Table>
+      <TableThead>
+        <TableTr>
+          <TableTh xs="42" padding="0" middle center>
+            <FormGroup>
+              <Margin left="3" inline>
+                <Checkbox
+                  checked={checked}
+                  disabled={submitting}
+                  onChange={onToggleCheckAll}
+                  noMargin
+                />
+              </Margin>
+            </FormGroup>
+          </TableTh>
+          <TableTh left middle actionable>
+            <span>Template name</span>
+          </TableTh>
+          <TableTh left middle actionable>
+            <span>Image</span>
+          </TableTh>
+          <TableTh xs="0" sm="160" left middle actionable>
+            <span>Package</span>
+          </TableTh>
+          <TableTh xs="160" left middle actionable>
+            <span>Created</span>
+          </TableTh>
+        </TableTr>
+      </TableThead>
+      <TableTbody>{children}</TableTbody>
+    </Table>
+  </form>
+);
diff --git a/consoles/my-joy-templates/src/components/summary.js b/consoles/my-joy-templates/src/components/summary.js
new file mode 100644
index 00000000..c998f529
--- /dev/null
+++ b/consoles/my-joy-templates/src/components/summary.js
@@ -0,0 +1,399 @@
+import React, { Fragment, PureComponent } from 'react';
+import ReduxForm from 'declarative-redux-form';
+import { Link } from 'react-router-dom';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
+import { Padding, Margin } from 'styled-components-spacing';
+import Flex, { FlexItem } from 'styled-flex-component';
+import styled from 'styled-components';
+import is from 'styled-is';
+import remcalc from 'remcalc';
+
+import {
+  Card,
+  CardOutlet,
+  H2,
+  H3,
+  H4,
+  P,
+  Label,
+  Button,
+  Hr,
+  TagItem,
+  DeleteIcon,
+  InstanceTypeIcon,
+  PackageIcon,
+  PublicIcon,
+  PrivateIcon,
+  FabricIcon,
+  DataCenterIcon,
+  NetworkIcon,
+  TagsIcon,
+  MetadataIcon,
+  ScriptIcon,
+  FirewallIcon,
+  CnsIcon
+} from 'joyent-ui-toolkit';
+
+import Editor from 'joyent-ui-toolkit/dist/es/editor';
+import { FirewallPreview, CnsPreview } from 'joyent-ui-instance-steps';
+import { KeyValue } from 'joyent-ui-resource-widgets';
+import { Forms } from '@root/constants';
+
+const { TS_M_F } = Forms;
+
+const GreyLabel = styled(Label)`
+  opacity: 0.5;
+  padding-right: ${remcalc(3)};
+`;
+
+const Line = styled(Hr)`
+  ${is('left')`
+    margin-left: ${props => props.left};
+  `};
+
+  ${is('right')`
+    margin-right: ${props => props.right};
+  `};
+`;
+
+const VerticalDivider = styled.div`
+  width: ${remcalc(1)};
+  background: ${props => props.theme.grey};
+  height: ${remcalc(24)};
+  display: flex;
+  align-self: flex-end;
+  margin: 0;
+`;
+
+const Box = styled.div`
+  display: inline-block;
+  background-color: ${props => props.theme.white};
+  border: ${remcalc(1)} solid ${props => props.theme.grey};
+  border-radius: ${remcalc(4)};
+  min-width: ${remcalc(300)};
+`;
+
+const Item = ({ icon, label, children }) => (
+  <Margin top="5">
+    <Flex alignCenter>
+      <FlexItem>
+        <Padding right="3">{icon}</Padding>
+      </FlexItem>
+      <VerticalDivider />
+      <FlexItem>
+        <Padding left="3">
+          <GreyLabel inline>{label}</GreyLabel>
+        </Padding>
+      </FlexItem>
+      <FlexItem grow="2">
+        <Padding left="2">
+          <Line left="0" />
+        </Padding>
+      </FlexItem>
+    </Flex>
+    <Margin top="3">{children}</Margin>
+  </Margin>
+);
+
+export const Meta = ({
+  actions = true,
+  removing = false,
+  onRemove,
+  id,
+  name,
+  created,
+  image,
+  ...template
+}) => (
+  <Card>
+    <CardOutlet>
+      <Padding all="5">
+        <Margin bottom="2">
+          <H2>{name}</H2>
+        </Margin>
+        <Flex>
+          <FlexItem>
+            <Padding right="3">
+              <GreyLabel inline>Image: </GreyLabel>
+              <Label inline> {image}</Label>
+            </Padding>
+          </FlexItem>
+          <VerticalDivider />
+          <FlexItem>
+            <Padding right="3" left="3">
+              <GreyLabel inline>Package: </GreyLabel>
+              <Label inline> {template.package}</Label>
+            </Padding>
+          </FlexItem>
+          <VerticalDivider />
+          <FlexItem>
+            <Padding horizontal="3">
+              <GreyLabel inline>Created: </GreyLabel>
+              <Label inline> {distanceInWordsToNow(created)} ago</Label>
+            </Padding>
+          </FlexItem>
+        </Flex>
+        {actions ? (
+          <Fragment>
+            <Margin top="3" bottom="3">
+              <Hr />
+            </Margin>
+            <Row between="xs">
+              <Col xs="6">
+                <Margin right="1" inline>
+                  <Button
+                    type="button"
+                    to={`/service-groups/~create?template=${id}`}
+                    component={Link}
+                    bold
+                    icon
+                  >
+                    <span>Create Service Group</span>
+                  </Button>
+                </Margin>
+                <Button
+                  type="button"
+                  to={`/templates/~duplicate/${id}/name`}
+                  component={Link}
+                  secondary
+                  bold
+                  icon
+                >
+                  <span>Duplicate</span>
+                </Button>
+              </Col>
+              <Col xs="6">
+                <Button
+                  type="button"
+                  onClick={onRemove}
+                  loading={removing}
+                  secondary
+                  bold
+                  right
+                  icon
+                  error
+                >
+                  <Margin right="2">
+                    <DeleteIcon fill="red" />
+                  </Margin>
+                  <span>Remove</span>
+                </Button>
+              </Col>
+            </Row>
+          </Fragment>
+        ) : null}
+      </Padding>
+    </CardOutlet>
+  </Card>
+);
+
+const Image = ({ name, type }) => (
+  <Item icon={<InstanceTypeIcon disabled />} label="Image">
+    <Margin bottom="2">
+      <H3>{name}</H3>
+    </Margin>
+    <H4>{type}</H4>
+  </Item>
+);
+
+const Package = ({ name }) => (
+  <Item icon={<PackageIcon disabled />} label="Package">
+    <Margin bottom="2">
+      <H3>{name}</H3>
+    </Margin>
+    <Flex alignCenter>
+      <FlexItem>
+        <Padding right="3">
+          <Label inline>$0.416 per hour</Label>
+        </Padding>
+      </FlexItem>
+      <VerticalDivider />
+      <FlexItem>
+        <Padding right="3" left="3">
+          <Label inline>32 GB RAM</Label>
+        </Padding>
+      </FlexItem>
+      <VerticalDivider />
+      <FlexItem>
+        <Padding right="3" left="3">
+          <Label inline>4 vCPUs</Label>
+        </Padding>
+      </FlexItem>
+      <VerticalDivider />
+      <FlexItem>
+        <Padding right="3" left="3">
+          <Label inline>200 GB disk</Label>
+        </Padding>
+      </FlexItem>
+      <VerticalDivider />
+      <FlexItem>
+        <Padding right="3" left="3">
+          <Label inline>SSD</Label>
+        </Padding>
+      </FlexItem>
+    </Flex>
+  </Item>
+);
+
+const Network = ({ name, fabric, ...network }) => (
+  <Box>
+    <Flex column>
+      <FlexItem>
+        <Margin left="3" right="3" top="2" bottom="2">
+          <P>{name}</P>
+        </Margin>
+      </FlexItem>
+      <FlexItem>
+        <Line left="0" right="0" />
+      </FlexItem>
+      <FlexItem>
+        <Margin left="3" right="3" top="2" bottom="2">
+          <Flex>
+            <Margin right="4">
+              <FlexItem>
+                <Flex alignCenter>
+                  <FlexItem>
+                    <Margin right="1">
+                      {network.public ? <PublicIcon /> : <PrivateIcon />}
+                    </Margin>
+                  </FlexItem>
+                  <FlexItem>
+                    <P>{network.public ? 'Public' : 'Private'}</P>
+                  </FlexItem>
+                </Flex>
+              </FlexItem>
+            </Margin>
+            <Margin>
+              <FlexItem>
+                <Flex alignCenter>
+                  <FlexItem>
+                    <Margin right="1">
+                      {fabric ? <FabricIcon /> : <DataCenterIcon />}
+                    </Margin>
+                  </FlexItem>
+                  <FlexItem>
+                    <P>{fabric ? 'Fabric network' : 'Data center network'}</P>
+                  </FlexItem>
+                </Flex>
+              </FlexItem>
+            </Margin>
+          </Flex>
+        </Margin>
+      </FlexItem>
+    </Flex>
+  </Box>
+);
+
+const Networks = () => (
+  <Item icon={<NetworkIcon disabled />} label="Networks">
+    <Margin right="3" inline>
+      <Network name="Joyent -SDC-Public-Network" />
+    </Margin>
+    <Margin right="3" inline>
+      <Network name="My-Amazing-Network" />
+    </Margin>
+  </Item>
+);
+
+const Tags = ({ values }) =>
+  values.length ? (
+    <Item icon={<TagsIcon disabled />} label="Tags">
+      <Margin bottom="-1">
+        {values.map(({ name, value }) => (
+          <Margin right="1" bottom="1" inline>
+            <TagItem>
+              {name}:{value}
+            </TagItem>
+          </Margin>
+        ))}
+      </Margin>
+    </Item>
+  ) : null;
+
+class MetadataItem extends PureComponent {
+  state = {
+    expanded: false
+  };
+
+  handleToggleExpanded = () =>
+    this.setState({
+      expanded: !this.state.expanded
+    });
+
+  render() {
+    return (
+      <ReduxForm form={TS_M_F(this.props.name)} initialValues={this.props}>
+        {props => (
+          <KeyValue
+            {...props}
+            method="edit"
+            input="textarea"
+            expanded={this.state.expanded}
+            shadow={false}
+            onToggleExpanded={this.handleToggleExpanded}
+            disabled
+            noActions
+          />
+        )}
+      </ReduxForm>
+    );
+  }
+}
+
+const Metadata = ({ values = [] }) =>
+  values.length ? (
+    <Item icon={<MetadataIcon disabled />} label="Metadata">
+      {values.map(({ name, value }, i) => (
+        <Margin bottom={values.length === i + 1 ? '0' : '2'}>
+          <MetadataItem name={name} value={value} />
+        </Margin>
+      ))}
+    </Item>
+  ) : null;
+
+const UserScript = ({ value = '' }) =>
+  value.length ? (
+    <Item icon={<ScriptIcon disabled />} label="User script">
+      <Margin bottom="3">
+        <H3>{value.trim().split(/\n/).length} lines of code</H3>
+      </Margin>
+      <Editor value={value} onBlur={null} mode="sh" />
+    </Item>
+  ) : null;
+
+const Firewall = ({ enabled = false }) => (
+  <Item icon={<FirewallIcon disabled />} label="Firewall rules">
+    <FirewallPreview enabled={enabled} />
+  </Item>
+);
+
+const Cns = ({ enabled = false }) => (
+  <Item icon={<CnsIcon disabled />} label="CNS">
+    <CnsPreview enabled={enabled} />
+  </Item>
+);
+
+export const Template = ({
+  tags = [],
+  metadata = [],
+  userScript = '',
+  enableFirewall = false,
+  cnsEnabled = false
+}) => (
+  <Card>
+    <CardOutlet>
+      <Padding all="5">
+        <H2>Template details</H2>
+        <Image name="centos-7/20170327" type="Hardware virtual machine" />
+        <Package name="k4–high–cpu–47" />
+        <Networks />
+        <Tags values={tags} />
+        <Metadata values={metadata} />
+        <UserScript value={userScript} />
+        <Firewall enabled={enableFirewall} />
+        <Cns enabled={cnsEnabled} />
+      </Padding>
+    </CardOutlet>
+  </Card>
+);
diff --git a/consoles/my-joy-templates/src/components/toolbar.js b/consoles/my-joy-templates/src/components/toolbar.js
new file mode 100644
index 00000000..893b3bc1
--- /dev/null
+++ b/consoles/my-joy-templates/src/components/toolbar.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import Flex from 'styled-flex-component';
+import { Margin } from 'styled-components-spacing';
+import { Link } from 'react-router-dom';
+import { Field } from 'redux-form';
+
+import { FormGroup, Input, FormLabel, Button } from 'joyent-ui-toolkit';
+
+export const Toolbar = ({
+  searchLabel = 'Filter',
+  searchPlaceholder = '',
+  searchable = true,
+  actionLabel = 'Create',
+  actionable = true,
+  onActionClick,
+  actionTo
+}) => (
+  <Flex justifyBetween alignEnd>
+    <FormGroup name="filter" field={Field}>
+      <FormLabel>{searchLabel}</FormLabel>
+      <Margin top="0.5">
+        <Input placeholder={searchPlaceholder} disabled={!searchable} />
+      </Margin>
+    </FormGroup>
+    {actionable ? (
+      <FormGroup right>
+        <Button
+          type={actionTo || onActionClick ? 'button' : 'submit'}
+          component={actionTo ? Link : undefined}
+          to={actionTo}
+          onClick={onActionClick}
+          icon
+          fluid
+        >
+          {actionLabel}
+        </Button>
+      </FormGroup>
+    ) : null}
+  </Flex>
+);
+
+export default ({ handleSubmit, ...rest }) => (
+  <form onSubmit={handleSubmit}>
+    <Toolbar {...rest} />
+  </form>
+);
diff --git a/consoles/my-joy-templates/src/constants.js b/consoles/my-joy-templates/src/constants.js
new file mode 100644
index 00000000..905120f7
--- /dev/null
+++ b/consoles/my-joy-templates/src/constants.js
@@ -0,0 +1,14 @@
+export const Forms = {
+  TC_F: 'TEMPLATE_CREATION_FORM',
+  TD_F: 'TEMPLATE_DUPLICATION_FORM',
+  TL_F_F: 'TEMPLATE_LIST_FILTER_FORM',
+  TL_T_F: 'TEMPLATE_LIST_TABLE_FORM',
+  TS_M_F: name => `TEMPLATE_SUMMARY_METADATA_FORM-${name}`
+};
+
+export const Values = {
+  TL_R_V: id => `TEMPLATE_LIST_REMOVING_VALUE-${id}`,
+  TL_E_V: 'TEMPLATE_LIST_ERROR_VALUE',
+  TS_R_V: id => `TEMPLATE_SUMMARY_REMOVING_VALUE-${id}`,
+  TS_E_V: id => `TEMPLATE_SUMMARY_ERROR_VALUE-${id}`
+};
diff --git a/consoles/my-joy-templates/src/containers/__tests__/__snapshots__/breadcrumb.spec.js.snap b/consoles/my-joy-templates/src/containers/__tests__/__snapshots__/breadcrumb.spec.js.snap
new file mode 100644
index 00000000..b0c75fd7
--- /dev/null
+++ b/consoles/my-joy-templates/src/containers/__tests__/__snapshots__/breadcrumb.spec.js.snap
@@ -0,0 +1,503 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Breadcrumb /> without throwing 1`] = `
+.c11 {
+  margin-left: 0.375rem;
+  margin-right: 0.375rem;
+  margin-top: 1.125rem;
+  margin-bottom: 1.125rem;
+}
+
+.c3 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.c2 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1.875rem;
+  padding-left: 1.875rem;
+}
+
+.c5 {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.c6 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c7 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c1 {
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c4 {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 78.75rem;
+}
+
+.c10 {
+  margin: 0;
+  color: rgb(73,73,73);
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c9 {
+  font-weight: normal;
+  margin: 0;
+}
+
+.c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c8:first-child a {
+  color: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c8:last-child svg {
+  display: none;
+}
+
+.c0 {
+  border-bottom: 0.0625rem solid rgb(216,216,216);
+}
+
+@media only screen and (min-width:48em) {
+  .c5 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c5 {
+    width: 56rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c5 {
+    width: 59rem;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c7 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}
+
+@media only screen and (max-width:37.4375rem) {
+  .c4 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c4 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c4 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+<div
+  className="c0 c1 c2"
+>
+  <div
+    className="c3"
+  >
+    <div
+      className="c4 c5"
+    >
+      <div
+        className="c6"
+        name="breadcrum"
+      >
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+          >
+            <h4
+              className="c9 c10"
+              name="breadcrum-item"
+            >
+              <div
+                className="c11"
+              >
+                Compute
+              </div>
+            </h4>
+            <svg
+              height="6"
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
+          <div
+            className="c8"
+          >
+            <h4
+              className="c9 c10"
+              name="breadcrum-item"
+            >
+              <div
+                className="c11"
+              >
+                Templates
+              </div>
+            </h4>
+            <svg
+              height="6"
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <Breadcrumb match /> without throwing 1`] = `
+.c11 {
+  margin-left: 0.375rem;
+  margin-right: 0.375rem;
+  margin-top: 1.125rem;
+  margin-bottom: 1.125rem;
+}
+
+.c3 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.c2 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1.875rem;
+  padding-left: 1.875rem;
+}
+
+.c5 {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.c6 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c7 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c1 {
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.c4 {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 78.75rem;
+}
+
+.c10 {
+  margin: 0;
+  color: rgb(73,73,73);
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c9 {
+  font-weight: normal;
+  margin: 0;
+}
+
+.c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c8:first-child a {
+  color: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c8:last-child svg {
+  display: none;
+}
+
+.c0 {
+  border-bottom: 0.0625rem solid rgb(216,216,216);
+}
+
+@media only screen and (min-width:48em) {
+  .c5 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c5 {
+    width: 56rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c5 {
+    width: 59rem;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c7 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}
+
+@media only screen and (max-width:37.4375rem) {
+  .c4 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c4 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c4 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+<div
+  className="c0 c1 c2"
+>
+  <div
+    className="c3"
+  >
+    <div
+      className="c4 c5"
+    >
+      <div
+        className="c6"
+        name="breadcrum"
+      >
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+          >
+            <h4
+              className="c9 c10"
+              name="breadcrum-item"
+            >
+              <div
+                className="c11"
+              >
+                Compute
+              </div>
+            </h4>
+            <svg
+              height="6"
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
+          <div
+            className="c8"
+          >
+            <h4
+              className="c9 c10"
+              name="breadcrum-item"
+            >
+              <div
+                className="c11"
+              >
+                Templates
+              </div>
+            </h4>
+            <svg
+              height="6"
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
+          <div
+            className="c8"
+          >
+            <h4
+              className="c9 c10"
+              name="breadcrum-item"
+            >
+              <div
+                className="c11"
+              >
+                id
+              </div>
+            </h4>
+            <svg
+              height="6"
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/consoles/my-joy-templates/src/containers/__tests__/breadcrumb.spec.js b/consoles/my-joy-templates/src/containers/__tests__/breadcrumb.spec.js
new file mode 100644
index 00000000..0549d789
--- /dev/null
+++ b/consoles/my-joy-templates/src/containers/__tests__/breadcrumb.spec.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Breadcrumb from '../breadcrumb';
+import Theme from '@mocks/theme';
+
+it('renders <Breadcrumb /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Breadcrumb />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Breadcrumb match /> without throwing', () => {
+  const match = {
+    params: {
+      sg: 'id'
+    }
+  };
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Breadcrumb match={match} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
diff --git a/consoles/my-joy-templates/src/containers/breadcrumb.js b/consoles/my-joy-templates/src/containers/breadcrumb.js
new file mode 100644
index 00000000..cc4daa2e
--- /dev/null
+++ b/consoles/my-joy-templates/src/containers/breadcrumb.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import paramCase from 'param-case';
+import get from 'lodash.get';
+import { Link } from 'react-router-dom';
+import { Margin } from 'styled-components-spacing';
+
+import { Breadcrumb, BreadcrumbItem } from 'joyent-ui-toolkit';
+
+export default ({ match }) => {
+  const serviceGroupId = get(match, 'params.sg');
+
+  const links = [
+    {
+      name: 'Compute',
+      pathname: '/'
+    },
+    {
+      name: 'Templates',
+      pathname: '/templates'
+    }
+  ]
+    .concat(
+      serviceGroupId && [
+        {
+          name: paramCase(serviceGroupId),
+          pathname: `/templates/${serviceGroupId}`
+        }
+      ]
+    )
+    .filter(Boolean)
+    .map(({ name, pathname }) => (
+      <BreadcrumbItem key={name} to={pathname} component={Link}>
+        <Margin horizontal="1" vertical="3">
+          {name}
+        </Margin>
+      </BreadcrumbItem>
+    ));
+
+  return <Breadcrumb>{links}</Breadcrumb>;
+};
diff --git a/consoles/my-joy-templates/src/containers/create.js b/consoles/my-joy-templates/src/containers/create.js
new file mode 100644
index 00000000..f12bb772
--- /dev/null
+++ b/consoles/my-joy-templates/src/containers/create.js
@@ -0,0 +1,343 @@
+import React, { Component } from 'react';
+import ReduxForm from 'declarative-redux-form';
+import { SubmissionError, destroy } from 'redux-form';
+import { Margin, Padding } from 'styled-components-spacing';
+import { compose, graphql } from 'react-apollo';
+import { connect } from 'react-redux';
+import { set, destroyAll } from 'react-redux-values';
+import intercept from 'apr-intercept';
+import get from 'lodash.get';
+
+import {
+  H3,
+  ViewContainer,
+  Message,
+  MessageTitle,
+  MessageDescription,
+  Button
+} from 'joyent-ui-toolkit';
+
+import {
+  PostCreation,
+  PostCreationContent,
+  PostCreationTitle
+} from 'joyent-ui-resource-widgets';
+
+import {
+  Name,
+  Image,
+  Package,
+  Networks,
+  Tags,
+  Metadata,
+  UserScript,
+  Firewall,
+  CNS,
+  generatePayload
+} from 'joyent-ui-instance-steps';
+
+import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
+
+import { Forms } from '@root/constants';
+import parseError from '@state/parse-error';
+import CreateTemplateMutation from '@graphql/create-template.gql';
+
+const { TC_F } = Forms;
+const names = {
+  name: 'TC_NAME',
+  image: 'TC_IMAGE',
+  package: 'TC_PACKAGE',
+  networks: 'TC_NETWORKS',
+  tags: 'TC_TAGS',
+  metadata: 'TC_METADATA',
+  'user-script': 'TC_USERSCRIPT',
+  firewall: 'TC_FIREWALL',
+  cns: 'TC_CNS'
+};
+
+class CreateTemplate extends Component {
+  constructor(...args) {
+    super(...args);
+    this.isValids = {};
+  }
+
+  setIsValid = name => ref => {
+    if (!ref) {
+      return;
+    }
+
+    const { isValid } = ref;
+
+    if (!isValid) {
+      return;
+    }
+
+    this.isValids = Object.assign({}, this.isValids, {
+      [name]: isValid
+    });
+  };
+
+  isFormValid = () => {
+    const { steps } = this.props;
+
+    return Boolean(
+      Object.keys(this.isValids).filter(name => name =>
+        !this.isValids[name](steps[name] || {})
+      ).length
+    );
+  };
+
+  isStepValid = step => {
+    const { steps } = this.props;
+    const fn = this.isValids[step];
+    const values = steps[step];
+
+    if (!fn || !values) {
+      return true;
+    }
+
+    return fn(values);
+  };
+
+  render() {
+    const {
+      error,
+      match,
+      steps,
+      disabled,
+      handleDefocus,
+      handleSubmit
+    } = this.props;
+    const { params } = match;
+    const { step } = params;
+    const { name, image, networks, tags, metadata, cns, firewall } = steps;
+
+    return (
+      <ViewContainer main>
+        <Margin top="5">
+          <H3>Create Template</H3>
+        </Margin>
+        <Padding top="5">
+          {error ? (
+            <Margin bottom="2">
+              <Message error>
+                <MessageTitle>Ooops!</MessageTitle>
+                <MessageDescription>{error}</MessageDescription>
+              </Message>
+            </Margin>
+          ) : null}
+          <ResourceSteps namespace="templates/~create">
+            <Margin bottom="5">
+              <Name
+                type="template"
+                ref={this.setIsValid('name')}
+                expanded={step === 'name'}
+                next="image"
+                saved={get(steps, 'name.name', false)}
+                onDefocus={handleDefocus('name')}
+                preview={name}
+                isValid={this.isStepValid('name')}
+              />
+            </Margin>
+            <Margin bottom="5">
+              <Image
+                ref={this.setIsValid('image')}
+                expanded={step === 'image'}
+                next="package"
+                saved={steps.image && steps.image.id}
+                onDefocus={handleDefocus('image')}
+                preview={image}
+              />
+            </Margin>
+            <Margin bottom="5">
+              <Package
+                ref={this.setIsValid('package')}
+                expanded={step === 'package'}
+                next="networks"
+                saved={steps.package}
+                onDefocus={handleDefocus('package')}
+                preview={steps.package}
+              />
+            </Margin>
+            <Margin bottom="5">
+              <Networks
+                ref={this.setIsValid('networks')}
+                expanded={step === 'networks'}
+                next="tags"
+                saved={steps.networks}
+                onDefocus={handleDefocus('networks')}
+                preview={networks}
+              />
+            </Margin>
+            <Margin bottom="5">
+              <Tags
+                ref={this.setIsValid('tags')}
+                expanded={step === 'tags'}
+                next="metadata"
+                saved={steps.tags && steps.tags.length}
+                onDefocus={handleDefocus('tags')}
+                preview={tags}
+                optional
+              />
+            </Margin>
+            <Margin bottom="5">
+              <Metadata
+                ref={this.setIsValid('metadata')}
+                expanded={step === 'metadata'}
+                next="user-script"
+                saved={steps.metadata && steps.metadata.length}
+                onDefocus={handleDefocus('metadata')}
+                preview={metadata}
+                optional
+              />
+            </Margin>
+            <Margin bottom="5">
+              <UserScript
+                ref={this.setIsValid('user-script')}
+                expanded={step === 'user-script'}
+                next="firewall"
+                saved={get(steps, 'user-script.lines', false)}
+                onDefocus={handleDefocus('user-script')}
+                preview={steps['user-script']}
+                optional
+              />
+            </Margin>
+            <Margin bottom="5">
+              <Firewall
+                ref={this.setIsValid('firewall')}
+                expanded={step === 'firewall'}
+                next="cns"
+                saved={steps.firewall}
+                onDefocus={handleDefocus('firewall')}
+                preview={firewall}
+                optional
+              />
+            </Margin>
+            <Margin bottom="5">
+              <CNS
+                ref={this.setIsValid('cns')}
+                expanded={step === 'cns'}
+                next=""
+                saved={steps.cns}
+                onDefocus={handleDefocus('cns')}
+                preview={cns}
+                optional
+              />
+            </Margin>
+          </ResourceSteps>
+          <Margin bottom="5">
+            {error ? (
+              <Margin bottom="2">
+                <Message error>
+                  <MessageTitle>Ooops!</MessageTitle>
+                  <MessageDescription>{error}</MessageDescription>
+                </Message>
+              </Margin>
+            ) : null}
+            <ReduxForm form={TC_F} onSubmit={handleSubmit}>
+              {({ handleSubmit, submitting }) => (
+                <form onSubmit={handleSubmit}>
+                  <Button
+                    disabled={disabled || !this.isFormValid()}
+                    loading={submitting}
+                  >
+                    Create
+                  </Button>
+                </form>
+              )}
+            </ReduxForm>
+          </Margin>
+        </Padding>
+      </ViewContainer>
+    );
+  }
+}
+
+export const Success = ({ match }) => {
+  const id = match.params.template;
+
+  return (
+    <ViewContainer main>
+      <Margin top="5">
+        <PostCreation
+          id={id}
+          altCreateTo={`/service-groups/~create?template=${id}`}
+          object="template"
+          name="service group"
+        >
+          <PostCreationTitle>
+            You have successfully created a template
+          </PostCreationTitle>
+          <PostCreationContent>
+            Your template has been created and is currently being processed. It
+            should only take a few minutes and will then appear in your console.
+          </PostCreationContent>
+        </PostCreation>
+      </Margin>
+    </ViewContainer>
+  );
+};
+
+export default compose(
+  graphql(CreateTemplateMutation, { name: 'createTemplate' }),
+  connect(({ form, values = {} }, { match, location }) => {
+    const steps = {
+      name: values[names.name],
+      image: values[names.image],
+      package: values[names.package],
+      networks: values[names.networks],
+      tags: values[names.tags],
+      metadata: values[names.metadata],
+      'user-script': values[names['user-script']],
+      firewall: values[names.firewall],
+      cns: values[names.cns]
+    };
+
+    const error = get(form, `${TC_F}.error`, null);
+
+    // Maybe re-use saved to only write the rule once
+    const disabled = !(
+      !error &&
+      steps.name &&
+      steps.name.name &&
+      steps.image &&
+      steps.image.id &&
+      steps.package &&
+      steps.package.id &&
+      Array.isArray(steps.networks)
+    );
+
+    return {
+      disabled,
+      forms: Object.keys(form), // improve this
+      error,
+      steps
+    };
+  }),
+  connect(null, (dispatch, { steps = {}, forms, history, createTemplate }) => {
+    return {
+      handleDefocus: name => value => {
+        return dispatch(set({ name: names[name], value }));
+      },
+
+      handleSubmit: async () => {
+        const [err, res] = await intercept(
+          createTemplate({
+            variables: generatePayload(steps)
+          })
+        );
+
+        if (err) {
+          throw new SubmissionError({
+            _error: parseError(err)
+          });
+        }
+
+        dispatch([destroyAll(), forms.map(name => destroy(name))]);
+        history.push(
+          `/templates/~create/${res.data.createTemplate.id}/success`
+        );
+      }
+    };
+  })
+)(CreateTemplate);
diff --git a/consoles/my-joy-templates/src/containers/duplicate.js b/consoles/my-joy-templates/src/containers/duplicate.js
new file mode 100644
index 00000000..c7597dc3
--- /dev/null
+++ b/consoles/my-joy-templates/src/containers/duplicate.js
@@ -0,0 +1,222 @@
+import React, { Component } from 'react';
+import ReduxForm from 'declarative-redux-form';
+import { SubmissionError, destroy } from 'redux-form';
+import { Margin, Padding } from 'styled-components-spacing';
+import { compose, graphql } from 'react-apollo';
+import { connect } from 'react-redux';
+import { set, destroyAll } from 'react-redux-values';
+import intercept from 'apr-intercept';
+import isString from 'lodash.isstring';
+import get from 'lodash.get';
+
+import {
+  H3,
+  ViewContainer,
+  Message,
+  MessageTitle,
+  MessageDescription,
+  Button,
+  StatusLoader
+} from 'joyent-ui-toolkit';
+
+import { Name } from 'joyent-ui-instance-steps';
+import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
+
+import { Forms } from '@root/constants';
+import { Meta } from '@components/summary';
+import parseError from '@state/parse-error';
+import CreateTemplateMutation from '@graphql/create-template.gql';
+import GetTemplate from '@graphql/get-template.gql';
+
+const { TD_F } = Forms;
+const names = { name: 'TD_NAME' };
+
+class CreateTemplate extends Component {
+  constructor(...args) {
+    super(...args);
+    this.isValids = {};
+  }
+
+  setIsValid = name => ref => {
+    if (!ref) {
+      return;
+    }
+
+    const { isValid } = ref;
+
+    if (!isValid) {
+      return;
+    }
+
+    this.isValids = Object.assign({}, this.isValids, {
+      [name]: isValid
+    });
+  };
+
+  isFormValid = () => {
+    const { steps } = this.props;
+
+    return Boolean(
+      Object.keys(this.isValids).filter(name => name =>
+        !this.isValids[name](steps[name] || {})
+      ).length
+    );
+  };
+
+  isStepValid = step => {
+    const { steps } = this.props;
+    const fn = this.isValids[step];
+    const values = steps[step];
+
+    if (!fn || !values) {
+      return true;
+    }
+
+    return fn(values);
+  };
+
+  render() {
+    const {
+      template,
+      error,
+      loading,
+      match,
+      steps,
+      disabled,
+      handleDefocus,
+      handleSubmit
+    } = this.props;
+
+    const { params } = match;
+    const { step, template: id } = params;
+    const { name } = steps;
+
+    return (
+      <ViewContainer main>
+        <Margin top="5">
+          <H3>Duplicate Template</H3>
+        </Margin>
+        {error ? (
+          <Margin bottom="5">
+            <Message error>
+              <MessageTitle>Ooops!</MessageTitle>
+              <MessageDescription>
+                {isString(error)
+                  ? error
+                  : 'An error occurred while loading your template'}
+              </MessageDescription>
+            </Message>
+          </Margin>
+        ) : null}
+        <Margin top="5">
+          {loading ? <StatusLoader /> : <Meta {...template} actions={false} />}
+        </Margin>
+        <Padding top="5">
+          <ResourceSteps namespace={`templates/~duplicate/${id}`}>
+            <Margin bottom="5">
+              <Name
+                type="template"
+                ref={this.setIsValid('name')}
+                expanded={step === 'name'}
+                saved={get(steps, 'name.name', false)}
+                onDefocus={handleDefocus('name')}
+                preview={name}
+                isValid={this.isStepValid('name')}
+              />
+            </Margin>
+          </ResourceSteps>
+          <Margin bottom="5">
+            <ReduxForm form={TD_F} onSubmit={handleSubmit}>
+              {({ handleSubmit, submitting }) => (
+                <form onSubmit={handleSubmit}>
+                  <Button
+                    disabled={disabled || !this.isFormValid()}
+                    loading={submitting}
+                  >
+                    Duplicate
+                  </Button>
+                </form>
+              )}
+            </ReduxForm>
+          </Margin>
+        </Padding>
+      </ViewContainer>
+    );
+  }
+}
+
+export default compose(
+  graphql(CreateTemplateMutation, { name: 'createTemplate' }),
+  graphql(GetTemplate, {
+    options: ({ match }) => ({
+      ssr: true,
+      variables: {
+        id: get(match, 'params.template')
+      }
+    }),
+    props: ({ data: { loading, error, template } }) => ({
+      loading,
+      error,
+      template
+    })
+  }),
+  connect((state, ownProps) => {
+    const { template, loading, error: loadingError } = ownProps;
+
+    const { form, values = {} } = state;
+
+    const steps = { name: values[names.name] };
+    const error = get(form, `${TD_F}.error`, null);
+
+    // Maybe re-use saved to only write the rule once
+    const disabled = !(
+      !error &&
+      !loading &&
+      template &&
+      steps.name &&
+      steps.name.name
+    );
+
+    return {
+      disabled,
+      forms: Object.keys(form), // improve this
+      error: Boolean(loadingError) || error,
+      steps
+    };
+  }),
+  connect(null, (dispatch, ownProps) => {
+    const { steps = {}, forms, history, template, createTemplate } = ownProps;
+
+    return {
+      handleDefocus: name => value => {
+        return dispatch(set({ name: names[name], value }));
+      },
+      handleSubmit: async () => {
+        const [err, res] = await intercept(
+          createTemplate({
+            variables: {
+              ...template,
+              name: steps.name.name,
+              metadata: template.metadata.map(({ name, value }) => ({
+                name,
+                value
+              })),
+              tags: template.tags.map(({ name, value }) => ({ name, value }))
+            }
+          })
+        );
+
+        if (err) {
+          throw new SubmissionError({
+            _error: parseError(err)
+          });
+        }
+
+        dispatch([destroyAll(), forms.map(name => destroy(name))]);
+        history.push(
+          `/templates/~duplicate/${res.data.createTemplate.id}/success`
+        );
+      }
+    };
+  })
+)(CreateTemplate);
diff --git a/consoles/my-joy-templates/src/containers/list.js b/consoles/my-joy-templates/src/containers/list.js
new file mode 100644
index 00000000..0a3dee8b
--- /dev/null
+++ b/consoles/my-joy-templates/src/containers/list.js
@@ -0,0 +1,210 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { set } from 'react-redux-values';
+import { compose, graphql } from 'react-apollo';
+import { change } from 'redux-form';
+import ReduxForm from 'declarative-redux-form';
+import { Margin } from 'styled-components-spacing';
+import intercept from 'apr-intercept';
+import get from 'lodash.get';
+import isString from 'lodash.isstring';
+import Fuse from 'fuse.js';
+
+import {
+  ViewContainer,
+  StatusLoader,
+  Message,
+  MessageTitle,
+  MessageDescription
+} from 'joyent-ui-toolkit';
+
+import TemplatesList, {
+  Item as TemplatesItem,
+  Empty as TemplatesEmpty,
+  LoadingRow,
+  BulkFooter
+} from '@components/list';
+
+import { Toolbar } from '@components/toolbar';
+import ListTemplates from '@graphql/list-templates.gql';
+import RemoveTemplate from '@graphql/remove-template.gql';
+import { Forms, Values } from '@root/constants';
+import parseError from '@state/parse-error';
+import Confirm from '@state/confirm';
+
+const { TL_F_F, TL_T_F } = Forms;
+const { TL_R_V, TL_E_V } = Values;
+
+const Templates = ({
+  filter,
+  checked = [],
+  templates = [],
+  error = false,
+  loading = false,
+  handleToggleCheckAll,
+  handleRemove
+}) => (
+  <ViewContainer main>
+    <Margin top="5">
+      <Margin bottom="3">
+        <ReduxForm form={TL_F_F}>
+          {() => (
+            <form>
+              <Toolbar
+                searchable={filter || templates.length}
+                searchLabel="Filter templates"
+                actionLabel="Create template"
+                actionTo="/templates/~create/name"
+                actionable={!(!loading && !templates.length && !filter)}
+              />
+            </form>
+          )}
+        </ReduxForm>
+      </Margin>
+      {error ? (
+        <Margin bottom="3">
+          <Message error>
+            <MessageTitle>Ooops!</MessageTitle>
+            <MessageDescription>
+              {isString(error)
+                ? error
+                : 'An error occurred while loading your templates'}
+            </MessageDescription>
+          </Message>
+        </Margin>
+      ) : null}
+      <ReduxForm form={TL_T_F}>
+        {props =>
+          loading ? (
+            <Margin top="5">
+              <StatusLoader />
+            </Margin>
+          ) : (
+            <TemplatesList
+              {...props}
+              checked={checked.length === templates.length}
+              onToggleCheckAll={() =>
+                handleToggleCheckAll(checked.length !== templates.length)
+              }
+            >
+              {templates.length ? (
+                templates.map(
+                  ({ id, removing, ...template }) =>
+                    removing ? (
+                      <LoadingRow key={id}>Removing...</LoadingRow>
+                    ) : (
+                      <TemplatesItem key={id} id={id} {...template} />
+                    )
+                )
+              ) : (
+                <TemplatesEmpty filter={Boolean(filter)} />
+              )}
+            </TemplatesList>
+          )
+        }
+      </ReduxForm>
+      {checked.length ? (
+        <BulkFooter items={checked} onRemove={handleRemove} />
+      ) : null}
+    </Margin>
+  </ViewContainer>
+);
+
+export default compose(
+  graphql(RemoveTemplate, { name: 'removeTemplate' }),
+  graphql(ListTemplates, {
+    options: ({ location }) => ({
+      ssr: true,
+      pollInterval: 1000
+    }),
+    props: ({ data: { error, templates = [], networkStatus } }) => ({
+      error,
+      loading: networkStatus === 1,
+      templates,
+      index: new Fuse(templates, {
+        keys: ['id', 'name', 'created']
+      })
+    })
+  }),
+  connect(
+    (state, ownProps) => {
+      const { form, values: flags } = state;
+      const { templates: items, index, error: loadingError } = ownProps;
+      const filter = get(form, `${TL_F_F}.values.filter`, '');
+      const mutationError = get(flags, TL_E_V, null);
+
+      const templates = (filter.length ? index.search(filter) : items).map(
+        ({ id, ...template }) => ({
+          ...template,
+          removing: get(flags, TL_R_V(id), false),
+          id
+        })
+      );
+
+      const values = get(form, `${TL_T_F}.values`, {});
+      const checked = templates.filter(({ id }) => values[id]);
+
+      return {
+        filter,
+        error: Boolean(loadingError) || mutationError,
+        templates,
+        checked
+      };
+    },
+    (dispatch, { templates = [], removeTemplate }) => {
+      return {
+        handleToggleCheckAll: newChecked => {
+          return dispatch(
+            templates.map(({ id }) => change(TL_T_F, id, newChecked))
+          );
+        },
+        handleRemove: async (ev, checked = []) => {
+          // eslint-disable-next-line no-alert
+          if (
+            !(await Confirm(
+              `Do you want to remove ${
+                checked.length === 1
+                  ? `"${checked[0].name}"`
+                  : `${checked.length} templates`
+              }`
+            ))
+          ) {
+            return;
+          }
+
+          dispatch(
+            checked.map(({ id }) =>
+              set({
+                name: TL_R_V(id),
+                value: true
+              })
+            )
+          );
+
+          const [err] = await intercept(
+            Promise.all(
+              checked.map(({ id }) =>
+                removeTemplate({
+                  variables: { id }
+                })
+              )
+            )
+          );
+
+          dispatch([
+            set({
+              name: TL_E_V,
+              value: parseError(err)
+            }),
+            ...checked.map(({ id }) =>
+              set({
+                name: TL_R_V(id),
+                value: false
+              })
+            )
+          ]);
+        }
+      };
+    }
+  )
+)(Templates);
diff --git a/consoles/my-joy-templates/src/containers/summary.js b/consoles/my-joy-templates/src/containers/summary.js
new file mode 100644
index 00000000..a4c92a56
--- /dev/null
+++ b/consoles/my-joy-templates/src/containers/summary.js
@@ -0,0 +1,157 @@
+import React, { Fragment } from 'react';
+import { set, destroyAll } from 'react-redux-values';
+import { compose, graphql } from 'react-apollo';
+import { connect } from 'react-redux';
+import { Margin } from 'styled-components-spacing';
+import intercept from 'apr-intercept';
+import get from 'lodash.get';
+import isString from 'lodash.isstring';
+import find from 'lodash.find';
+
+import {
+  ViewContainer,
+  StatusLoader,
+  Message,
+  MessageTitle,
+  MessageDescription
+} from 'joyent-ui-toolkit';
+
+import { Meta, Template } from '@components/summary';
+import GetTemplate from '@graphql/get-template.gql';
+import RemoveTemplate from '@graphql/remove-template.gql';
+import Confirm from '@state/confirm';
+import parseError from '@state/parse-error';
+import { Values } from '@root/constants';
+
+const { TS_R_V, TS_E_V } = Values;
+
+const Summary = ({
+  loading = false,
+  error = null,
+  template = null,
+  removing = false,
+  handleDuplicate,
+  handleRemove
+}) => (
+  <ViewContainer main>
+    <Margin top="5">
+      {error ? (
+        <Margin bottom="3">
+          <Message error>
+            <MessageTitle>Ooops!</MessageTitle>
+            <MessageDescription>
+              {isString(error)
+                ? error
+                : 'An error occurred while loading your templates'}
+            </MessageDescription>
+          </Message>
+        </Margin>
+      ) : null}
+      {loading && !template ? (
+        <StatusLoader />
+      ) : (
+        <Fragment>
+          <Margin bottom="5">
+            <Meta
+              {...template}
+              removing={removing}
+              onDuplicate={handleDuplicate}
+              onRemove={handleRemove}
+            />
+          </Margin>
+          <Template {...template} />
+        </Fragment>
+      )}
+    </Margin>
+  </ViewContainer>
+);
+
+export default compose(
+  graphql(RemoveTemplate, { name: 'removeTemplate' }),
+  graphql(GetTemplate, {
+    options: ({ match }) => ({
+      ssr: true,
+      variables: {
+        id: get(match, 'params.template')
+      }
+    }),
+    props: ({ data: { loading, error, template } }) => ({
+      loading,
+      error,
+      template: template
+        ? {
+            ...template,
+            metadata: get(template, 'metadata', []).filter(
+              ({ name }) =>
+                name !== 'user-script' && name.indexOf('triton.') < 0
+            ),
+            tags: get(template, 'tags', []).filter(
+              ({ name }) => name.indexOf('triton.') < 0
+            ),
+            cnsEnabled: !JSON.parse(
+              get(
+                find(get(template, 'tags', []), ['name', 'triton.cns.disable']),
+                'value',
+                'false'
+              )
+            ),
+            userScript: get(
+              find(get(template, 'metadata', []), ['name', 'user-script']),
+              'value',
+              ''
+            )
+          }
+        : null
+    })
+  }),
+  connect(
+    ({ values }, { template = {}, error: loadingError }) => {
+      const mutationError = get(values, TS_E_V(get(template, 'id')), null);
+      const removing = get(values, TS_R_V(get(template, 'id')), false);
+
+      return {
+        error: Boolean(loadingError) || mutationError,
+        removing
+      };
+    },
+    (dispatch, { history, template = {}, removeTemplate }) => ({
+      handleRemove: async () => {
+        const { id } = template;
+
+        // eslint-disable-next-line no-alert
+        if (!(await Confirm(`Do you want to remove ${template.name}`))) {
+          return;
+        }
+
+        dispatch(
+          set({
+            name: TS_R_V(id),
+            value: true
+          })
+        );
+
+        const [err] = await intercept(
+          removeTemplate({
+            variables: { id }
+          })
+        );
+
+        if (err) {
+          return dispatch([
+            set({
+              name: TS_E_V(id),
+              value: parseError(err)
+            }),
+            set({
+              name: TS_R_V(id),
+              value: false
+            })
+          ]);
+        }
+
+        dispatch(destroyAll());
+        history.push('/templates/');
+      }
+    })
+  )
+)(Summary);
diff --git a/consoles/my-joy-templates/src/graphql/create-template.gql b/consoles/my-joy-templates/src/graphql/create-template.gql
new file mode 100644
index 00000000..cd9ff39e
--- /dev/null
+++ b/consoles/my-joy-templates/src/graphql/create-template.gql
@@ -0,0 +1,21 @@
+mutation createTemplate(
+  $name: String!
+  $package: String!
+  $image: ID!
+  $networks: [String]
+  $metadata: [KeyValueInput]
+  $tags: [KeyValueInput]
+  $firewall_enabled: Boolean
+) {
+  createTemplate(
+    name: $name
+    package: $package
+    image: $image
+    networks: $networks
+    metadata: $metadata
+    tags: $tags
+    enableFirewall: $firewall_enabled
+  ) {
+    id
+  }
+}
diff --git a/consoles/my-joy-templates/src/graphql/get-template.gql b/consoles/my-joy-templates/src/graphql/get-template.gql
new file mode 100644
index 00000000..e4220226
--- /dev/null
+++ b/consoles/my-joy-templates/src/graphql/get-template.gql
@@ -0,0 +1,20 @@
+query template($id: ID!) {
+  template(id: $id) {
+    id
+    name
+    package
+    image
+    enableFirewall
+    networks
+    userdata
+    metadata {
+      name
+      value
+    }
+    tags {
+      name
+      value
+    }
+    created
+  }
+}
diff --git a/consoles/my-joy-templates/src/graphql/list-templates.gql b/consoles/my-joy-templates/src/graphql/list-templates.gql
new file mode 100644
index 00000000..fd89b76a
--- /dev/null
+++ b/consoles/my-joy-templates/src/graphql/list-templates.gql
@@ -0,0 +1,9 @@
+query templates {
+  templates {
+    id
+    name
+    created
+    image
+    package
+  }
+}
diff --git a/consoles/my-joy-templates/src/graphql/remove-template.gql b/consoles/my-joy-templates/src/graphql/remove-template.gql
new file mode 100644
index 00000000..d8b827eb
--- /dev/null
+++ b/consoles/my-joy-templates/src/graphql/remove-template.gql
@@ -0,0 +1,5 @@
+mutation removeTemplate($id: ID!) {
+  deleteTemplate(id: $id) {
+    id
+  }
+}
diff --git a/consoles/my-joy-templates/src/html.js b/consoles/my-joy-templates/src/html.js
new file mode 100644
index 00000000..a6e2d580
--- /dev/null
+++ b/consoles/my-joy-templates/src/html.js
@@ -0,0 +1,28 @@
+const React = require('react');
+
+module.exports = ({
+  htmlAttrs = {},
+  bodyAttrs = {},
+  head = [],
+  children = null
+}) => (
+  <html {...htmlAttrs}>
+    <head>
+      <meta charSet="utf-8" />
+      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+      />
+      <meta name="theme-color" content="#1E313B" />
+
+      {head}
+    </head>
+    <body {...bodyAttrs}>
+      <div id="header" />
+      {children ? null : <div id="root" />}
+      {children}
+      <script src="/navigation/static/main.js" />
+    </body>
+  </html>
+);
diff --git a/consoles/my-joy-templates/src/index.js b/consoles/my-joy-templates/src/index.js
new file mode 100644
index 00000000..34c08d5c
--- /dev/null
+++ b/consoles/my-joy-templates/src/index.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ThemeProvider } from 'styled-components';
+import { Provider as ReduxProvider } from 'react-redux';
+import { ApolloProvider } from 'react-apollo';
+import { BrowserRouter } from 'react-router-dom';
+import isFunction from 'lodash.isfunction';
+import isFinite from 'lodash.isfinite';
+
+import { theme } from 'joyent-ui-toolkit';
+
+import createStore from '@state/redux-store';
+import createClient from '@state/apollo-client';
+import App from './app';
+
+if (!isFunction(Number.isFinite)) {
+  Number.isFinite = isFinite;
+}
+
+ReactDOM.hydrate(
+  <ApolloProvider client={createClient()}>
+    <ThemeProvider theme={theme}>
+      <ReduxProvider store={createStore()}>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </ReduxProvider>
+    </ThemeProvider>
+  </ApolloProvider>,
+  document.getElementById('root')
+);
diff --git a/consoles/my-joy-templates/src/mocks/__aliases__.js b/consoles/my-joy-templates/src/mocks/__aliases__.js
new file mode 100644
index 00000000..08d17721
--- /dev/null
+++ b/consoles/my-joy-templates/src/mocks/__aliases__.js
@@ -0,0 +1,6 @@
+module.exports = {
+  '^redux-form$': '<rootDir>/src/mocks/redux-form',
+  '^react-responsive$': '<rootDir>/src/mocks/react-responsive',
+  '^react-router-dom$': '<rootDir>/src/mocks/react-router-dom',
+  '^declarative-redux-form$': '<rootDir>/src/mocks/declarative-redux-form'
+};
diff --git a/consoles/my-joy-templates/src/mocks/declarative-redux-form.js b/consoles/my-joy-templates/src/mocks/declarative-redux-form.js
new file mode 100644
index 00000000..be991de1
--- /dev/null
+++ b/consoles/my-joy-templates/src/mocks/declarative-redux-form.js
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default ({ children, ...props }) => React.createElement(children, props);
diff --git a/consoles/my-joy-templates/src/mocks/react-responsive.js b/consoles/my-joy-templates/src/mocks/react-responsive.js
new file mode 100644
index 00000000..27948083
--- /dev/null
+++ b/consoles/my-joy-templates/src/mocks/react-responsive.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default ({ query, children }) => (
+  <span name="react-responsive-mock" query={query}>
+    {children}
+  </span>
+);
diff --git a/consoles/my-joy-templates/src/mocks/react-router-dom.js b/consoles/my-joy-templates/src/mocks/react-router-dom.js
new file mode 100644
index 00000000..88529e49
--- /dev/null
+++ b/consoles/my-joy-templates/src/mocks/react-router-dom.js
@@ -0,0 +1,4 @@
+import React from 'react';
+
+export const Field = ({ children, ...rest }) =>
+  React.createElement('a', rest, children);
diff --git a/consoles/my-joy-templates/src/mocks/redux-form.js b/consoles/my-joy-templates/src/mocks/redux-form.js
new file mode 100644
index 00000000..df7d1a7a
--- /dev/null
+++ b/consoles/my-joy-templates/src/mocks/redux-form.js
@@ -0,0 +1,4 @@
+import React from 'react';
+
+export const Field = ({ component = 'input', children, ...rest }) =>
+  React.createElement(component, rest, children);
diff --git a/consoles/my-joy-templates/src/mocks/theme.js b/consoles/my-joy-templates/src/mocks/theme.js
new file mode 100644
index 00000000..b7c43ca5
--- /dev/null
+++ b/consoles/my-joy-templates/src/mocks/theme.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+import {
+  theme,
+  RootContainer,
+  PageContainer,
+  ViewContainer
+} from 'joyent-ui-toolkit';
+
+export default ({ children, ss }) => (
+  <ThemeProvider theme={theme}>
+    {ss ? (
+      <RootContainer>
+        <PageContainer>
+          <ViewContainer>{children}</ViewContainer>
+        </PageContainer>
+      </RootContainer>
+    ) : (
+      children
+    )}
+  </ThemeProvider>
+);
diff --git a/consoles/my-joy-templates/src/routes.js b/consoles/my-joy-templates/src/routes.js
new file mode 100644
index 00000000..1b408d93
--- /dev/null
+++ b/consoles/my-joy-templates/src/routes.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+
+import {
+  PageContainer,
+  ViewContainer,
+  Message,
+  MessageDescription,
+  MessageTitle,
+  Footer
+} from 'joyent-ui-toolkit';
+
+import Breadcrumb from '@containers/breadcrumb';
+import { Route as ServerError } from '@root/server-error';
+
+import Create, { Success as CreateSuccess } from '@containers/create';
+import Duplicate from '@containers/duplicate';
+import List from '@containers/list';
+import Summary from '@containers/summary';
+
+export default () => (
+  <PageContainer>
+    {/* Breadcrumb */}
+    <Switch>
+      <Route
+        path="/templates/~create/:sg/success"
+        component={Breadcrumb}
+        exact
+      />
+      <Route path="/templates/~create/:section?" component={Breadcrumb} exact />
+      <Route
+        path="/templates/~duplicate/success/:sg"
+        component={Breadcrumb}
+        exact
+      />
+      <Route
+        path="/templates/~duplicate/:sg/:section?"
+        component={Breadcrumb}
+        exact
+      />
+      <Route path="/templates/:sg?/:section?" component={Breadcrumb} />
+    </Switch>
+
+    <Switch>
+      <Route path="/templates" component={List} exact />
+      <Route
+        path="/templates/~create/:template/success"
+        component={CreateSuccess}
+        exact
+      />
+      <Route path="/templates/~create/:step?" component={Create} exact />
+      <Route
+        path="/templates/~duplicate/:template/success"
+        component={CreateSuccess}
+        exact
+      />
+      <Route
+        path="/templates/~duplicate/:template/:step?"
+        component={Duplicate}
+        exact
+      />
+      <Route path="/templates/:template/:section?" component={Summary} exact />
+    </Switch>
+
+    <Route path="/~server-error" component={ServerError} exact />
+
+    <Route path="/" component={() => <Redirect to="/templates" />} exact />
+
+    <noscript>
+      <ViewContainer main>
+        <Message warning>
+          <MessageTitle>Ooops!</MessageTitle>
+          <MessageDescription>
+            You need to enable JavaScript to run this app.
+          </MessageDescription>
+        </Message>
+      </ViewContainer>
+    </noscript>
+    <Footer />
+  </PageContainer>
+);
diff --git a/consoles/my-joy-templates/src/server-error.js b/consoles/my-joy-templates/src/server-error.js
new file mode 100644
index 00000000..e912b4ad
--- /dev/null
+++ b/consoles/my-joy-templates/src/server-error.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Margin } from 'styled-components-spacing';
+
+import {
+  RootContainer,
+  PageContainer,
+  ViewContainer,
+  Message,
+  MessageDescription,
+  MessageTitle
+} from 'joyent-ui-toolkit';
+
+import Breadcrumb from '@containers/breadcrumb';
+
+export const Route = () => (
+  <ViewContainer main>
+    <Margin bottom="4">
+      <Message error>
+        <MessageTitle>Ooops!</MessageTitle>
+        <MessageDescription>
+          An error occurred while loading your page
+        </MessageDescription>
+      </Message>
+    </Margin>
+  </ViewContainer>
+);
+
+export default () => (
+  <RootContainer>
+    <PageContainer>
+      <Breadcrumb />
+      <Route />
+    </PageContainer>
+  </RootContainer>
+);
diff --git a/consoles/my-joy-templates/src/state/apollo-client.js b/consoles/my-joy-templates/src/state/apollo-client.js
new file mode 100644
index 00000000..3b8d76b7
--- /dev/null
+++ b/consoles/my-joy-templates/src/state/apollo-client.js
@@ -0,0 +1,39 @@
+import { ApolloClient } from 'apollo-client';
+import { HttpLink } from 'apollo-link-http';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import fetch from 'cross-fetch';
+
+import global from './global';
+
+const {
+  REACT_APP_GQL_PORT = global.port,
+  REACT_APP_GQL_PROTOCOL = global.protocol,
+  REACT_APP_GQL_HOSTNAME = global.hostname
+} = process.env;
+
+const PORT = REACT_APP_GQL_PORT ? `:${REACT_APP_GQL_PORT}` : '';
+const URI = `${REACT_APP_GQL_PROTOCOL}://${REACT_APP_GQL_HOSTNAME}${PORT}/templates/graphql`;
+
+export default (opts = {}) => {
+  let cache = new InMemoryCache();
+
+  if (global.__APOLLO_STATE__) {
+    cache = cache.restore(global.__APOLLO_STATE__);
+  }
+
+  return new ApolloClient({
+    cache,
+    link: new HttpLink({
+      uri: URI,
+      credentials: 'same-origin',
+      fetch,
+      headers: {
+        'X-CSRF-Token': global.cookie.replace(
+          /(?:(?:^|.*;\s*)crumb\s*=\s*([^;]*).*$)|^.*$/,
+          '$1'
+        )
+      }
+    }),
+    ...opts
+  });
+};
diff --git a/consoles/my-joy-templates/src/state/confirm.js b/consoles/my-joy-templates/src/state/confirm.js
new file mode 100644
index 00000000..fd585ce2
--- /dev/null
+++ b/consoles/my-joy-templates/src/state/confirm.js
@@ -0,0 +1,5 @@
+export default msg =>
+  new Promise(resolve => {
+    // eslint-disable-next-line no-alert
+    resolve(window.confirm(msg));
+  });
diff --git a/consoles/my-joy-templates/src/state/global.js b/consoles/my-joy-templates/src/state/global.js
new file mode 100644
index 00000000..e9ca19a2
--- /dev/null
+++ b/consoles/my-joy-templates/src/state/global.js
@@ -0,0 +1,26 @@
+import { canUseDOM } from 'exenv';
+import queryString from 'query-string';
+
+export const Global = () => {
+  if (!canUseDOM) {
+    return {
+      cookie: ''
+    };
+  }
+
+  return {
+    port: window.location.port,
+    protocol: window.location.protocol.replace(/:$/, ''),
+    hostname: window.location.hostname,
+    pathname: window.location.pathname,
+    origin: window.location.origin,
+    cookie: document.cookie || '',
+    search: window.location.search,
+    query: queryString.parse(window.location.search || ''),
+    __REDUX_DEVTOOLS_EXTENSION__: window.__REDUX_DEVTOOLS_EXTENSION__,
+    __APOLLO_STATE__: window.__APOLLO_STATE__,
+    __REDUX_STATE__: window.__REDUX_STATE__
+  };
+};
+
+export default Global();
diff --git a/consoles/my-joy-templates/src/state/parse-error.js b/consoles/my-joy-templates/src/state/parse-error.js
new file mode 100644
index 00000000..a42ee0d6
--- /dev/null
+++ b/consoles/my-joy-templates/src/state/parse-error.js
@@ -0,0 +1,4 @@
+export default ({ graphQLErrors = [], message = '' }) =>
+  graphQLErrors.length
+    ? graphQLErrors.map(({ message }) => message).join('\n')
+    : message;
diff --git a/consoles/my-joy-templates/src/state/redux-store.js b/consoles/my-joy-templates/src/state/redux-store.js
new file mode 100644
index 00000000..8e8138f4
--- /dev/null
+++ b/consoles/my-joy-templates/src/state/redux-store.js
@@ -0,0 +1,24 @@
+import { reduxBatch } from '@manaflair/redux-batch';
+import { createStore, combineReducers, compose } from 'redux';
+import { reducer as formReducer } from 'redux-form';
+import { reducer as valuesReducer } from 'react-redux-values';
+import global from './global';
+
+export default () => {
+  return createStore(
+    combineReducers({
+      values: valuesReducer,
+      form: formReducer,
+      ui: (state = {}) => state
+    }),
+    global.__REDUX_STATE__ || {},
+    compose(
+      reduxBatch,
+      // If you are using the devToolsExtension, you can add it here also
+      // eslint-disable-next-line no-negated-condition
+      typeof global.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined'
+        ? global.__REDUX_DEVTOOLS_EXTENSION__()
+        : f => f
+    )
+  );
+};
diff --git a/consoles/my-joy-templates/src/state/theme.js b/consoles/my-joy-templates/src/state/theme.js
new file mode 100644
index 00000000..cbec0c78
--- /dev/null
+++ b/consoles/my-joy-templates/src/state/theme.js
@@ -0,0 +1,21 @@
+import { theme } from 'joyent-ui-toolkit';
+
+const font = theme.font.href({
+  namespace: 'templates'
+});
+
+const monoFont = theme.monoFont.href({
+  namespace: 'templates'
+});
+
+export default {
+  ...theme,
+  font: {
+    ...theme.font,
+    href: () => font
+  },
+  monoFont: {
+    ...theme.monoFont,
+    href: () => monoFont
+  }
+};
diff --git a/package.json b/package.json
index 780430e7..e140e280 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,8 @@
     "ssr": "npm run build:bundle; lerna run dev --scope joyent-portal-bundle --stream",
     "test": "redrun -s build:test test:run",
     "test:ci": "CI=1 redrun -s build:test test:ci:run",
-    "lint": "lerna run lint --stream",
-    "lint:ci": "lerna run lint:ci --stream",
+    "lint": "redrun lint:ci -- --fix",
+    "lint:ci": "NODE_ENV=test eslint . --ext .js --ext .md",
     "build:bundle": "redrun -s build:bundle:lib build:bundle:app",
     "build:bundle:lib": "lerna run build:lib --parallel --stream",
     "build:bundle:app": "lerna run build:bundle --parallel --stream",
diff --git a/packages/icons/.eslintrc b/packages/icons/.eslintrc
deleted file mode 100644
index 54492a1a..00000000
--- a/packages/icons/.eslintrc
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "extends": "joyent-portal",
-  "rules": {
-    "no-console": 1,
-    "new-cap": 0,
-    "jsx-a11y/href-no-hash": 0
-  }
-}
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 48d59172..2523cdc8 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -14,8 +14,6 @@
     "build:lib": "NODE_ENV=production redrun -p build:es build:umd",
     "build:bundle": "echo 0",
     "prepublish": "NODE_ENV=production redrun build:lib",
-    "lint": "redrun lint:ci -- --fix",
-    "lint:ci": "NODE_ENV=test eslint . --ext .js --ext .md",
     "test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
     "test:ci": "redrun test",
     "build:es": "babel src --out-dir dist/es",
diff --git a/packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap b/packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap
index 25cadf66..e8c23851 100644
--- a/packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap
+++ b/packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap
@@ -720,12 +720,15 @@ Array [
         fill="#464646"
     />
     <polygon
+        fill="#464646"
         points="4.74 11.44 4.11 12.07 4.11 9 3.11 9 3.11 12.1 2.45 11.44 1.74 12.15 3.6 14 5.45 12.15 4.74 11.44"
     />
     <polygon
+        fill="#464646"
         points="10.26 11.44 9.63 12.07 9.63 9 8.63 9 8.63 12.1 7.96 11.44 7.26 12.15 9.11 14 10.96 12.15 10.26 11.44"
     />
     <polygon
+        fill="#464646"
         points="15.74 11.44 15.11 12.07 15.11 9 14.11 9 14.11 12.1 13.45 11.44 12.74 12.14 14.6 14 16.45 12.14 15.74 11.44"
     />
 </svg>,
@@ -745,12 +748,15 @@ Array [
         fill="#FFF"
     />
     <polygon
+        fill="#FFF"
         points="4.74 11.44 4.11 12.07 4.11 9 3.11 9 3.11 12.1 2.45 11.44 1.74 12.15 3.6 14 5.45 12.15 4.74 11.44"
     />
     <polygon
+        fill="#FFF"
         points="10.26 11.44 9.63 12.07 9.63 9 8.63 9 8.63 12.1 7.96 11.44 7.26 12.15 9.11 14 10.96 12.15 10.26 11.44"
     />
     <polygon
+        fill="#FFF"
         points="15.74 11.44 15.11 12.07 15.11 9 14.11 9 14.11 12.1 13.45 11.44 12.74 12.14 14.6 14 16.45 12.14 15.74 11.44"
     />
 </svg>,
@@ -770,12 +776,15 @@ Array [
         fill={undefined}
     />
     <polygon
+        fill={undefined}
         points="4.74 11.44 4.11 12.07 4.11 9 3.11 9 3.11 12.1 2.45 11.44 1.74 12.15 3.6 14 5.45 12.15 4.74 11.44"
     />
     <polygon
+        fill={undefined}
         points="10.26 11.44 9.63 12.07 9.63 9 8.63 9 8.63 12.1 7.96 11.44 7.26 12.15 9.11 14 10.96 12.15 10.26 11.44"
     />
     <polygon
+        fill={undefined}
         points="15.74 11.44 15.11 12.07 15.11 9 14.11 9 14.11 12.1 13.45 11.44 12.74 12.14 14.6 14 16.45 12.14 15.74 11.44"
     />
 </svg>,
@@ -795,12 +804,15 @@ Array [
         fill="#464646"
     />
     <polygon
+        fill="#464646"
         points="4.74 11.44 4.11 12.07 4.11 9 3.11 9 3.11 12.1 2.45 11.44 1.74 12.15 3.6 14 5.45 12.15 4.74 11.44"
     />
     <polygon
+        fill="#464646"
         points="10.26 11.44 9.63 12.07 9.63 9 8.63 9 8.63 12.1 7.96 11.44 7.26 12.15 9.11 14 10.96 12.15 10.26 11.44"
     />
     <polygon
+        fill="#464646"
         points="15.74 11.44 15.11 12.07 15.11 9 14.11 9 14.11 12.1 13.45 11.44 12.74 12.14 14.6 14 16.45 12.14 15.74 11.44"
     />
 </svg>,
@@ -820,12 +832,15 @@ Array [
         fill="#464646"
     />
     <polygon
+        fill="#464646"
         points="4.74 11.44 4.11 12.07 4.11 9 3.11 9 3.11 12.1 2.45 11.44 1.74 12.15 3.6 14 5.45 12.15 4.74 11.44"
     />
     <polygon
+        fill="#464646"
         points="10.26 11.44 9.63 12.07 9.63 9 8.63 9 8.63 12.1 7.96 11.44 7.26 12.15 9.11 14 10.96 12.15 10.26 11.44"
     />
     <polygon
+        fill="#464646"
         points="15.74 11.44 15.11 12.07 15.11 9 14.11 9 14.11 12.1 13.45 11.44 12.74 12.14 14.6 14 16.45 12.14 15.74 11.44"
     />
 </svg>,
@@ -845,12 +860,15 @@ Array [
         fill="#464646"
     />
     <polygon
+        fill="#464646"
         points="4.74 11.44 4.11 12.07 4.11 9 3.11 9 3.11 12.1 2.45 11.44 1.74 12.15 3.6 14 5.45 12.15 4.74 11.44"
     />
     <polygon
+        fill="#464646"
         points="10.26 11.44 9.63 12.07 9.63 9 8.63 9 8.63 12.1 7.96 11.44 7.26 12.15 9.11 14 10.96 12.15 10.26 11.44"
     />
     <polygon
+        fill="#464646"
         points="15.74 11.44 15.11 12.07 15.11 9 14.11 9 14.11 12.1 13.45 11.44 12.74 12.14 14.6 14 16.45 12.14 15.74 11.44"
     />
 </svg>,
@@ -870,12 +888,15 @@ Array [
         fill="#464646"
     />
     <polygon
+        fill="#464646"
         points="4.74 11.44 4.11 12.07 4.11 9 3.11 9 3.11 12.1 2.45 11.44 1.74 12.15 3.6 14 5.45 12.15 4.74 11.44"
     />
     <polygon
+        fill="#464646"
         points="10.26 11.44 9.63 12.07 9.63 9 8.63 9 8.63 12.1 7.96 11.44 7.26 12.15 9.11 14 10.96 12.15 10.26 11.44"
     />
     <polygon
+        fill="#464646"
         points="15.74 11.44 15.11 12.07 15.11 9 14.11 9 14.11 12.1 13.45 11.44 12.74 12.14 14.6 14 16.45 12.14 15.74 11.44"
     />
 </svg>,
@@ -3535,6 +3556,7 @@ Array [
         fill="#464646"
     />
     <polygon
+        fill="#464646"
         points="7.52 11 6.52 11 9.52 0 10.52 0 7.52 11"
     />
 </svg>,
@@ -3558,6 +3580,7 @@ Array [
         fill="#FFF"
     />
     <polygon
+        fill="#FFF"
         points="7.52 11 6.52 11 9.52 0 10.52 0 7.52 11"
     />
 </svg>,
@@ -3581,6 +3604,7 @@ Array [
         fill={undefined}
     />
     <polygon
+        fill={undefined}
         points="7.52 11 6.52 11 9.52 0 10.52 0 7.52 11"
     />
 </svg>,
@@ -3604,6 +3628,7 @@ Array [
         fill="#464646"
     />
     <polygon
+        fill="#464646"
         points="7.52 11 6.52 11 9.52 0 10.52 0 7.52 11"
     />
 </svg>,
@@ -3627,6 +3652,7 @@ Array [
         fill="#464646"
     />
     <polygon
+        fill="#464646"
         points="7.52 11 6.52 11 9.52 0 10.52 0 7.52 11"
     />
 </svg>,
@@ -3650,6 +3676,7 @@ Array [
         fill="#464646"
     />
     <polygon
+        fill="#464646"
         points="7.52 11 6.52 11 9.52 0 10.52 0 7.52 11"
     />
 </svg>,
@@ -3673,6 +3700,7 @@ Array [
         fill="#464646"
     />
     <polygon
+        fill="#464646"
         points="7.52 11 6.52 11 9.52 0 10.52 0 7.52 11"
     />
 </svg>,
diff --git a/packages/icons/src/cns.js b/packages/icons/src/cns.js
index 9bbcc628..26347ecd 100644
--- a/packages/icons/src/cns.js
+++ b/packages/icons/src/cns.js
@@ -26,9 +26,18 @@ export default ({
           fill={calcFill({ fill, disabled, light, colors })}
           d="M16,2V5H2V2H16m1-2H1A1,1,0,0,0,0,1V6A1,1,0,0,0,1,7H17a1,1,0,0,0,1-1V1a1,1,0,0,0-1-1Z"
         />
-        <polygon points="4.74 11.44 4.11 12.07 4.11 9 3.11 9 3.11 12.1 2.45 11.44 1.74 12.15 3.6 14 5.45 12.15 4.74 11.44" />
-        <polygon points="10.26 11.44 9.63 12.07 9.63 9 8.63 9 8.63 12.1 7.96 11.44 7.26 12.15 9.11 14 10.96 12.15 10.26 11.44" />
-        <polygon points="15.74 11.44 15.11 12.07 15.11 9 14.11 9 14.11 12.1 13.45 11.44 12.74 12.14 14.6 14 16.45 12.14 15.74 11.44" />
+        <polygon
+          fill={calcFill({ fill, disabled, light, colors })}
+          points="4.74 11.44 4.11 12.07 4.11 9 3.11 9 3.11 12.1 2.45 11.44 1.74 12.15 3.6 14 5.45 12.15 4.74 11.44"
+        />
+        <polygon
+          fill={calcFill({ fill, disabled, light, colors })}
+          points="10.26 11.44 9.63 12.07 9.63 9 8.63 9 8.63 12.1 7.96 11.44 7.26 12.15 9.11 14 10.96 12.15 10.26 11.44"
+        />
+        <polygon
+          fill={calcFill({ fill, disabled, light, colors })}
+          points="15.74 11.44 15.11 12.07 15.11 9 14.11 9 14.11 12.1 13.45 11.44 12.74 12.14 14.6 14 16.45 12.14 15.74 11.44"
+        />
       </svg>
     )}
   </Rotate>
diff --git a/packages/icons/src/metadata.js b/packages/icons/src/metadata.js
index 2e33ba60..330a2819 100644
--- a/packages/icons/src/metadata.js
+++ b/packages/icons/src/metadata.js
@@ -30,7 +30,10 @@ export default ({
           fill={calcFill({ fill, disabled, light, colors })}
           d="M11.63,9l5.16-3.07a.5.5,0,0,0,0-.86L11.63,2V3.45a.52.52,0,0,0,.25.44L14.65,5.5,11.87,7.19a.5.5,0,0,0-.24.43Z"
         />
-        <polygon points="7.52 11 6.52 11 9.52 0 10.52 0 7.52 11" />
+        <polygon
+          fill={calcFill({ fill, disabled, light, colors })}
+          points="7.52 11 6.52 11 9.52 0 10.52 0 7.52 11"
+        />
       </svg>
     )}
   </Rotate>
diff --git a/packages/instance-steps/package.json b/packages/instance-steps/package.json
index e30355be..2b4f1c82 100644
--- a/packages/instance-steps/package.json
+++ b/packages/instance-steps/package.json
@@ -24,11 +24,14 @@
   "dependencies": {
     "apr-intercept": "^3.0.3",
     "apr-reduce": "^3.0.3",
+    "constant-case": "^2.0.0",
     "declarative-redux-form": "^2.0.8",
     "joyent-ui-resource-step": "^1.0.0",
     "joyent-ui-resource-widgets": "^1.0.0",
     "joyent-ui-toolkit": "^6.0.0",
     "lodash": "^4.17.5",
+    "lodash.omit": "^4.5.0",
+    "lodash.uniqby": "^4.7.0",
     "yup": "^0.24.1"
   },
   "devDependencies": {
diff --git a/packages/instance-steps/src/affinity/components.js b/packages/instance-steps/src/affinity/components.js
index 75aec815..714d1683 100644
--- a/packages/instance-steps/src/affinity/components.js
+++ b/packages/instance-steps/src/affinity/components.js
@@ -33,18 +33,18 @@ const Input = styled(BaseInput)`
 `;
 
 const Values = touched => (
-  <Margin right={1}>
+  <Margin right="1">
     <Select
-      id={'affinity-rule-3-select'}
+      id="affinity-rule-3-select"
       style={style}
       touched={touched}
       width={remcalc(130)}
       embedded
     >
-      <option id={'affinity-rule-3-equalling'} value="equalling">
+      <option id="affinity-rule-3-equalling" value="equalling">
         equalling
       </option>
-      <option id={'affinity-rule-3-starting'} value="starting">
+      <option id="affinity-rule-3-starting" value="starting">
         starting with
       </option>
     </Select>
@@ -52,24 +52,24 @@ const Values = touched => (
 );
 
 export const Rule = ({ valid, ...rule }) => (
-  <Margin bottom={valid ? 4 : 8}>
+  <Margin bottom={valid ? '4' : '8'}>
     <Flex alignCenter wrap>
       <H5 style={style} inline noMargin>
         The instance
       </H5>
-      <Margin horizontal={1}>
+      <Margin horizontal="1">
         <FormGroup name="conditional" field={Field}>
           <Select
             style={style}
             touched={rule.conditional}
             width={remcalc(86)}
             embedded
-            id={'affinity-rule-0-select'}
+            id="affinity-rule-0-select"
           >
-            <option id={'affinity-rule-0-should'} value="should">
+            <option id="affinity-rule-0-should" value="should">
               should
             </option>
-            <option id={'affinity-rule-0-must'} value="must">
+            <option id="affinity-rule-0-must" value="must">
               must
             </option>
           </Select>
@@ -78,19 +78,19 @@ export const Rule = ({ valid, ...rule }) => (
       <H5 style={style} inline noMargin>
         be on
       </H5>
-      <Margin horizontal={1}>
+      <Margin horizontal="1">
         <FormGroup name="placement" field={Field}>
           <Select
             style={style}
             touched={rule.placement}
             width={remcalc(100)}
             embedded
-            id={'affinity-rule-1-select'}
+            id="affinity-rule-1-select"
           >
-            <option id={'affinity-rule-1-same'} value="same">
+            <option id="affinity-rule-1-same" value="same">
               the same
             </option>
-            <option id={'affinity-rule-1-different'} value="different">
+            <option id="affinity-rule-1-different" value="different">
               a different
             </option>
           </Select>
@@ -99,20 +99,20 @@ export const Rule = ({ valid, ...rule }) => (
       <H5 style={style} inline noMargin>
         node as the instance(s) identified by the
       </H5>
-      <Margin horizontal={1}>
+      <Margin horizontal="1">
         <FormGroup name="type" field={Field}>
           <Select
-            id={'affinity-rule-2-select'}
+            id="affinity-rule-2-select"
             style={style}
             touched={rule.type}
             width={remcalc(135)}
             embedded
             left
           >
-            <option id={'affinity-rule-2-name'} value="name">
+            <option id="affinity-rule-2-name" value="name">
               instance name
             </option>
-            <option id={'affinity-rule-2-tag'} value="tag">
+            <option id="affinity-rule-2-tag" value="tag">
               tag
             </option>
           </Select>
@@ -121,7 +121,7 @@ export const Rule = ({ valid, ...rule }) => (
       <FormGroup name="pattern" field={Field}>
         {Values(rule.pattern)}
       </FormGroup>
-      <FormGroup id={'affinity-rule-input'} name="value" field={Field}>
+      <FormGroup id="affinity-rule-input" name="value" field={Field}>
         <Input
           onBlur={null}
           style={style}
diff --git a/packages/instance-steps/src/affinity/index.js b/packages/instance-steps/src/affinity/index.js
index 1ecaa327..1fd921b4 100644
--- a/packages/instance-steps/src/affinity/index.js
+++ b/packages/instance-steps/src/affinity/index.js
@@ -16,14 +16,15 @@ import Step, {
   Outlet as StepOutlet
 } from 'joyent-ui-resource-step';
 
-import { AffinityIcon, Button, KeyValue } from 'joyent-ui-toolkit';
+import { AffinityIcon, Button } from 'joyent-ui-toolkit';
+import { KeyValue } from 'joyent-ui-resource-widgets';
 
 import { Rule, Header } from './components';
 import { addAffinityRule as validateRule } from '../validators';
 import { Forms, Values } from '../constants';
 
-const { IC_AFF_F_ADD, IC_AFF_F_EDIT } = Forms;
-const { IC_AFF_V_ADD_OPEN, IC_AFF_V_EDIT_OPEN, IC_AFF_V_AFF } = Values;
+const { IR_AFF_F_ADD, IR_AFF_F_EDIT } = Forms;
+const { IR_AFF_V_ADD_OPEN, IR_AFF_V_EDIT_OPEN, IR_AFF_V_AFF } = Values;
 
 const RULE_DEFAULTS = {
   conditional: 'should',
@@ -47,7 +48,7 @@ const Preview = ({
   disabled = false
 }) => (
   <ReduxForm
-    form={IC_AFF_F_EDIT}
+    form={IR_AFF_F_EDIT}
     initialValues={exitingRule}
     destroyOnUnmount={false}
     forceUnregisterOnUnmount={false}
@@ -57,7 +58,7 @@ const Preview = ({
   >
     {formProps =>
       exitingRule ? (
-        <Margin top={3}>
+        <Margin top="3">
           <KeyValue
             {...formProps}
             expanded={editOpen}
@@ -125,7 +126,7 @@ const Affinity = ({
             exitingRule={exitingRule}
           />
           <ReduxForm
-            form={IC_AFF_F_ADD}
+            form={IR_AFF_F_ADD}
             initialValues={RULE_DEFAULTS}
             destroyOnUnmount={false}
             forceUnregisterOnUnmount={false}
@@ -135,7 +136,7 @@ const Affinity = ({
           >
             {formProps =>
               addOpen ? (
-                <Margin top={3}>
+                <Margin top="3">
                   <KeyValue
                     {...formProps}
                     method="create"
@@ -158,7 +159,7 @@ const Affinity = ({
             }
           </ReduxForm>
           {!addOpen && !exitingRule ? (
-            <Margin top={5}>
+            <Margin top="5">
               <Button
                 type="button"
                 onClick={() => handleChangeAddOpen(true)}
@@ -169,9 +170,9 @@ const Affinity = ({
             </Margin>
           ) : null}
           {!addOpen && exitingRule ? (
-            <Margin top={5}>
+            <Margin top="5">
               <Button
-                id={'next-button-affinity'}
+                id="next-button-affinity"
                 type="button"
                 component={Link}
                 to={next}
@@ -188,12 +189,12 @@ const Affinity = ({
 
 export default compose(
   connect(({ values, form }, ownProps) => {
-    const editingRule = get(form, `${IC_AFF_F_EDIT}.values`, null);
-    const creatingRule = get(form, `${IC_AFF_F_ADD}.values`, null);
-    const exitingRule = get(values, IC_AFF_V_AFF, null);
+    const editingRule = get(form, `${IR_AFF_F_EDIT}.values`, null);
+    const creatingRule = get(form, `${IR_AFF_F_ADD}.values`, null);
+    const exitingRule = get(values, IR_AFF_V_AFF, null);
 
-    const addOpen = get(values, IC_AFF_V_ADD_OPEN, true);
-    const editOpen = get(values, IC_AFF_V_EDIT_OPEN, false);
+    const addOpen = get(values, IR_AFF_V_ADD_OPEN, true);
+    const editOpen = get(values, IR_AFF_V_EDIT_OPEN, false);
 
     return {
       addOpen,
@@ -216,34 +217,34 @@ export default compose(
 
     handleCreateAffinityRules: value => {
       return dispatch([
-        destroy(IC_AFF_F_ADD),
-        set({ name: IC_AFF_V_ADD_OPEN, value: false }),
-        set({ name: IC_AFF_V_AFF, value })
+        destroy(IR_AFF_F_ADD),
+        set({ name: IR_AFF_V_ADD_OPEN, value: false }),
+        set({ name: IR_AFF_V_AFF, value })
       ]);
     },
     handleUpdateAffinityRule: value => {
       return dispatch([
-        destroy(IC_AFF_F_EDIT),
-        set({ name: IC_AFF_V_EDIT_OPEN, value: false }),
-        set({ name: IC_AFF_V_AFF, value })
+        destroy(IR_AFF_F_EDIT),
+        set({ name: IR_AFF_V_EDIT_OPEN, value: false }),
+        set({ name: IR_AFF_V_AFF, value })
       ]);
     },
     handleChangeAddOpen: value => {
       return dispatch([
-        reset(IC_AFF_F_ADD),
-        set({ name: IC_AFF_V_ADD_OPEN, value })
+        reset(IR_AFF_F_ADD),
+        set({ name: IR_AFF_V_ADD_OPEN, value })
       ]);
     },
     handleToggleExpanded: value => {
-      return dispatch(set({ name: IC_AFF_V_EDIT_OPEN, value }));
+      return dispatch(set({ name: IR_AFF_V_EDIT_OPEN, value }));
     },
     handleCancelEdit: () => {
-      return dispatch([set({ name: IC_AFF_V_EDIT_OPEN, value: false })]);
+      return dispatch([set({ name: IR_AFF_V_EDIT_OPEN, value: false })]);
     },
     handleRemoveAffinityRule: () => {
       return dispatch([
-        destroy(IC_AFF_F_EDIT),
-        set({ name: IC_AFF_V_AFF, value: null })
+        destroy(IR_AFF_F_EDIT),
+        set({ name: IR_AFF_V_AFF, value: null })
       ]);
     }
   }))
diff --git a/packages/instance-steps/src/cns/index.js b/packages/instance-steps/src/cns/index.js
index 757e4fd7..ed8cd3b3 100644
--- a/packages/instance-steps/src/cns/index.js
+++ b/packages/instance-steps/src/cns/index.js
@@ -27,8 +27,25 @@ import GetAccount from '../graphql/get-account.gql';
 import { addCnsService as validateServiceName } from '../validators';
 import { Forms, Values } from '../constants';
 
-const { IC_CNS_F, IR_NAME_F } = Forms;
-const { IC_CNS_V_ENABLED, IC_CNS_V_SERVICES } = Values;
+const { IR_CNS_F, IR_NAME_F } = Forms;
+const { IR_CNS_V_ENABLED, IR_CNS_V_SERVICES } = Values;
+
+export const Preview = ({ enabled = false }) => (
+  <Flex>
+    <FlexItem>
+      <Margin right="2">
+        <StatusIcon
+          fill="green"
+          border="greenDark"
+          Icon={() => <TickIcon fill="white" />}
+        />
+      </Margin>
+    </FlexItem>
+    <FlexItem>
+      <H3>{enabled ? 'CNS enabled' : 'CNS not enabled'}</H3>
+    </FlexItem>
+  </Flex>
+);
 
 const CnsContainer = ({
   handleValidate,
@@ -47,20 +64,7 @@ const CnsContainer = ({
     <StepHeader icon={<CnsIcon />}>CNS</StepHeader>
     <StepPreview>
       <Margin top="3">
-        <Flex>
-          <FlexItem>
-            <Margin right={2}>
-              <StatusIcon
-                fill="green"
-                border="greenDark"
-                Icon={() => <TickIcon fill="white" />}
-              />
-            </Margin>
-          </FlexItem>
-          <FlexItem>
-            <H3>{preview.cnsEnabled ? 'CNS enabled' : 'CNS not enabled'}</H3>
-          </FlexItem>
-        </Flex>
+        <Preview enabled={preview.cnsEnabled} />
       </Margin>
     </StepPreview>
     <StepOutlet>
@@ -72,7 +76,7 @@ const CnsContainer = ({
             onRemoveService={handleRemoveService}
           >
             <ReduxForm
-              form={IC_CNS_F}
+              form={IR_CNS_F}
               destroyOnUnmount={false}
               forceUnregisterOnUnmount={true}
               onSubmit={handleAddService}
@@ -82,9 +86,9 @@ const CnsContainer = ({
               {props => <AddServiceForm {...props} />}
             </ReduxForm>
           </Cns>
-          <Margin top={5}>
+          <Margin top="5">
             <Button
-              id={'next-button-cns'}
+              id="next-button-cns"
               type="button"
               component={Link}
               to={next}
@@ -92,7 +96,7 @@ const CnsContainer = ({
               Next
             </Button>
           </Margin>
-          <Margin top={3}>
+          <Margin top="3">
             <P>
               *All hostnames listed here will be confirmed after deployment.
             </P>
@@ -119,7 +123,7 @@ export default compose(
     }
   }),
   connect(({ form, values }, { id, datacenter }) => {
-    const cnsEnabled = get(values, IC_CNS_V_ENABLED, true);
+    const cnsEnabled = get(values, IR_CNS_V_ENABLED, true);
 
     if (!cnsEnabled) {
       return {
@@ -129,7 +133,7 @@ export default compose(
     }
 
     const instanceName = get(form, `${IR_NAME_F}.values.name`, '<inst-name>');
-    const serviceNames = get(values, IC_CNS_V_SERVICES, []);
+    const serviceNames = get(values, IR_CNS_V_SERVICES, []);
 
     const hostnames = [
       {
@@ -178,18 +182,18 @@ export default compose(
     },
     handleValidate: validateServiceName,
     handleToggleCnsEnabled: ({ target }) => {
-      return dispatch(set({ name: IC_CNS_V_ENABLED, value: !cnsEnabled }));
+      return dispatch(set({ name: IR_CNS_V_ENABLED, value: !cnsEnabled }));
     },
     handleAddService: ({ name }) => {
       return dispatch([
-        destroy(IC_CNS_F),
-        set({ name: IC_CNS_V_SERVICES, value: serviceNames.concat(name) })
+        destroy(IR_CNS_F),
+        set({ name: IR_CNS_V_SERVICES, value: serviceNames.concat(name) })
       ]);
     },
     handleRemoveService: value => {
       return dispatch(
         set({
-          name: IC_CNS_V_SERVICES,
+          name: IR_CNS_V_SERVICES,
           value: serviceNames.filter(name => name !== value)
         })
       );
diff --git a/packages/instance-steps/src/constants.js b/packages/instance-steps/src/constants.js
index a0e0f1d3..c08af7cb 100644
--- a/packages/instance-steps/src/constants.js
+++ b/packages/instance-steps/src/constants.js
@@ -1,40 +1,40 @@
 export const Forms = {
   IR_NAME_F: 'INSTANCE_RESOURCE_NAME_FORM',
-  IC_IMG_F: 'INSTANCE_CREATION_IMAGE_FORM',
-  IC_PKG_F_SELECT: 'INSTANCE_CREATION_PACKAGE_FORM_SELECT',
-  IC_PKG_F_FILTER: 'INSTANCE_CREATION_PACKAGE_FORM_FILTER',
-  IC_NW_F: 'INSTANCE_CREATION_NETWORKS_FORM',
-  IC_TAG_F_ADD: 'INSTANCE_CREATION_TAG_FORM_ADD',
-  IC_TAG_F_EDIT: index => `INSTANCE_CREATION_TAG_FORM_EDIT_${index}`,
-  IC_MD_F_ADD: 'INSTANCE_CREATION_METADATA_FORM_ADD',
-  IC_MD_F_EDIT: index => `INSTANCE_CREATION_METADATA_FORM_EDIT_${index}`,
-  IC_US_F: 'INSTANCE_CREATION_USERSCRIPT_FORM',
-  IC_FW_F_ENABLED: 'INSTANCE_CREATION_FW_ENABLED',
-  IC_FW_F_INACTIVE: 'INSTANCE_CREATION_FW_INACTIVE',
-  IC_CNS_F: 'INSTANCE_CREATION_CNS_FORM',
-  IC_AFF_F_ADD: 'INSTANCE_CREATION_AFFINITY_FORM_ADD',
-  IC_AFF_F_EDIT: 'INSTANCE_CREATION_AFFINITY_FORM_EDIT'
+  IR_IMG_F: 'INSTANCE_RESOURCE_IMAGE_FORM',
+  IR_PKG_F_SELECT: 'INSTANCE_RESOURCE_PACKAGE_FORM_SELECT',
+  IR_PKG_F_FILTER: 'INSTANCE_RESOURCE_PACKAGE_FORM_FILTER',
+  IR_NW_F: 'INSTANCE_RESOURCE_NETWORKS_FORM',
+  IR_TAG_F_ADD: 'INSTANCE_RESOURCE_TAG_FORM_ADD',
+  IR_TAG_F_EDIT: index => `INSTANCE_RESOURCE_TAG_FORM_EDIT_${index}`,
+  IR_MD_F_ADD: 'INSTANCE_RESOURCE_METADATA_FORM_ADD',
+  IR_MD_F_EDIT: index => `INSTANCE_RESOURCE_METADATA_FORM_EDIT_${index}`,
+  IR_US_F: 'INSTANCE_RESOURCE_USERSCRIPT_FORM',
+  IR_FW_F_ENABLED: 'INSTANCE_RESOURCE_FW_ENABLED',
+  IR_FW_F_INACTIVE: 'INSTANCE_RESOURCE_FW_INACTIVE',
+  IR_CNS_F: 'INSTANCE_RESOURCE_CNS_FORM',
+  IR_AFF_F_ADD: 'INSTANCE_RESOURCE_AFFINITY_FORM_ADD',
+  IR_AFF_F_EDIT: 'INSTANCE_RESOURCE_AFFINITY_FORM_EDIT'
 };
 
 export const Values = {
   IR_NAME_V_USE_RANDOM: 'INSTANCE_RESOURCE_NAME_VALUE_USE_RANDOM',
-  IC_IMG_V_VMS: 'INSTANCE_CREATION_IMG_VALUE_VMS',
-  IC_PKG_V_SORT_BY: 'INSTANCE_CREATION_PACKAGE_VALUE_SORT_BY',
-  IC_PKG_V_SORT_ORDER: 'INSTANCE_CREATION_PACKAGE_VALUE_SORT_ORDER',
-  IC_NW_V_INFO_EXPANDED: id =>
-    `INSTANCE_CREATION_NETWORKS_VALUE_${id}_INFO_EXPANDED`,
-  IC_NW_V_MACHINES_EXPANDED: id =>
-    `INSTANCE_CREATION_NETWORKS_VALUE_${id}_MACHINES_EXPANDED`,
-  IC_TAG_V_ADD_OPEN: 'INSTANCE_CREATION_TAG_VALUE_ADD_OPEN',
-  IC_TAG_V_TAGS: 'INSTANCE_CREATION_TAG_VALUE_TAGS',
-  IC_MD_V_ADD_OPEN: 'INSTANCE_CREATION_METADATA_VALUE_ADD_OPEN',
-  IC_MD_V_MD: 'INSTANCE_CREATION_METADATA_VALUE_ADD_METADATA',
-  IC_MD_F_ADD: 'INSTANCE_CREATION_METADATA_FORM_ADD',
-  IC_MD_F_EDIT: index => `INSTANCE_CREATION_METADATA_FORM_EDIT_${index}`,
-  IC_US_V_OPEN: 'INSTANCE_CREATION_USERSCRIPT_VALUE_OPEN',
-  IC_CNS_V_ENABLED: 'INSTANCE_CREATION_CNS_VALUE_ENABLED',
-  IC_CNS_V_SERVICES: 'INSTANCE_CREATION_CNS_VALUE_SERVICES',
-  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'
+  IR_IMG_V_VMS: 'INSTANCE_RESOURCE_IMG_VALUE_VMS',
+  IR_PKG_V_SORT_BY: 'INSTANCE_RESOURCE_PACKAGE_VALUE_SORT_BY',
+  IR_PKG_V_SORT_ORDER: 'INSTANCE_RESOURCE_PACKAGE_VALUE_SORT_ORDER',
+  IR_NW_V_INFO_EXPANDED: id =>
+    `INSTANCE_RESOURCE_NETWORKS_VALUE_${id}_INFO_EXPANDED`,
+  IR_NW_V_MACHINES_EXPANDED: id =>
+    `INSTANCE_RESOURCE_NETWORKS_VALUE_${id}_MACHINES_EXPANDED`,
+  IR_TAG_V_ADD_OPEN: 'INSTANCE_RESOURCE_TAG_VALUE_ADD_OPEN',
+  IR_TAG_V_TAGS: 'INSTANCE_RESOURCE_TAG_VALUE_TAGS',
+  IR_MD_V_ADD_OPEN: 'INSTANCE_RESOURCE_METADATA_VALUE_ADD_OPEN',
+  IR_MD_V_MD: 'INSTANCE_RESOURCE_METADATA_VALUE_ADD_METADATA',
+  IR_MD_F_ADD: 'INSTANCE_RESOURCE_METADATA_FORM_ADD',
+  IR_MD_F_EDIT: index => `INSTANCE_RESOURCE_METADATA_FORM_EDIT_${index}`,
+  IR_US_V_OPEN: 'INSTANCE_RESOURCE_USERSCRIPT_VALUE_OPEN',
+  IR_CNS_V_ENABLED: 'INSTANCE_RESOURCE_CNS_VALUE_ENABLED',
+  IR_CNS_V_SERVICES: 'INSTANCE_RESOURCE_CNS_VALUE_SERVICES',
+  IR_AFF_V_ADD_OPEN: 'INSTANCE_RESOURCE_AFFINITY_VALUE_ADD_OPEN',
+  IR_AFF_V_EDIT_OPEN: 'INSTANCE_RESOURCE_AFFINITY_VALUE_EDIT_OPEN',
+  IR_AFF_V_AFF: 'INSTANCE_RESOURCE_AFFINITY_VALUE_AFFINITY'
 };
diff --git a/packages/instance-steps/src/firewall/components.js b/packages/instance-steps/src/firewall/components.js
index a0f3e8f3..2e39f70f 100644
--- a/packages/instance-steps/src/firewall/components.js
+++ b/packages/instance-steps/src/firewall/components.js
@@ -8,7 +8,7 @@ import { StatusIcon, ErrorIcon } from 'joyent-ui-resource-step';
 export const Preview = ({ enabled }) => (
   <Flex>
     <FlexItem>
-      <Margin right={2}>
+      <Margin right="2">
         {enabled ? (
           <StatusIcon
             fill="green"
diff --git a/packages/instance-steps/src/firewall/index.js b/packages/instance-steps/src/firewall/index.js
index 330c53d9..ebfd3ced 100644
--- a/packages/instance-steps/src/firewall/index.js
+++ b/packages/instance-steps/src/firewall/index.js
@@ -30,8 +30,8 @@ import { Forms, Values } from '../constants';
 import { Preview } from './components';
 import ListFwRules from '../graphql/list-fw-rules.gql';
 
-const { IC_FW_F_ENABLED, IC_FW_F_INACTIVE } = Forms;
-const { IC_TAG_V_TAGS } = Values;
+const { IR_FW_F_ENABLED, IR_FW_F_INACTIVE } = Forms;
+const { IR_TAG_V_TAGS } = Values;
 
 const Firewall = ({
   handleGetValue,
@@ -60,16 +60,16 @@ const Firewall = ({
     <StepOutlet>
       {({ next }) => (
         <Fragment>
-          <Margin top={5}>
+          <Margin top="5">
             <Flex>
               <FlexItem>
                 <ReduxForm
-                  form={IC_FW_F_ENABLED}
+                  form={IR_FW_F_ENABLED}
                   destroyOnUnmount={false}
                   forceUnregisterOnUnmount={true}
                 >
                   {props => (
-                    <Margin right={5}>
+                    <Margin right="5">
                       <ToggleFirewallForm {...props} submitting={loading} />
                     </Margin>
                   )}
@@ -77,7 +77,7 @@ const Firewall = ({
               </FlexItem>
               <FlexItem>
                 <ReduxForm
-                  form={IC_FW_F_INACTIVE}
+                  form={IR_FW_F_INACTIVE}
                   destroyOnUnmount={false}
                   forceUnregisterOnUnmount={true}
                 >
@@ -91,17 +91,17 @@ const Firewall = ({
             </Flex>
           </Margin>
           {enabled && !loading && !defaultRules.length && !tagRules.length ? (
-            <Margin top={5}>
+            <Margin top="5">
               <Empty borderTop>
                 <Fragment>
                   <H3>No Firewall rules found</H3>
-                  <Margin top={1}>
+                  <Margin top="1">
                     <P>
                       Try viewing inactive rules instead to see firewalls that
                       can potentially affect your instance
                     </P>
                   </Margin>
-                  <Margin top={2}>
+                  <Margin top="2">
                     <Button
                       secondary
                       onClick={showInactiveRules}
@@ -115,17 +115,17 @@ const Firewall = ({
             </Margin>
           ) : null}
           {!loading && enabled && defaultRules.length ? (
-            <Margin top={5}>
+            <Margin top="5">
               <DefaultRules rules={defaultRules} />
             </Margin>
           ) : null}
           {!loading && enabled && tagRules.length ? (
-            <Margin top={5}>
+            <Margin top="5">
               <TagRules rules={tagRules} />
             </Margin>
           ) : null}
           {!loading && enabled && (tagRules.length || defaultRules.length) ? (
-            <Margin top={5}>
+            <Margin top="5">
               <P>
                 *Other firewall rules may apply as defined by wildcard(s),
                 IP(s), subnet(s), tag(s) or VM(s). Please see{' '}
@@ -140,9 +140,9 @@ const Firewall = ({
               </P>
             </Margin>
           ) : null}
-          <Margin top={5}>
+          <Margin top="5">
             <Button
-              id={'next-button-firewall'}
+              id="next-button-firewall"
               type="button"
               component={Link}
               to={next}
@@ -159,11 +159,9 @@ const Firewall = ({
 export default compose(
   connect(({ form, values }, ownProps) => ({
     ...ownProps,
-    enabled:
-      console.log(form, values) ||
-      get(form, `${IC_FW_F_ENABLED}.values.enabled`, false),
-    showInactive: get(form, `${IC_FW_F_INACTIVE}.values.inactive`, false),
-    tags: get(values, IC_TAG_V_TAGS, [])
+    enabled: get(form, `${IR_FW_F_ENABLED}.values.enabled`, false),
+    showInactive: get(form, `${IR_FW_F_INACTIVE}.values.inactive`, false),
+    tags: get(values, IR_TAG_V_TAGS, [])
   })),
   graphql(ListFwRules, {
     options: ({ tags, expanded, enabled }) => ({
@@ -206,6 +204,8 @@ export default compose(
   }),
   connect(null, (dispatch, { ...args }) => ({
     showInactiveRules: () =>
-      dispatch(change(IC_FW_F_INACTIVE, 'inactive', true))
+      dispatch(change(IR_FW_F_INACTIVE, 'inactive', true))
   }))
 )(Firewall);
+
+export { Preview } from './components';
diff --git a/packages/instance-steps/src/image/components.js b/packages/instance-steps/src/image/components.js
index 4f6f4863..2687182a 100644
--- a/packages/instance-steps/src/image/components.js
+++ b/packages/instance-steps/src/image/components.js
@@ -63,9 +63,9 @@ const H4 = styled(BaseH4)`
 export const Preview = ({ name, version, isVm }) => {
   return (
     <Fragment>
-      <Margin top={3}>
+      <Margin top="3">
         <H3>{name}</H3>
-        <Margin top={2}>
+        <Margin top="2">
           <P>
             {isVm ? 'Hardware Virtual Machine' : 'Infrastructure Container'}{' '}
           </P>
@@ -92,7 +92,7 @@ const Image = ({ onClick, active, ...image }) => {
 
   return (
     <Col lg={3} md={4} xs={6}>
-      <Margin bottom={3}>
+      <Margin bottom="3">
         <Card id={id} onClick={handleCardClick} active={active} preview>
           <Logo
             fill={active ? '#3b46cc' : null}
@@ -120,11 +120,11 @@ const Image = ({ onClick, active, ...image }) => {
 };
 
 export const ImageType = ({ setImageType, vms }) => (
-  <Margin bottom={3}>
+  <Margin bottom="3">
     <SectionList>
       <SectionListItem>
         <SectionListAnchor
-          id={'image-type-hwvm'}
+          id="image-type-hwvm"
           active={vms}
           onClick={() => setImageType(true)}
         >
@@ -133,7 +133,7 @@ export const ImageType = ({ setImageType, vms }) => (
       </SectionListItem>
       <SectionListItem>
         <SectionListAnchor
-          id={'image-type-ic'}
+          id="image-type-ic"
           active={!vms}
           onClick={() => setImageType(false)}
         >
diff --git a/packages/instance-steps/src/image/index.js b/packages/instance-steps/src/image/index.js
index d8bbd2c9..561f634a 100644
--- a/packages/instance-steps/src/image/index.js
+++ b/packages/instance-steps/src/image/index.js
@@ -30,8 +30,8 @@ import { Forms, Values } from '../constants';
 import imageData from './images-map.json';
 import ImageView, { Preview as ImagePreview, ImageType } from './components';
 
-const { IC_IMG_F } = Forms;
-const { IC_IMG_V_VMS } = Values;
+const { IR_IMG_F } = Forms;
+const { IR_IMG_V_VMS } = Values;
 
 const Image = ({
   handleGetValue,
@@ -52,7 +52,7 @@ const Image = ({
       Linux image on secure, bare metal containers.
     </StepDescription>
     <StepPreview>
-      <Margin top={3}>
+      <Margin top="3">
         <ImagePreview {...preview} />
       </Margin>
     </StepPreview>
@@ -60,7 +60,7 @@ const Image = ({
       {({ next }) => (
         <Margin top="5">
           <ReduxForm
-            form={IC_IMG_F}
+            form={IR_IMG_F}
             destroyOnUnmount={false}
             forceUnregisterOnUnmount={true}
             enableReinitialize
@@ -80,7 +80,7 @@ const Image = ({
                     />
                     <Margin top="2">
                       <Button
-                        id={'next-button-image'}
+                        id="next-button-image"
                         type="button"
                         component={Link}
                         to={next}
@@ -102,8 +102,8 @@ const Image = ({
 export default compose(
   connect(
     ({ form, values }, ownProps) => {
-      const image = get(form, `${IC_IMG_F}.values.image`, null);
-      const vms = get(values, IC_IMG_V_VMS, true);
+      const image = get(form, `${IR_IMG_F}.values.image`, null);
+      const vms = get(values, IR_IMG_V_VMS, true);
 
       return {
         ...ownProps,
@@ -113,10 +113,10 @@ export default compose(
     },
     dispatch => ({
       setImageType: isVm => {
-        return dispatch(set({ name: IC_IMG_V_VMS, value: isVm }));
+        return dispatch(set({ name: IR_IMG_V_VMS, value: isVm }));
       },
       handleSelectLatest: ({ versions }) => {
-        return dispatch(change(IC_IMG_F, 'image', versions[0].id));
+        return dispatch(change(IR_IMG_F, 'image', versions[0].id));
       }
     })
   ),
diff --git a/packages/instance-steps/src/index.js b/packages/instance-steps/src/index.js
index 4191f524..25262a5a 100644
--- a/packages/instance-steps/src/index.js
+++ b/packages/instance-steps/src/index.js
@@ -1,3 +1,89 @@
+import forceArray from 'force-array';
+import constantCase from 'constant-case';
+import get from 'lodash.get';
+import uniqBy from 'lodash.uniqby';
+import omit from 'lodash.omit';
+
+const parseAffRule = ({
+  conditional,
+  placement,
+  type: identity,
+  name,
+  pattern,
+  value
+}) => {
+  const type = constantCase(
+    `${conditional}_${placement === 'same' ? 'equal' : 'not_equal'}`
+  );
+
+  const patterns = {
+    equalling: value => value,
+    starting: value => `/^${value}/`
+  };
+
+  const _name = identity === 'name' ? 'instance' : name;
+  const _value = patterns[pattern](type === 'name' ? name : value);
+
+  return {
+    type,
+    key: _name,
+    value: _value
+  };
+};
+
+export const generatePayload = steps => {
+  const name = get(steps, 'name.name', '').toLowerCase();
+  const image = get(steps, 'image.id', '');
+  const pkg = get(steps, 'package.id', '');
+
+  const networks = forceArray(get(steps, 'networks', []))
+    .map(({ id }) => id)
+    .filter(Boolean);
+
+  const tags = forceArray(get(steps, 'tags', [])).map(t => omit(t, 'expanded'));
+  const metadata = forceArray(get(steps, 'metadata', [])).map(m =>
+    omit(m, 'open')
+  );
+
+  const userScript = get(steps, 'user-script', { lines: 0 });
+  const firewall_enabled = get(steps, 'firewall.enabled', false);
+  const cns = get(steps, 'cns', { cnsEnabled: false, serviceNames: [] });
+
+  const affinity = steps.affinity
+    ? forceArray(parseAffRule(steps.affinity))
+    : [];
+
+  if (userScript.lines) {
+    metadata.push({
+      name: 'user-script',
+      value: userScript.script
+    });
+  }
+
+  tags.push({
+    name: 'triton.cns.disable',
+    value: !cns.cnsEnabled
+  });
+
+  if (cns.serviceNames.length) {
+    metadata.push({
+      name: 'triton.cns.services',
+      value: cns.serviceNames.join(',')
+    });
+  }
+
+  return {
+    name,
+    package: pkg,
+    image,
+    affinity,
+    metadata: uniqBy(metadata, 'name'),
+    tags: uniqBy(tags, 'name'),
+    firewall_enabled,
+    networks: networks.length ? networks : undefined
+  };
+};
+
 export { default as Name } from './name';
 export { default as Image } from './image';
 export { default as Package } from './package';
@@ -5,6 +91,6 @@ export { default as Networks } from './networks';
 export { default as Tags } from './tags';
 export { default as Metadata } from './metadata';
 export { default as UserScript } from './user-script';
-export { default as Firewall } from './firewall';
-export { default as CNS } from './cns';
+export { default as Firewall, Preview as FirewallPreview } from './firewall';
+export { default as CNS, Preview as CnsPreview } from './cns';
 export { default as Affinity } from './affinity';
diff --git a/packages/instance-steps/src/metadata/components.js b/packages/instance-steps/src/metadata/components.js
index 76486c5c..ff2393a5 100644
--- a/packages/instance-steps/src/metadata/components.js
+++ b/packages/instance-steps/src/metadata/components.js
@@ -2,12 +2,13 @@ import React, { Fragment } from 'react';
 import { Margin } from 'styled-components-spacing';
 import ReduxForm from 'declarative-redux-form';
 
-import { H3, KeyValue } from 'joyent-ui-toolkit';
+import { H3 } from 'joyent-ui-toolkit';
 import Editor from 'joyent-ui-toolkit/dist/es/editor';
+import { KeyValue } from 'joyent-ui-resource-widgets';
 
 import { Forms } from '../constants';
 
-const { IC_MD_F_EDIT } = Forms;
+const { IR_MD_F_EDIT } = Forms;
 
 export const Overview = ({ total = 0 }) => (
   <H3>
@@ -27,12 +28,12 @@ export default ({
   disabled
 }) => (
   <Fragment>
-    <Margin bottom={5}>
+    <Margin bottom="5">
       <Overview total={metadata.length} />
     </Margin>
     {metadata.map(({ name, value, open }, index) => (
       <ReduxForm
-        form={IC_MD_F_EDIT(index)}
+        form={IR_MD_F_EDIT(index)}
         key={index}
         initialValues={{ name, value }}
         destroyOnUnmount={false}
@@ -62,7 +63,7 @@ export default ({
               shadow={false}
             />
             {addOpen || index !== metadata.length - 1 ? (
-              <Margin bottom={2} />
+              <Margin bottom="2" />
             ) : null}
           </Fragment>
         )}
diff --git a/packages/instance-steps/src/metadata/index.js b/packages/instance-steps/src/metadata/index.js
index 2f1f5613..9a20a39b 100644
--- a/packages/instance-steps/src/metadata/index.js
+++ b/packages/instance-steps/src/metadata/index.js
@@ -16,15 +16,16 @@ import Step, {
   Outlet as StepOutlet
 } from 'joyent-ui-resource-step';
 
-import { Button, KeyValue, MetadataIcon } from 'joyent-ui-toolkit';
+import { Button, MetadataIcon } from 'joyent-ui-toolkit';
+import { KeyValue } from 'joyent-ui-resource-widgets';
 
 import { Forms, Values } from '../constants';
-import { default as Preview, Overview } from './components';
+import { default as Preview } from './components';
 import Editor from 'joyent-ui-toolkit/dist/es/editor';
 import { addMetadata as validateMetadata } from '../validators';
 
-const { IC_MD_F_ADD, IC_MD_F_EDIT } = Forms;
-const { IC_MD_V_ADD_OPEN, IC_MD_V_MD } = Values;
+const { IR_MD_F_ADD, IR_MD_F_EDIT } = Forms;
+const { IR_MD_V_ADD_OPEN, IR_MD_V_MD } = Values;
 
 const Metadata = ({
   handleValidate,
@@ -74,7 +75,7 @@ const Metadata = ({
             </Fragment>
           ) : null}
           <ReduxForm
-            form={IC_MD_F_ADD}
+            form={IR_MD_F_ADD}
             destroyOnUnmount={false}
             forceUnregisterOnUnmount={true}
             onSubmit={handleAddMetadata}
@@ -97,12 +98,12 @@ const Metadata = ({
                   />
                 </Fragment>
               ) : (
-                <Margin top={5}>
+                <Margin top="5">
                   <Flex>
                     <FlexItem>
-                      <Margin right={1}>
+                      <Margin right="1">
                         <Button
-                          id={'button-add-metadata'}
+                          id="button-add-metadata"
                           type="button"
                           onClick={() => handleChangeAddOpen(true)}
                           secondary
@@ -113,7 +114,7 @@ const Metadata = ({
                     </FlexItem>
                     <FlexItem>
                       <Button
-                        id={'next-button-metadata'}
+                        id="next-button-metadata"
                         type="button"
                         component={Link}
                         to={next}
@@ -134,8 +135,8 @@ const Metadata = ({
 
 export default compose(
   connect(({ values }, ownProps) => {
-    const addOpen = get(values, IC_MD_V_ADD_OPEN, false);
-    const metadata = get(values, IC_MD_V_MD, []);
+    const addOpen = get(values, IR_MD_V_ADD_OPEN, false);
+    const metadata = get(values, IR_MD_V_MD, []);
     return {
       addOpen,
       metadata
@@ -148,14 +149,14 @@ export default compose(
     handleGetValue: () => metadata,
     handleAsyncValidate: validateMetadata,
     handleAddMetadata: value => {
-      const toggleToClosed = set({ name: IC_MD_V_ADD_OPEN, value: false });
+      const toggleToClosed = set({ name: IR_MD_V_ADD_OPEN, value: false });
 
       const appendMetadata = set({
-        name: IC_MD_V_MD,
+        name: IR_MD_V_MD,
         value: metadata.concat([{ ...value, open: false }])
       });
 
-      return dispatch([destroy(IC_MD_F_ADD), toggleToClosed, appendMetadata]);
+      return dispatch([destroy(IR_MD_F_ADD), toggleToClosed, appendMetadata]);
     },
     handleUpdateMetadata: (index, newMetadata) => {
       metadata[index] = {
@@ -164,14 +165,14 @@ export default compose(
       };
 
       return dispatch([
-        destroy(IC_MD_F_EDIT(index)),
-        set({ name: IC_MD_V_MD, value: metadata.slice() })
+        destroy(IR_MD_F_EDIT(index)),
+        set({ name: IR_MD_V_MD, value: metadata.slice() })
       ]);
     },
     handleChangeAddOpen: value => {
       return dispatch([
-        reset(IC_MD_F_ADD),
-        set({ name: IC_MD_V_ADD_OPEN, value })
+        reset(IR_MD_F_ADD),
+        set({ name: IR_MD_V_ADD_OPEN, value })
       ]);
     },
     handleToggleExpanded: index => {
@@ -180,7 +181,7 @@ export default compose(
         open: !metadata[index].open
       };
 
-      return dispatch(set({ name: IC_MD_V_MD, value: metadata.slice() }));
+      return dispatch(set({ name: IR_MD_V_MD, value: metadata.slice() }));
     },
     handleCancelEdit: index => {
       metadata[index] = {
@@ -189,16 +190,16 @@ export default compose(
       };
 
       return dispatch([
-        reset(IC_MD_F_EDIT(index)),
-        set({ name: IC_MD_V_MD, value: metadata.slice() })
+        reset(IR_MD_F_EDIT(index)),
+        set({ name: IR_MD_V_MD, value: metadata.slice() })
       ]);
     },
     handleRemoveMetadata: index => {
       metadata.splice(index, 1);
 
       return dispatch([
-        destroy(IC_MD_F_EDIT(index)),
-        set({ name: IC_MD_V_MD, value: metadata.slice() })
+        destroy(IR_MD_F_EDIT(index)),
+        set({ name: IR_MD_V_MD, value: metadata.slice() })
       ]);
     }
   }))
diff --git a/packages/instance-steps/src/name/index.js b/packages/instance-steps/src/name/index.js
index 59e88d81..93ad10ce 100644
--- a/packages/instance-steps/src/name/index.js
+++ b/packages/instance-steps/src/name/index.js
@@ -49,13 +49,15 @@ const Form = styled.form`
   margin-bottom: 0;
 `;
 
-const Name = ({
+const NameContainer = ({
+  randomizable = false,
   initialValues,
   handleValidate,
   randomizing,
   handleRandomize,
   handleGetValue,
   preview = {},
+  children,
   ...props
 }) => (
   <Step
@@ -64,10 +66,7 @@ const Name = ({
     isValid={handleValidate(preview)}
     {...props}
   >
-    <StepHeader icon={<NameIcon />}>Instance name</StepHeader>
-    <StepDescription>
-      Your instance name will be used to identify this specific instance.
-    </StepDescription>
+    {children}
     <StepPreview>
       <Margin top="5">
         <H2>{preview.name}</H2>
@@ -87,7 +86,7 @@ const Name = ({
           >
             {props => (
               <Form onSubmit={null}>
-                <FormGroup id={'input-name'} name="name" fluid field={Field}>
+                <FormGroup id="input-name" name="name" fluid field={Field}>
                   <FormLabel>Instance name</FormLabel>
                   <Margin top="0.5">
                     <SmallOnly>
@@ -95,25 +94,26 @@ const Name = ({
                         <FlexItem>
                           <Input onBlur={null} fluid />
                         </FlexItem>
-                        <FlexItem>
-                          <Margin top="2">
-                            <Button
-                              id={'randomize-button-name'}
-                              type="button"
-                              loading={randomizing}
-                              onClick={handleRandomize}
-                              marginless
-                              secondary
-                              icon
-                              fluid
-                            >
-                              <Margin right="1">
-                                <RandomizeIcon />
-                              </Margin>
-                              Randomize
-                            </Button>
-                          </Margin>
-                        </FlexItem>
+                        {randomizable ? (
+                          <FlexItem>
+                            <Margin top="2">
+                              <Button
+                                id="randomize-button-name"
+                                type="button"
+                                loading={randomizing}
+                                onClick={handleRandomize}
+                                marginless
+                                secondary
+                                icon
+                                fluid
+                              >
+                                <Margin right="1">
+                                  <RandomizeIcon />
+                                </Margin>
+                                Randomize
+                              </Button>
+                            </Margin>
+                          </FlexItem>) : null}
                       </Flex>
                     </SmallOnly>
                     <Medium>
@@ -121,24 +121,26 @@ const Name = ({
                         <FlexItem>
                           <Input onBlur={null} />
                         </FlexItem>
-                        <FlexItem>
-                          <Margin left="1" inline>
-                            <Button
-                              id={'randomize-button-name'}
-                              type="button"
-                              loading={randomizing}
-                              onClick={handleRandomize}
-                              marginless
-                              secondary
-                              icon
-                            >
-                              <Margin right="1">
-                                <RandomizeIcon />
-                              </Margin>
-                              Randomize
-                            </Button>
-                          </Margin>
-                        </FlexItem>
+                        {randomizable ? (
+                          <FlexItem>
+                            <Margin left="1" inline>
+                              <Button
+                                id="randomize-button-name"
+                                type="button"
+                                loading={randomizing}
+                                onClick={handleRandomize}
+                                marginless
+                                secondary
+                                icon
+                              >
+                                <Margin right="1">
+                                  <RandomizeIcon />
+                                </Margin>
+                                Randomize
+                              </Button>
+                            </Margin>
+                          </FlexItem>
+                        ) : null}
                       </Flex>
                     </Medium>
                   </Margin>
@@ -146,7 +148,7 @@ const Name = ({
                 </FormGroup>
                 <Margin top="5">
                   <Button
-                    id={'next-button-name'}
+                    id="next-button-name"
                     type="button"
                     component={Link}
                     to={next}
@@ -163,6 +165,34 @@ const Name = ({
   </Step>
 );
 
+const TemplateName = props => (
+  <NameContainer {...props}>
+    <StepHeader icon={<NameIcon />}>Name this template</StepHeader>
+    <StepDescription>
+      Please give your Template a name and define what prefix will be attached
+      to all instances created from this template.
+    </StepDescription>
+  </NameContainer>
+);
+
+const InstanceName = props => (
+  <NameContainer {...props}>
+    <StepHeader icon={<NameIcon />} randomizable>
+      Name this instance
+    </StepHeader>
+    <StepDescription>
+      Your instance name will be used to identify this specific instance.
+    </StepDescription>
+  </NameContainer>
+);
+
+const Name = ({ type = 'instance', ...props }) =>
+  type === 'instance' ? (
+    <InstanceName {...props} />
+  ) : (
+    <TemplateName {...props} />
+  );
+
 const Container = compose(
   graphql(GetRandomName, {
     options: () => ({
diff --git a/packages/instance-steps/src/networks/index.js b/packages/instance-steps/src/networks/index.js
index 6fee14a0..524327ae 100644
--- a/packages/instance-steps/src/networks/index.js
+++ b/packages/instance-steps/src/networks/index.js
@@ -25,8 +25,8 @@ import ListNetworks from '../graphql/list-networks.gql';
 import { Network as NetworkWidget } from 'joyent-ui-resource-widgets';
 import { Forms, Values } from '../constants';
 
-const { IC_NW_F } = Forms;
-const { IC_NW_V_INFO_EXPANDED, IC_NW_V_MACHINES_EXPANDED } = Values;
+const { IR_NW_F } = Forms;
+const { IR_NW_V_INFO_EXPANDED, IR_NW_V_MACHINES_EXPANDED } = Values;
 
 const Form = styled.form`
   padding-top: ${remcalc(1)};
@@ -45,7 +45,7 @@ const Networks = ({
 }) => (
   <Step name="networks" getValue={handleGetValue} {...props}>
     <StepHeader icon={<NetworkIcon />}>Networks</StepHeader>
-    <StepDescription href={'https://docs.joyent.com/public-cloud/network/sdn'}>
+    <StepDescription href="https://docs.joyent.com/public-cloud/network/sdn">
       Instances are automatically connected to a private fabric network, which
       is the best choice for internal communication within your application.
       Data center networks are the best choice for exposing your application to
@@ -74,7 +74,7 @@ const Networks = ({
       {({ next }) => (
         <Margin top="5">
           <ReduxForm
-            form={IC_NW_F}
+            form={IR_NW_F}
             destroyOnUnmount={false}
             forceUnregisterOnUnmount={true}
             initialValues={initialValues}
@@ -114,7 +114,7 @@ const Networks = ({
                   </Form>
                   <Margin top="5">
                     <Button
-                      id={'next-button-networks'}
+                      id="next-button-networks"
                       type="button"
                       component={Link}
                       to={next}
@@ -150,7 +150,7 @@ export default compose(
   }),
   connect(
     ({ values, form }, { networks }) => {
-      const selected = get(form, `${IC_NW_F}.values`, {});
+      const selected = get(form, `${IR_NW_F}.values`, {});
       const empty = id => !includes(Object.keys(selected), id);
       const _public = find(networks, ['name', 'Joyent-SDC-Public']);
 
@@ -173,8 +173,8 @@ export default compose(
             empty(id) && name === 'Joyent-SDC-Public'
               ? true
               : Boolean(selected[id]),
-          machinesExpanded: get(values, IC_NW_V_MACHINES_EXPANDED(id), false),
-          infoExpanded: get(values, IC_NW_V_INFO_EXPANDED(id), false)
+          machinesExpanded: get(values, IR_NW_V_MACHINES_EXPANDED(id), false),
+          infoExpanded: get(values, IR_NW_V_INFO_EXPANDED(id), false)
         };
       });
 
@@ -188,12 +188,12 @@ export default compose(
     (dispatch, { history }) => ({
       setInfoExpanded: (id, expanded) => {
         return dispatch(
-          set({ name: IC_NW_V_INFO_EXPANDED(id), value: expanded })
+          set({ name: IR_NW_V_INFO_EXPANDED(id), value: expanded })
         );
       },
       setMachinesExpanded: (id, expanded) => {
         return dispatch(
-          set({ name: IC_NW_V_MACHINES_EXPANDED(id), value: expanded })
+          set({ name: IR_NW_V_MACHINES_EXPANDED(id), value: expanded })
         );
       }
     })
diff --git a/packages/instance-steps/src/package/components.js b/packages/instance-steps/src/package/components.js
index d0491972..638f618c 100644
--- a/packages/instance-steps/src/package/components.js
+++ b/packages/instance-steps/src/package/components.js
@@ -124,8 +124,8 @@ const PackageSpecs = styled('div')`
 `;
 
 export const Filters = ({ onResetFilters }) => (
-  <Margin bottom={3}>
-    <Margin bottom={3}>
+  <Margin bottom="3">
+    <Margin bottom="3">
       <H4>Filters</H4>
     </Margin>
     <Flex wrap alignCenter>
@@ -133,8 +133,8 @@ export const Filters = ({ onResetFilters }) => (
         <Checkbox>
           <FormLabel noMargin actionable>
             <Flex alignCenter>
-              <Margin left={1}>{GroupIcons.COMPUTE}</Margin>
-              <Margin left={1} right={3}>
+              <Margin left="1">{GroupIcons.COMPUTE}</Margin>
+              <Margin left="1" right="3">
                 Compute Optimized
               </Margin>
             </Flex>
@@ -145,8 +145,8 @@ export const Filters = ({ onResetFilters }) => (
         <Checkbox>
           <FormLabel noMargin actionable>
             <Flex alignCenter>
-              <Margin left={1}>{GroupIcons.MEMORY}</Margin>
-              <Margin left={1} right={3}>
+              <Margin left="1">{GroupIcons.MEMORY}</Margin>
+              <Margin left="1" right="3">
                 Memory Optimized
               </Margin>
             </Flex>
@@ -157,8 +157,8 @@ export const Filters = ({ onResetFilters }) => (
         <Checkbox>
           <FormLabel noMargin actionable>
             <Flex alignCenter>
-              <Margin left={1}>{GroupIcons.GENERAL}</Margin>
-              <Margin left={1} right={3}>
+              <Margin left="1">{GroupIcons.GENERAL}</Margin>
+              <Margin left="1" right="3">
                 General Purpose
               </Margin>
             </Flex>
@@ -169,8 +169,8 @@ export const Filters = ({ onResetFilters }) => (
         <Checkbox>
           <FormLabel noMargin actionable>
             <Flex alignCenter>
-              <Margin left={1}>{GroupIcons.GENERAL}</Margin>
-              <Margin left={1} right={3}>
+              <Margin left="1">{GroupIcons.GENERAL}</Margin>
+              <Margin left="1" right="3">
                 Storage Optimized
               </Margin>
             </Flex>
@@ -180,12 +180,12 @@ export const Filters = ({ onResetFilters }) => (
       <FormGroup type="checkbox" name="ssd" field={Field}>
         <Checkbox>
           <FormLabel noMargin actionable>
-            <Margin left={1}>SSD</Margin>
+            <Margin left="1">SSD</Margin>
           </FormLabel>
         </Checkbox>
       </FormGroup>
     </Flex>
-    <Margin top={3} bottom={5}>
+    <Margin top="3" bottom="5">
       <Button type="button" onClick={onResetFilters} secondary>
         Reset Filters
       </Button>
@@ -318,10 +318,10 @@ export const Package = ({
       <FormGroup name="package" value={id} type="radio" field={Field} fluid>
         <Radio onBlur={null} noMargin>
           <Flex alignCenter>
-            <Margin left={5} right={1}>
+            <Margin left="5" right="1">
               {GroupIcons[group]}
             </Margin>
-            <Margin left={1} right={2}>
+            <Margin left="1" right="2">
               <FormLabel
                 style={{ fontWeight: sortBy === 'name' ? 'bold' : 'normal' }}
                 noMargin
@@ -338,7 +338,7 @@ export const Package = ({
       {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
     </TableTd>
     <TableTd right selected={selected} bold={sortBy === 'disk'}>
-      <Margin inline right={1}>
+      <Margin inline right="1">
         {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
       </Margin>
       {ssd && <Sup badge>SSD</Sup>}
@@ -447,7 +447,7 @@ export const Overview = ({
   onCancel
 }) => (
   <Fragment>
-    <Margin bottom={2}>
+    <Margin bottom="2">
       <H3 noMargin>{name}</H3>
     </Margin>
     <Flex alignCenter>
@@ -472,7 +472,7 @@ export const Empty = ({ children, ...rest }) => (
   <FullWidthCard {...rest}>
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
-        <Margin bottom={2}>
+        <Margin bottom="2">
           <EmptyState />
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>
diff --git a/packages/instance-steps/src/package/index.js b/packages/instance-steps/src/package/index.js
index 320c0f86..8157c24b 100644
--- a/packages/instance-steps/src/package/index.js
+++ b/packages/instance-steps/src/package/index.js
@@ -37,9 +37,9 @@ import { QueryBreakpoints } from 'joyent-ui-toolkit';
 
 const { SmallOnly, Medium } = QueryBreakpoints;
 
-const { IC_PKG_F_SELECT, IC_PKG_F_FILTER } = Forms;
+const { IR_PKG_F_SELECT, IR_PKG_F_FILTER } = Forms;
 
-const { IC_PKG_V_SORT_BY, IC_PKG_V_SORT_ORDER, IC_IMG_V_VMS } = Values;
+const { IR_PKG_V_SORT_BY, IR_PKG_V_SORT_ORDER, IR_IMG_V_VMS } = Values;
 
 const PackageComponent = ({
   handleRowClick,
@@ -63,16 +63,16 @@ const PackageComponent = ({
       size can only increase.
     </StepDescription>
     <StepPreview>
-      <Margin top={3}>
+      <Margin top="3">
         <Overview {...preview} />
       </Margin>
     </StepPreview>
     <StepOutlet>
       {({ next }) => (
-        <Margin top={5}>
+        <Margin top="5">
           <Margin>
             <ReduxForm
-              form={IC_PKG_F_FILTER}
+              form={IR_PKG_F_FILTER}
               destroyOnUnmount={false}
               forceUnregisterOnUnmount={true}
             >
@@ -83,7 +83,7 @@ const PackageComponent = ({
               }
             </ReduxForm>
             <ReduxForm
-              form={IC_PKG_F_SELECT}
+              form={IR_PKG_F_SELECT}
               destroyOnUnmount={false}
               forceUnregisterOnUnmount={true}
               onSubmit={null}
@@ -130,7 +130,7 @@ const PackageComponent = ({
                     </Medium>
                     <Margin top="4">
                       <Button
-                        id={'next-button-packages'}
+                        id="next-button-packages"
                         type="button"
                         component={Link}
                         to={next}
@@ -177,36 +177,36 @@ export default compose(
   }),
   connect(
     ({ form = {}, values, ...rest }, { packages, ...ownProps }) => {
-      const _sortBy = get(values, IC_PKG_V_SORT_BY, 'price');
-      const _sortOrder = get(values, IC_PKG_V_SORT_ORDER, 'asc');
-      const ssdOnly = get(form, `${IC_PKG_F_FILTER}.values.ssd`, false);
+      const _sortBy = get(values, IR_PKG_V_SORT_BY, 'price');
+      const _sortOrder = get(values, IR_PKG_V_SORT_ORDER, 'asc');
+      const ssdOnly = get(form, `${IR_PKG_F_FILTER}.values.ssd`, false);
 
       const computeOptimized = get(
         form,
-        `${IC_PKG_F_FILTER}.values.compute-optimized`,
+        `${IR_PKG_F_FILTER}.values.compute-optimized`,
         false
       );
 
       const generalPurpose = get(
         form,
-        `${IC_PKG_F_FILTER}.values.general-purpose`,
+        `${IR_PKG_F_FILTER}.values.general-purpose`,
         false
       );
 
       const storageOptimized = get(
         form,
-        `${IC_PKG_F_FILTER}.values.storage-optimized`,
+        `${IR_PKG_F_FILTER}.values.storage-optimized`,
         false
       );
 
       const memoryOptimized = get(
         form,
-        `${IC_PKG_F_FILTER}.values.memory-optimized`,
+        `${IR_PKG_F_FILTER}.values.memory-optimized`,
         false
       );
 
-      const vmSelected = get(values, IC_IMG_V_VMS, true);
-      const pkgSelected = get(form, `${IC_PKG_F_SELECT}.values.package`, null);
+      const vmSelected = get(values, IR_IMG_V_VMS, true);
+      const pkgSelected = get(form, `${IR_PKG_F_SELECT}.values.package`, null);
       const selected = find(packages, ['id', pkgSelected]);
 
       const sorted = sortBy(packages, [_sortBy]);
@@ -242,18 +242,18 @@ export default compose(
     },
     (dispatch, { history }) => ({
       handleResetFilters: () => {
-        dispatch(destroy(IC_PKG_F_FILTER));
+        dispatch(destroy(IR_PKG_F_FILTER));
       },
       handleRowClick: id => {
-        dispatch(change(IC_PKG_F_SELECT, 'package', id));
+        dispatch(change(IR_PKG_F_SELECT, 'package', id));
       },
       handleSortBy: (newSortBy, sortOrder) => {
         dispatch([
           set({
-            name: IC_PKG_V_SORT_ORDER,
+            name: IR_PKG_V_SORT_ORDER,
             value: sortOrder === 'desc' ? 'asc' : 'desc'
           }),
-          set({ name: IC_PKG_V_SORT_BY, value: newSortBy })
+          set({ name: IR_PKG_V_SORT_BY, value: newSortBy })
         ]);
       }
     })
diff --git a/packages/instance-steps/src/tags/index.js b/packages/instance-steps/src/tags/index.js
index cd9f7a83..fe130852 100644
--- a/packages/instance-steps/src/tags/index.js
+++ b/packages/instance-steps/src/tags/index.js
@@ -24,22 +24,23 @@ import {
   Button,
   TagsIcon,
   TagList as BaseTagList,
-  TagItem,
-  KeyValue
+  TagItem
 } from 'joyent-ui-toolkit';
 
+import { KeyValue } from 'joyent-ui-resource-widgets';
+
 import { addTag as validateTag } from '../validators';
 import { Forms, Values } from '../constants';
 
-const { IC_TAG_F_ADD, IC_TAG_F_EDIT } = Forms;
-const { IC_TAG_V_ADD_OPEN, IC_TAG_V_TAGS } = Values;
+const { IR_TAG_F_ADD, IR_TAG_F_EDIT } = Forms;
+const { IR_TAG_V_ADD_OPEN, IR_TAG_V_TAGS } = Values;
 
 const TagList = styled(BaseTagList)`
   margin-bottom: ${remcalc(-6)};
 `;
 
 const TagCount = ({ total = 0 }) => (
-  <Margin bottom={5}>
+  <Margin bottom="5">
     <H3>
       {total} Tag{total === 1 ? '' : 's'}
     </H3>
@@ -47,7 +48,7 @@ const TagCount = ({ total = 0 }) => (
 );
 
 const Tag = ({ name, value, onRemoveClick }) => (
-  <Margin right={1} bottom={1} key={`${name}-${value}`}>
+  <Margin right="1" bottom="1" key={`${name}-${value}`}>
     <TagItem iconFill="grey" onRemoveClick={onRemoveClick}>
       {name ? `${name}: ${value}` : value}
     </TagItem>
@@ -88,7 +89,7 @@ const TagsContainer = ({
       {({ next }) => (
         <Fragment>
           {tags.length ? (
-            <Margin top={5}>
+            <Margin top="5">
               <TagCount total={tags.length} />
               <TagList>
                 {tags.map(({ name, value }, index) => (
@@ -96,7 +97,7 @@ const TagsContainer = ({
                     name={name}
                     value={value}
                     onRemoveClick={() => handleRemoveTag(index)}
-                    id={'tag-' + index}
+                    id={`tag-${index}`}
                   />
                 ))}
               </TagList>
@@ -104,9 +105,9 @@ const TagsContainer = ({
           ) : null}
           {addOpen ? (
             <Fragment>
-              <Margin top={2}>
+              <Margin top="2">
                 <ReduxForm
-                  form={IC_TAG_F_ADD}
+                  form={IR_TAG_F_ADD}
                   destroyOnUnmount={false}
                   forceUnregisterOnUnmount={true}
                   shouldAsyncValidate={shouldAsyncValidate}
@@ -131,12 +132,12 @@ const TagsContainer = ({
               </Margin>
             </Fragment>
           ) : (
-            <Margin top={5}>
+            <Margin top="5">
               <Flex>
                 <FlexItem>
-                  <Margin right={1}>
+                  <Margin right="1">
                     <Button
-                      id={'add-tag-button'}
+                      id="add-tag-button"
                       type="button"
                       onClick={() => handleChangeAddOpen(true)}
                       secondary
@@ -147,7 +148,7 @@ const TagsContainer = ({
                 </FlexItem>
                 <FlexItem>
                   <Button
-                    id={'next-button-tags'}
+                    id="next-button-tags"
                     type="button"
                     component={Link}
                     to={next}
@@ -166,8 +167,8 @@ const TagsContainer = ({
 
 export default compose(
   connect(({ values }, ownProps) => {
-    const addOpen = get(values, IC_TAG_V_ADD_OPEN, false);
-    const tags = get(values, IC_TAG_V_TAGS, []);
+    const addOpen = get(values, IR_TAG_V_ADD_OPEN, false);
+    const tags = get(values, IR_TAG_V_TAGS, []);
 
     return {
       handleGetValue: () => tags,
@@ -181,19 +182,19 @@ export default compose(
     },
     handleValidate: validateTag,
     handleAddTag: value => {
-      const toggleToClosed = set({ name: IC_TAG_V_ADD_OPEN, value: false });
+      const toggleToClosed = set({ name: IR_TAG_V_ADD_OPEN, value: false });
 
       const appendTag = set({
-        name: IC_TAG_V_TAGS,
+        name: IR_TAG_V_TAGS,
         value: tags.concat([{ ...value, expanded: false }])
       });
 
-      return dispatch([destroy(IC_TAG_F_ADD), toggleToClosed, appendTag]);
+      return dispatch([destroy(IR_TAG_F_ADD), toggleToClosed, appendTag]);
     },
     handleChangeAddOpen: value => {
       return dispatch([
-        reset(IC_TAG_F_ADD),
-        set({ name: IC_TAG_V_ADD_OPEN, value })
+        reset(IR_TAG_F_ADD),
+        set({ name: IR_TAG_V_ADD_OPEN, value })
       ]);
     },
     handleCancelEdit: index => {
@@ -203,16 +204,16 @@ export default compose(
       };
 
       return dispatch([
-        reset(IC_TAG_F_EDIT(index)),
-        set({ name: IC_TAG_V_TAGS, value: tags.slice() })
+        reset(IR_TAG_F_EDIT(index)),
+        set({ name: IR_TAG_V_TAGS, value: tags.slice() })
       ]);
     },
     handleRemoveTag: index => {
       tags.splice(index, 1);
 
       return dispatch([
-        destroy(IC_TAG_F_EDIT(index)),
-        set({ name: IC_TAG_V_TAGS, value: tags.slice() })
+        destroy(IR_TAG_F_EDIT(index)),
+        set({ name: IR_TAG_V_TAGS, value: tags.slice() })
       ]);
     }
   }))
diff --git a/packages/instance-steps/src/user-script/components.js b/packages/instance-steps/src/user-script/components.js
index 1fd1bdd4..8bfc4c7a 100644
--- a/packages/instance-steps/src/user-script/components.js
+++ b/packages/instance-steps/src/user-script/components.js
@@ -2,7 +2,7 @@ import React, { PureComponent, Fragment } from 'react';
 import { Field } from 'redux-form';
 import { Margin } from 'styled-components-spacing';
 
-import { FormGroup, H3, Button } from 'joyent-ui-toolkit';
+import { FormGroup, H3 } from 'joyent-ui-toolkit';
 import Editor from 'joyent-ui-toolkit/dist/es/editor';
 
 class EditorField extends PureComponent {
@@ -24,7 +24,7 @@ export default () => (
 );
 
 export const Overview = ({ lines }) => (
-  <Margin top={3}>
+  <Margin top="3">
     {lines ? (
       <Fragment>
         <H3>
diff --git a/packages/instance-steps/src/user-script/index.js b/packages/instance-steps/src/user-script/index.js
index 7cd7abda..d007edd5 100644
--- a/packages/instance-steps/src/user-script/index.js
+++ b/packages/instance-steps/src/user-script/index.js
@@ -19,8 +19,8 @@ import { ScriptIcon, Button } from 'joyent-ui-toolkit';
 import { Forms, Values } from '../constants';
 import UserScriptForm, { Overview } from './components';
 
-const { IC_US_F } = Forms;
-const { IC_US_V_OPEN } = Values;
+const { IR_US_F } = Forms;
+const { IR_US_V_OPEN } = Values;
 
 const UserScript = ({
   handleGetValue,
@@ -43,9 +43,9 @@ const UserScript = ({
     </StepPreview>
     <StepOutlet>
       {({ next }) => (
-        <Margin top={5}>
+        <Margin top="5">
           <ReduxForm
-            form={IC_US_F}
+            form={IR_US_F}
             destroyOnUnmount={false}
             forceUnregisterOnUnmount={true}
             onSubmit={handleSubmit}
@@ -53,9 +53,9 @@ const UserScript = ({
             {props => (
               <Fragment>
                 <UserScriptForm {...props} />
-                <Margin top={5}>
+                <Margin top="5">
                   <Button
-                    id={'next-button-userscript'}
+                    id="next-button-userscript"
                     type="button"
                     component={Link}
                     to={next}
@@ -75,8 +75,8 @@ const UserScript = ({
 export default compose(
   connect(
     ({ values, form }, ownProps) => {
-      const formOpen = get(values, IC_US_V_OPEN, false);
-      const script = get(form, `${IC_US_F}.values.value`, '');
+      const formOpen = get(values, IR_US_V_OPEN, false);
+      const script = get(form, `${IR_US_F}.values.value`, '');
       const lines = script.trim() === '' ? 0 : script.trim().split('\n').length;
 
       return {
@@ -90,13 +90,13 @@ export default compose(
     },
     (dispatch, { history }) => ({
       handleEdit: () => {
-        dispatch([set({ name: IC_US_V_OPEN, value: true })]);
+        dispatch([set({ name: IR_US_V_OPEN, value: true })]);
       },
       handleChangeOpenForm: value => {
-        return dispatch([set({ name: IC_US_V_OPEN, value })]);
+        return dispatch([set({ name: IR_US_V_OPEN, value })]);
       },
       handleSubmit: value => {
-        dispatch([set({ name: IC_US_V_OPEN, value: false })]);
+        dispatch([set({ name: IR_US_V_OPEN, value: false })]);
       }
     })
   )
diff --git a/packages/logos/.eslintrc b/packages/logos/.eslintrc
deleted file mode 100644
index 54492a1a..00000000
--- a/packages/logos/.eslintrc
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "extends": "joyent-portal",
-  "rules": {
-    "no-console": 1,
-    "new-cap": 0,
-    "jsx-a11y/href-no-hash": 0
-  }
-}
diff --git a/packages/logos/package.json b/packages/logos/package.json
index dcbfca52..4c8a0c97 100644
--- a/packages/logos/package.json
+++ b/packages/logos/package.json
@@ -14,8 +14,6 @@
     "build:lib": "NODE_ENV=production redrun -p build:es build:umd",
     "build:bundle": "echo 0",
     "prepublish": "NODE_ENV=production redrun build:lib",
-    "lint": "redrun lint:ci -- --fix",
-    "lint:ci": "NODE_ENV=test eslint . --ext .js --ext .md",
     "test": "echo 0",
     "test:ci": "redrun test",
     "build:es": "babel src --out-dir dist/es",
diff --git a/packages/resource-step/package.json b/packages/resource-step/package.json
index ef34c107..0941d486 100644
--- a/packages/resource-step/package.json
+++ b/packages/resource-step/package.json
@@ -14,8 +14,6 @@
     "build:lib": "NODE_ENV=production redrun -p build:es build:umd",
     "build:bundle": "echo 0",
     "prepublish": "NODE_ENV=production redrun build:lib",
-    "lint": "redrun lint:ci -- --fix",
-    "lint:ci": "NODE_ENV=test eslint . --ext .js --ext .md",
     "test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
     "test:ci": "redrun test",
     "build:es": "babel src --out-dir dist/es",
@@ -24,6 +22,7 @@
   "dependencies": {
     "joy-react-broadcast": "^0.6.9",
     "joyent-react-styled-flexboxgrid": "^2.2.3",
+    "lodash.isfunction": "^3.0.9",
     "react-router-dom": "^4.2.2",
     "styled-components-spacing": "^2.1.3",
     "styled-flex-component": "^2.2.2"
diff --git a/packages/resource-step/src/index.js b/packages/resource-step/src/index.js
index 79c5ea90..9207350a 100644
--- a/packages/resource-step/src/index.js
+++ b/packages/resource-step/src/index.js
@@ -1,4 +1,5 @@
 import React, { Fragment, PureComponent } from 'react';
+import { withRouter } from 'react-router';
 import { Broadcast, Subscriber } from 'joy-react-broadcast';
 import { Link as BaseLink } from 'react-router-dom';
 import Flex, { FlexItem } from 'styled-flex-component';
@@ -6,6 +7,7 @@ import { Margin, Padding } from 'styled-components-spacing';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import styled from 'styled-components';
 import is from 'styled-is';
+import isFunction from 'lodash.isfunction';
 import remcalc from 'remcalc';
 
 import {
@@ -17,7 +19,7 @@ import {
   ArrowIcon
 } from 'joyent-ui-toolkit';
 
-import { Saved as SavedIcon, Error as ErrorIcon } from './status-icon';
+import { Error as ErrorIcon } from './status-icon';
 
 import { QueryBreakpoints } from 'joyent-ui-toolkit';
 
@@ -29,7 +31,7 @@ const Card = styled(BaseCard)`
   `};
 
   ${is('expanded')`
-    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 ${remcalc(2)} ${remcalc(12)} rgba(0, 0, 0, 0.1);
   `};
 }`;
 
@@ -41,11 +43,11 @@ const Link = styled(BaseLink)`
   }
 `;
 
-export const Header = ({ icon = null, children }) => (
+export const Header = withRouter(({ icon = null, location, children }) => (
   <Subscriber channel="create-resource-group">
     {({ namespace }) => (
       <Subscriber channel="create-resource-step">
-        {({ expanded, optional, saved, name, isValid }) => (
+        {({ expanded, optional, saved, name, isValid, readOnly }) => (
           <Fragment>
             <Flex justifyBetween>
               <FlexItem>
@@ -60,7 +62,7 @@ export const Header = ({ icon = null, children }) => (
                   </FlexItem>
                   {/* improve this */}
                   <Medium>
-                    {optional ? (
+                    {readOnly && optional ? (
                       <Fragment>
                         <FlexItem>
                           <Margin horizontal="1">
@@ -75,21 +77,25 @@ export const Header = ({ icon = null, children }) => (
                   </Medium>
                 </Flex>
               </FlexItem>
-              <FlexItem alignCenter>
-                <Link to={expanded ? `/${namespace}` : `/${namespace}/${name}`}>
-                  <Flex alignCenter>
-                    {expanded ? 'Save and Collapse' : 'Edit'}
-                    <Margin left="1">
-                      <Flex>
-                        <ArrowIcon
-                          fill="primary"
-                          direction={expanded ? 'up' : 'down'}
-                        />
-                      </Flex>
-                    </Margin>
-                  </Flex>
-                </Link>
-              </FlexItem>
+              {readOnly ? null : (
+                <FlexItem alignCenter>
+                  <Link
+                    to={expanded ? `/${namespace}` : `/${namespace}/${name}`}
+                  >
+                    <Flex alignCenter>
+                      {expanded ? 'Save and Collapse' : 'Edit'}
+                      <Margin left="1">
+                        <Flex>
+                          <ArrowIcon
+                            fill="primary"
+                            direction={expanded ? 'up' : 'down'}
+                          />
+                        </Flex>
+                      </Margin>
+                    </Flex>
+                  </Link>
+                </FlexItem>
+              )}
               {!expanded && !isValid ? (
                 <FlexItem>
                   <ErrorIcon />
@@ -106,7 +112,7 @@ export const Header = ({ icon = null, children }) => (
       </Subscriber>
     )}
   </Subscriber>
-);
+));
 
 export const Description = ({ href = '', children }) => (
   <Subscriber channel="create-resource-step">
@@ -126,8 +132,8 @@ export const Description = ({ href = '', children }) => (
 
 export const Preview = ({ children }) => (
   <Subscriber channel="create-resource-step">
-    {({ expanded, saved }) =>
-      !expanded && saved ? <Fragment>{children}</Fragment> : null
+    {({ expanded, saved, readOnly }) =>
+      !expanded && (saved || readOnly) ? <Fragment>{children}</Fragment> : null
     }
   </Subscriber>
 );
@@ -136,8 +142,10 @@ export const Outlet = ({ children }) => (
   <Subscriber channel="create-resource-group">
     {({ namespace }) => (
       <Subscriber channel="create-resource-step">
-        {({ expanded, next }) =>
-          expanded ? children({ next: `/${namespace}/${next}` }) : null
+        {({ expanded, next, readOnly }) =>
+          expanded && isFunction(children) && !readOnly
+            ? children({ next: `/${namespace}/${next}` })
+            : null
         }
       </Subscriber>
     )}
@@ -166,13 +174,14 @@ export default class Step extends PureComponent {
       next = '',
       name = '',
       isValid = true,
+      readOnly = false,
       children
     } = this.props;
 
     return (
       <Broadcast
         channel="create-resource-step"
-        value={{ expanded, optional, saved, next, name, isValid }}
+        value={{ expanded, optional, saved, next, name, isValid, readOnly }}
       >
         <Card expanded={expanded} error={!expanded && !isValid}>
           <CardOutlet>
diff --git a/packages/resource-step/src/status-icon.js b/packages/resource-step/src/status-icon.js
index bf625122..2b8672c2 100644
--- a/packages/resource-step/src/status-icon.js
+++ b/packages/resource-step/src/status-icon.js
@@ -60,7 +60,6 @@ export const Saved = ({ inverted, children }) => {
 export const Error = ({ inverted = false, noLabel = false, children }) => {
   const fill = inverted ? 'red' : 'white';
   const iconFill = inverted ? 'white' : 'redDark';
-  console.log(inverted, fill, iconFill);
 
   return (
     <StatusIcon
diff --git a/packages/resource-widgets/package.json b/packages/resource-widgets/package.json
index 5e78bd98..e3be3408 100644
--- a/packages/resource-widgets/package.json
+++ b/packages/resource-widgets/package.json
@@ -24,8 +24,14 @@
   "dependencies": {
     "joyent-react-styled-flexboxgrid": "^2.2.3",
     "joyent-ui-toolkit": "^6.0.1",
+    "param-case": "^2.1.1",
+    "plur": "^3.0.1",
+    "prop-types": "^15.6.1",
+    "remcalc": "^1.0.10",
     "styled-components-spacing": "^2.1.3",
-    "styled-flex-component": "^2.2.2"
+    "styled-flex-component": "^2.2.2",
+    "styled-is": "^1.1.3",
+    "title-case": "^2.1.1"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
@@ -37,6 +43,9 @@
     "redrun": "^6.0.2"
   },
   "peerDependencies": {
-    "react": "^16.3.1"
+    "react": "^16.3.1",
+    "styled-components": "^3.2.6",
+    "react-router-dom": "^4.2.2",
+    "redux-form": "^7.3.0"
   }
 }
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 52791ed6..e3feff0b 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap
@@ -161,7 +161,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
 
 .c11:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c11:active,
@@ -497,7 +497,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
 
 .c11:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c11:active,
@@ -686,6 +686,7 @@ exports[`renders <Header/> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c2 {
@@ -1109,6 +1110,7 @@ exports[`renders <HostnamesHeader /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c2 {
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 fd14f3c8..5c9ae819 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
@@ -183,6 +183,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c9 {
@@ -1531,6 +1532,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c8 {
@@ -1929,6 +1931,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c8 {
@@ -2327,6 +2330,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c8 {
@@ -2729,6 +2733,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c8 {
@@ -3135,6 +3140,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c8 {
@@ -3637,6 +3643,7 @@ Array [
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c9 {
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 c552052d..a0bbdda3 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
@@ -157,12 +157,13 @@ exports[`renders <Network /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c16 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -765,11 +766,13 @@ exports[`renders <Network /> without throwing 2`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c6 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0rem;
   margin-left: 0;
   margin-right: 0;
 }
@@ -1073,12 +1076,13 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c16 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -1692,11 +1696,13 @@ exports[`renders <Network {...network} /> without throwing 2`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c6 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0rem;
   margin-left: 0;
   margin-right: 0;
 }
@@ -2002,12 +2008,13 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c16 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -2621,11 +2628,13 @@ exports[`renders <Network {...network} /> without throwing 4`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c6 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0rem;
   margin-left: 0;
   margin-right: 0;
 }
@@ -2940,12 +2949,13 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c16 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -3654,11 +3664,13 @@ exports[`renders <Network {...network} fabric /> without throwing 2`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c6 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0rem;
   margin-left: 0;
   margin-right: 0;
 }
@@ -4008,6 +4020,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c33 {
@@ -4023,7 +4036,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
 .c16 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -4882,11 +4895,13 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c6 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0rem;
   margin-left: 0;
   margin-right: 0;
 }
@@ -5192,12 +5207,13 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c16 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -5810,11 +5826,13 @@ exports[`renders <Network {...network} public /> without throwing 2`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c6 {
   height: 1px;
   background-color: rgb(216,216,216);
+  height: 0rem;
   margin-left: 0;
   margin-right: 0;
 }
diff --git a/packages/resource-widgets/src/__tests__/firewall.spec.js b/packages/resource-widgets/src/__tests__/firewall.spec.js
index 7d74a89a..5a013580 100644
--- a/packages/resource-widgets/src/__tests__/firewall.spec.js
+++ b/packages/resource-widgets/src/__tests__/firewall.spec.js
@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
diff --git a/packages/resource-widgets/src/__tests__/network.spec.js b/packages/resource-widgets/src/__tests__/network.spec.js
index 6a6f34cd..b4735003 100644
--- a/packages/resource-widgets/src/__tests__/network.spec.js
+++ b/packages/resource-widgets/src/__tests__/network.spec.js
@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
diff --git a/packages/resource-widgets/src/cns/index.js b/packages/resource-widgets/src/cns/index.js
index 0e7defe3..d9f3469e 100644
--- a/packages/resource-widgets/src/cns/index.js
+++ b/packages/resource-widgets/src/cns/index.js
@@ -55,9 +55,9 @@ const Form = styled.form`
 `;
 
 export const Header = () => (
-  <Margin bottom={5}>
+  <Margin bottom="5">
     <H3>CNS Default Hostnames</H3>
-    <Margin top={2}>
+    <Margin top="2">
       <P>
         Default hostnames are automatically generated from both the instance
         name and any attached networks.
@@ -68,11 +68,11 @@ export const Header = () => (
 
 export const Footer = ({ enabled, submitting, onToggle }) => (
   <Fragment>
-    <Margin bottom={3}>
+    <Margin bottom="3">
       <FormGroup name="cns-enabled">
         <Flex alignCenter>
           <FormLabel disabled={submitting}>Disabled CNS</FormLabel>
-          <Margin left={1}>
+          <Margin left="1">
             <Toggle checked={enabled} onChange={onToggle} disabled={submitting}>
               Enabled CNS
             </Toggle>
@@ -84,9 +84,9 @@ export const Footer = ({ enabled, submitting, onToggle }) => (
 );
 
 export const HostnamesHeader = () => (
-  <Margin vertical={5}>
+  <Margin vertical="5">
     <H3>CNS Service hostnames</H3>
-    <Margin top={2}>
+    <Margin top="2">
       <P>
         CNS service hostnames are created by attaching a CNS service name to one
         or more instances. You can serve multiple instances under the same
@@ -103,14 +103,14 @@ export const AddServiceForm = ({
   pristine,
   invalid
 }) => (
-  <Margin bottom={3}>
+  <Margin bottom="3">
     <Form onSubmit={handleSubmit}>
       <Flex wrap alignCenter={invalid} alignEnd={!invalid}>
         <FlexItem>
           <Flex collumn>
             <FormGroup name="name" field={Field}>
               <FormLabel>Attach to new CNS service name</FormLabel>
-              <Margin top={0.5}>
+              <Margin top="0.5">
                 <Input
                   onBlur={null}
                   type="text"
@@ -123,7 +123,7 @@ export const AddServiceForm = ({
           </Flex>
         </FlexItem>
         <FlexItem>
-          <Margin left={2}>
+          <Margin left="2">
             <Button
               type="submit"
               disabled={submitting}
@@ -155,11 +155,13 @@ export const Hostname = ({
             ? 'Network CNS service'
             : network
               ? 'Network'
-              : service ? 'CNS service' : 'Instance name'}{' '}
+              : service
+                ? 'CNS service'
+                : 'Instance name'}{' '}
           hostname{values.length === 1 ? '' : 's'}
         </SmallBordered>
         <FlexItem>
-          <Margin bottom={0.5} right={1}>
+          <Margin bottom="0.5" right="1">
             {hostname.public ? <PublicIcon /> : <PrivateIcon />}
           </Margin>
         </FlexItem>
@@ -169,7 +171,7 @@ export const Hostname = ({
       </Flex>
       {values.map((value, i) => (
         <Margin
-          top={0.5}
+          top="0.5"
           bottom={
             values.length !== 1 && values.length !== i + 1 ? '1' : undefined
           }
@@ -207,20 +209,20 @@ const CnsHostnames = ({
     <HostnamesHeader />
     {children}
     {services.length ? (
-      <Margin bottom={3}>
+      <Margin bottom="3">
         <FormLabel>Existing CNS service name(s)</FormLabel>
-        <Margin top={1}>
+        <Margin top="1">
           <TagList>
             {services.map((value, index) => (
               <Margin right={1} bottom={1}>
                 <TagItem
                   active
-                  fill={'rgba(66, 134, 244, 0.1)'}
+                  fill="rgba(66, 134, 244, 0.1)"
                   key={value}
                   onRemoveClick={
                     onRemoveService && (() => onRemoveService(value))
                   }
-                  id={'cns-tag-' + index}
+                  id={`cns-tag-${index}`}
                 >
                   {value}
                 </TagItem>
@@ -232,7 +234,7 @@ const CnsHostnames = ({
     ) : null}
     {hostnames.length &&
     hostnames.filter(({ values }) => values.length).length ? (
-      <Margin top={5}>
+      <Margin top="5">
         <Flex column>
           {hostnames.map(({ value, ...hostname }, index) => (
             <Hostname
@@ -261,10 +263,10 @@ export default ({
       copy={copy}
       hostnames={hostnames.filter(({ service }) => !service)}
     />
-    <Margin top={2}>
+    <Margin top="2">
       <ShortDivider height={remcalc(1)} />
     </Margin>
-    <Margin top={5}>
+    <Margin top="5">
       <CnsHostnames
         copy={copy}
         services={services}
diff --git a/packages/resource-widgets/src/empty/index.js b/packages/resource-widgets/src/empty/index.js
index 7dc51012..cc786a11 100644
--- a/packages/resource-widgets/src/empty/index.js
+++ b/packages/resource-widgets/src/empty/index.js
@@ -27,7 +27,7 @@ export default ({ children, ...rest }) => (
   <FullWidthCard {...rest}>
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
-        <Margin bottom={2}>
+        <Margin bottom="2">
           <EmptyState />
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>
diff --git a/packages/resource-widgets/src/firewall/index.js b/packages/resource-widgets/src/firewall/index.js
index 35b79c95..0c1b7b4b 100644
--- a/packages/resource-widgets/src/firewall/index.js
+++ b/packages/resource-widgets/src/firewall/index.js
@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import React, { Fragment } from 'react';
 import { Field } from 'redux-form';
 import { Margin, Padding } from 'styled-components-spacing';
@@ -10,7 +9,6 @@ import {
   H3,
   FormGroup,
   FormLabel,
-  Toggle,
   TagList,
   TagItem,
   P,
@@ -41,7 +39,7 @@ const parsePartial = (p, index, style) => {
     const name = Array.isArray(p[1]) ? p[1][0] : p[1];
 
     return (
-      <Margin left={0.5}>
+      <Margin left="0.5">
         <TagList>
           <TagItem
             style={style}
@@ -56,7 +54,7 @@ const parsePartial = (p, index, style) => {
   }
 
   return (
-    <Margin key={index} top={0.5} bottom={0.5}>
+    <Margin key={index} top="0.5" bottom="0.5">
       <P style={style}>{p[1]}</P>
     </Margin>
   );
@@ -73,11 +71,11 @@ const Rule = ({ enabled, rule_obj }) => {
   const tos = rule_obj.to.map((p, index) => parsePartial(p, index, style));
   return (
     <Card disabled={!enabled}>
-      <Padding left={3} right={3} top={2} bottom={2}>
+      <Padding left="3" right="3" top="2" bottom="2">
         <Row>
           <Col xs={3}>
             <Flex justifyStart alignCenter contentStretch>
-              <Margin right={0.5}>
+              <Margin right="0.5">
                 <FlexItem>
                   <Strong style={style}>From: </Strong>
                 </FlexItem>
@@ -87,7 +85,7 @@ const Rule = ({ enabled, rule_obj }) => {
           </Col>
           <Col xs={3}>
             <Flex justifyStart alignCenter contentStretch>
-              <Margin right={0.5}>
+              <Margin right="0.5">
                 <FlexItem>
                   <Strong style={style}>To: </Strong>
                 </FlexItem>
@@ -97,7 +95,7 @@ const Rule = ({ enabled, rule_obj }) => {
           </Col>
           <Col xs={2}>
             <Flex justifyStart alignCenter contentStretch>
-              <Margin right={0.5}>
+              <Margin right="0.5">
                 <FlexItem>
                   <Strong style={style}>Protocol: </Strong>
                 </FlexItem>
@@ -109,7 +107,7 @@ const Rule = ({ enabled, rule_obj }) => {
           </Col>
           <Col xs={2}>
             <Flex justifyStart alignCenter contentStretch>
-              <Margin right={0.5}>
+              <Margin right="0.5">
                 <FlexItem>
                   <Strong style={style}>Ports: </Strong>
                 </FlexItem>
@@ -121,7 +119,7 @@ const Rule = ({ enabled, rule_obj }) => {
           </Col>
           <Col xs={2}>
             <Flex justifyStart alignCenter contentStretch>
-              <Margin right={0.5}>
+              <Margin right="0.5">
                 <FlexItem>
                   <Strong style={style}>Action: </Strong>
                 </FlexItem>
@@ -150,7 +148,7 @@ export const Rules = ({ rules = [] }) => (
 export const DefaultRules = ({ rules = [] }) => (
   <Fragment>
     <H3 noMargin>Default firewall rules</H3>
-    <Margin top={3}>
+    <Margin top="3">
       <Rules rules={rules} />
     </Margin>
   </Fragment>
@@ -159,7 +157,7 @@ export const DefaultRules = ({ rules = [] }) => (
 export const TagRules = ({ rules = [] }) => (
   <Fragment>
     <H3 noMargin>Firewall rules from instance tags</H3>
-    <Margin top={3}>
+    <Margin top="3">
       <Rules rules={rules} />
     </Margin>
   </Fragment>
@@ -178,14 +176,14 @@ export const ToggleFirewallForm = ({
   return (
     <Form onChange={onChange}>
       <FormGroup
-        id={'fw-toggle-firewall'}
+        id="fw-toggle-firewall"
         type="checkbox"
         name="enabled"
         field={Field}
       >
         <Checkbox disabled={submitting}>
           <FormLabel noMargin actionable>
-            <Margin left={2} right={2}>
+            <Margin left="2" right="2">
               Enable Firewall
             </Margin>
           </FormLabel>
@@ -198,14 +196,14 @@ export const ToggleFirewallForm = ({
 export const ToggleInactiveForm = () => (
   <Form>
     <FormGroup
-      id={'fw-toggle-inactive'}
+      id="fw-toggle-inactive"
       type="checkbox"
       name="inactive"
       field={Field}
     >
       <Checkbox>
         <FormLabel noMargin actionable>
-          <Margin left={2} right={2}>
+          <Margin left="2" right="2">
             Show inactive rules
           </Margin>
         </FormLabel>
diff --git a/packages/resource-widgets/src/index.js b/packages/resource-widgets/src/index.js
index 3fa39c90..23213ea6 100644
--- a/packages/resource-widgets/src/index.js
+++ b/packages/resource-widgets/src/index.js
@@ -1,5 +1,6 @@
 export { default as Network } from './network';
 export { default as Empty } from './empty';
+
 export {
   Rules,
   TagRules,
@@ -7,8 +8,17 @@ export {
   ToggleFirewallForm,
   ToggleInactiveForm
 } from './firewall';
+
 export {
   default as Cns,
   Footer as CnsFooter,
   AddServiceForm as CnsAddServiceForm
 } from './cns';
+
+export {
+  default as PostCreation,
+  Title as PostCreationTitle,
+  Content as PostCreationContent
+} from './post';
+
+export { default as KeyValue } from './key-value';
diff --git a/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap b/packages/resource-widgets/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
similarity index 89%
rename from packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
rename to packages/resource-widgets/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
index 571c51b1..b2fa3903 100644
--- a/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
+++ b/packages/resource-widgets/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
@@ -1,36 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <KeyValue /> without throwing 1`] = `
-.c19 {
+.c18 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c23 {
+.c22 {
   margin-top: 0.1875rem;
 }
 
-.c24 {
+.c23 {
   margin-top: 0.75rem;
 }
 
-.c35 {
+.c34 {
   margin-right: 0.75rem;
 }
 
-.c6 {
+.c5 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c13 {
+.c12 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
-.c21 {
+.c20 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -49,26 +49,46 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
+.c24 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c21 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
 .c25 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
 }
 
-.c22 {
+.c32 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -78,27 +98,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   display: block;
 }
 
-.c26 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c33 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -126,7 +126,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   align-items: center;
 }
 
-.c14 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -156,7 +156,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c15 {
+.c14 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -176,7 +176,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c31 {
+.c30 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -188,262 +188,30 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   appearance: button;
 }
 
-.c31::-moz-focus-inner,
-.c31[type='button']::-moz-focus-inner,
-.c31[type='reset']::-moz-focus-inner,
-.c31[type='submit']::-moz-focus-inner {
+.c30::-moz-focus-inner,
+.c30[type='button']::-moz-focus-inner,
+.c30[type='reset']::-moz-focus-inner,
+.c30[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c31:-moz-focusring,
-.c31[type='button']:-moz-focusring,
-.c31[type='reset']:-moz-focusring,
-.c31[type='submit']:-moz-focusring {
+.c30:-moz-focusring,
+.c30[type='button']:-moz-focusring,
+.c30[type='reset']:-moz-focusring,
+.c30[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 {
-  margin: 0;
-  color: rgb(73,73,73);
-  font-weight: 600;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c1 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-}
-
-.c4 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  min-height: auto;
-  height: 2.875rem;
-  -webkit-flex: 0 0 2.875rem;
-  -ms-flex: 0 0 2.875rem;
-  flex: 0 0 2.875rem;
-}
-
-.c12 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c11 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
-.c3 {
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  z-index: 1;
-  line-height: 1.5rem;
-  max-width: 100%;
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-}
-
-.c9 {
-  box-sizing: border-box;
-  min-height: 2.9375rem;
-  max-width: 100%;
-  width: auto;
-  height: auto;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  overflow: hidden;
-  background-color: transparent;
-  border-width: 0;
-  box-shadow: none;
-  color: inherit;
-}
-
-.c16 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-  width: 100%;
-}
-
-.c20 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  height: 3rem;
-  min-height: 3rem;
-  padding: 0.8125rem 0.75rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgb(73,73,73);
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
-}
-
-.c20:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c20::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:invalid {
-  box-shadow: none;
-}
-
-.c20:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-}
-
-.c20:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c18 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c17 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c30 {
+.c29 {
   min-width: 7.5rem;
 }
 
-.c29 {
+.c28 {
   display: inline-block;
 }
 
-.c28 {
+.c27 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -486,7 +254,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c28:focus {
+.c27:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -494,43 +262,43 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c28[disabled] {
+.c27[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c28:focus {
+.c27:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32 {
+.c31 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -574,7 +342,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c32:focus {
+.c31:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -582,43 +350,43 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c31:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c32[disabled] {
+.c31[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c31:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c31:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c34 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -674,7 +442,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   float: right;
 }
 
-.c34:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -682,89 +450,317 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c34:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c34[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c34:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c34:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c34:focus {
+.c33:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:hover {
+.c33:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
+.c17 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+.c9 {
+  margin: 0;
+  color: rgb(73,73,73);
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
 .c0 {
-  margin-bottom: 0;
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.c3 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+}
+
+.c11 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c10 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
 }
 
 .c2 {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  line-height: 1.5rem;
+  max-width: 100%;
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c27 {
+.c8 {
+  box-sizing: border-box;
+  min-height: 2.9375rem;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  overflow: hidden;
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+  color: inherit;
+}
+
+.c15 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c19 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  padding: 0.8125rem 0.75rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(73,73,73);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c19:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c19::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:invalid {
+  box-shadow: none;
+}
+
+.c19:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c19:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c1 {
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.c26 {
   margin-right: 0.375rem;
 }
 
-.c5 {
+.c4 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c8 {
+.c7 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c24 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -773,7 +769,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c24 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -782,7 +778,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c22 {
+  .c21 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -791,7 +787,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c25 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -800,39 +796,38 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c32 {
     display: none;
   }
 }
 
 <form
-  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c1"
+    className="c0"
     disabled={false}
     name="card"
   >
     <div
-      className="c2 c3 c4"
+      className="c1 c2 c3"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c5 c6"
+        className="c4 c5"
       >
         <div
-          className="c7"
+          className="c6"
         >
           <div
-            className="c8 c9 c4"
+            className="c7 c8 c3"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c10"
+              className="c9"
             >
               Add metadata
             </h4>
@@ -841,29 +836,29 @@ exports[`renders <KeyValue /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c10 c11"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c13"
+        className="c12"
       >
         <div
-          className="c14"
+          className="c13"
           wrap={true}
         >
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
@@ -871,55 +866,55 @@ exports[`renders <KeyValue /> without throwing 1`] = `
                 key
               </label>
               <div
-                className="c19"
+                className="c18"
               >
                 <input
-                  className="c20"
+                  className="c19"
                   disabled={false}
                   id={null}
                   onBlur={null}
                 />
                 <div
-                  className="c21"
+                  className="c20"
                 >
                   <div
-                    className="c22"
+                    className="c21"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
                  value
               </label>
               <div
-                className="c23"
+                className="c22"
               >
                 <input
-                  className="c20"
+                  className="c19"
                   disabled={false}
                   id={null}
                   onBlur={null}
                 />
                 <div
-                  className="c21"
+                  className="c20"
                 >
                   <div
-                    className="c22"
+                    className="c21"
                   />
                 </div>
               </div>
@@ -927,16 +922,16 @@ exports[`renders <KeyValue /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c24"
+          className="c23"
         >
           <div
-            className="c25"
+            className="c24"
           >
             <div
-              className="c26"
+              className="c25"
             >
               <button
-                className="c27 c28 c29 c30 c31"
+                className="c26 c27 c28 c29 c30"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -949,7 +944,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c32 c29 c30 c31"
+                className="c31 c28 c29 c30"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -962,10 +957,10 @@ exports[`renders <KeyValue /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c33"
+              className="c32"
             >
               <button
-                className="c34 c29 c30 c31"
+                className="c33 c28 c29 c30"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -975,7 +970,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c35"
+                  className="c34"
                 >
                   <svg
                     height="16"
@@ -1008,12 +1003,12 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
-.c6 {
+.c5 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1041,15 +1036,15 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
   align-items: center;
 }
 
-.c10 {
+.c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
 
-.c4 {
+.c3 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1076,7 +1071,7 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c1 {
+.c0 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1104,7 +1099,7 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c3 {
+.c2 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -1117,7 +1112,7 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c9 {
+.c8 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -1151,56 +1146,51 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
   color: inherit;
 }
 
-.c0 {
-  margin-bottom: 0;
-}
-
-.c2 {
+.c1 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c5 {
+.c4 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c8 {
+.c7 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 <form
-  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c1"
+    className="c0"
     disabled={false}
     name="card"
   >
     <div
-      className="c2 c3 c4"
+      className="c1 c2 c3"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c5 c6"
+        className="c4 c5"
       >
         <div
-          className="c7"
+          className="c6"
         >
           <div
-            className="c8 c9 c4"
+            className="c7 c8 c3"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c10"
+              className="c9"
             >
               Add metadata
             </h4>
@@ -1213,36 +1203,36 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue input="input" /> without throwing 1`] = `
-.c19 {
+.c18 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c23 {
+.c22 {
   margin-top: 0.1875rem;
 }
 
-.c24 {
+.c23 {
   margin-top: 0.75rem;
 }
 
-.c35 {
+.c34 {
   margin-right: 0.75rem;
 }
 
-.c6 {
+.c5 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c13 {
+.c12 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
-.c21 {
+.c20 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1261,26 +1251,46 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
+.c24 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c21 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
 .c25 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
 }
 
-.c22 {
+.c32 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1290,27 +1300,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   display: block;
 }
 
-.c26 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c33 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1338,7 +1328,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   align-items: center;
 }
 
-.c14 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1368,7 +1358,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c15 {
+.c14 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1388,7 +1378,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c31 {
+.c30 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1400,262 +1390,30 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   appearance: button;
 }
 
-.c31::-moz-focus-inner,
-.c31[type='button']::-moz-focus-inner,
-.c31[type='reset']::-moz-focus-inner,
-.c31[type='submit']::-moz-focus-inner {
+.c30::-moz-focus-inner,
+.c30[type='button']::-moz-focus-inner,
+.c30[type='reset']::-moz-focus-inner,
+.c30[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c31:-moz-focusring,
-.c31[type='button']:-moz-focusring,
-.c31[type='reset']:-moz-focusring,
-.c31[type='submit']:-moz-focusring {
+.c30:-moz-focusring,
+.c30[type='button']:-moz-focusring,
+.c30[type='reset']:-moz-focusring,
+.c30[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 {
-  margin: 0;
-  color: rgb(73,73,73);
-  font-weight: 600;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c1 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-}
-
-.c4 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  min-height: auto;
-  height: 2.875rem;
-  -webkit-flex: 0 0 2.875rem;
-  -ms-flex: 0 0 2.875rem;
-  flex: 0 0 2.875rem;
-}
-
-.c12 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c11 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
-.c3 {
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  z-index: 1;
-  line-height: 1.5rem;
-  max-width: 100%;
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-}
-
-.c9 {
-  box-sizing: border-box;
-  min-height: 2.9375rem;
-  max-width: 100%;
-  width: auto;
-  height: auto;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  overflow: hidden;
-  background-color: transparent;
-  border-width: 0;
-  box-shadow: none;
-  color: inherit;
-}
-
-.c16 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-  width: 100%;
-}
-
-.c20 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  height: 3rem;
-  min-height: 3rem;
-  padding: 0.8125rem 0.75rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgb(73,73,73);
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
-}
-
-.c20:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c20::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:invalid {
-  box-shadow: none;
-}
-
-.c20:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-}
-
-.c20:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c18 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c17 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c30 {
+.c29 {
   min-width: 7.5rem;
 }
 
-.c29 {
+.c28 {
   display: inline-block;
 }
 
-.c28 {
+.c27 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1698,7 +1456,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c28:focus {
+.c27:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1706,43 +1464,43 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c28[disabled] {
+.c27[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c28:focus {
+.c27:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32 {
+.c31 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1786,7 +1544,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c32:focus {
+.c31:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1794,43 +1552,43 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c31:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c32[disabled] {
+.c31[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c31:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c31:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c34 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1886,7 +1644,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   float: right;
 }
 
-.c34:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1894,89 +1652,317 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c34:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c34[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c34:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c34:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c34:focus {
+.c33:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:hover {
+.c33:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
+.c17 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+.c9 {
+  margin: 0;
+  color: rgb(73,73,73);
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
 .c0 {
-  margin-bottom: 0;
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.c3 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+}
+
+.c11 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c10 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
 }
 
 .c2 {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  line-height: 1.5rem;
+  max-width: 100%;
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c27 {
+.c8 {
+  box-sizing: border-box;
+  min-height: 2.9375rem;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  overflow: hidden;
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+  color: inherit;
+}
+
+.c15 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c19 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  padding: 0.8125rem 0.75rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(73,73,73);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c19:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c19::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:invalid {
+  box-shadow: none;
+}
+
+.c19:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c19:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c1 {
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.c26 {
   margin-right: 0.375rem;
 }
 
-.c5 {
+.c4 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c8 {
+.c7 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c24 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1985,7 +1971,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c24 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1994,7 +1980,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c22 {
+  .c21 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -2003,7 +1989,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c25 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -2012,39 +1998,38 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c32 {
     display: none;
   }
 }
 
 <form
-  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c1"
+    className="c0"
     disabled={false}
     name="card"
   >
     <div
-      className="c2 c3 c4"
+      className="c1 c2 c3"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c5 c6"
+        className="c4 c5"
       >
         <div
-          className="c7"
+          className="c6"
         >
           <div
-            className="c8 c9 c4"
+            className="c7 c8 c3"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c10"
+              className="c9"
             >
               Add metadata
             </h4>
@@ -2053,29 +2038,29 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c10 c11"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c13"
+        className="c12"
       >
         <div
-          className="c14"
+          className="c13"
           wrap={true}
         >
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
@@ -2083,55 +2068,55 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
                 key
               </label>
               <div
-                className="c19"
+                className="c18"
               >
                 <input
-                  className="c20"
+                  className="c19"
                   disabled={false}
                   id={null}
                   onBlur={null}
                 />
                 <div
-                  className="c21"
+                  className="c20"
                 >
                   <div
-                    className="c22"
+                    className="c21"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
                  value
               </label>
               <div
-                className="c23"
+                className="c22"
               >
                 <input
-                  className="c20"
+                  className="c19"
                   disabled={false}
                   id={null}
                   onBlur={null}
                 />
                 <div
-                  className="c21"
+                  className="c20"
                 >
                   <div
-                    className="c22"
+                    className="c21"
                   />
                 </div>
               </div>
@@ -2139,16 +2124,16 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c24"
+          className="c23"
         >
           <div
-            className="c25"
+            className="c24"
           >
             <div
-              className="c26"
+              className="c25"
             >
               <button
-                className="c27 c28 c29 c30 c31"
+                className="c26 c27 c28 c29 c30"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -2161,7 +2146,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c32 c29 c30 c31"
+                className="c31 c28 c29 c30"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -2174,10 +2159,10 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c33"
+              className="c32"
             >
               <button
-                className="c34 c29 c30 c31"
+                className="c33 c28 c29 c30"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -2187,7 +2172,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c35"
+                  className="c34"
                 >
                   <svg
                     height="16"
@@ -2220,69 +2205,89 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
-.c19 {
+.c18 {
   margin-top: 0.1875rem;
 }
 
-.c25 {
+.c23 {
   margin-top: 0.75rem;
 }
 
-.c35 {
+.c33 {
   margin-right: 0.75rem;
 }
 
-.c6 {
+.c5 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c13 {
+.c12 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
+.c13 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c24 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c20 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
 .c14 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
 }
 
-.c26 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c21 {
+.c31 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -2292,27 +2297,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   display: block;
 }
 
-.c15 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c33 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2340,7 +2325,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   align-items: center;
 }
 
-.c31 {
+.c29 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2352,355 +2337,30 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   appearance: button;
 }
 
-.c31::-moz-focus-inner,
-.c31[type='button']::-moz-focus-inner,
-.c31[type='reset']::-moz-focus-inner,
-.c31[type='submit']::-moz-focus-inner {
+.c29::-moz-focus-inner,
+.c29[type='button']::-moz-focus-inner,
+.c29[type='reset']::-moz-focus-inner,
+.c29[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c31:-moz-focusring,
-.c31[type='button']:-moz-focusring,
-.c31[type='reset']:-moz-focusring,
-.c31[type='submit']:-moz-focusring {
+.c29:-moz-focusring,
+.c29[type='button']:-moz-focusring,
+.c29[type='reset']:-moz-focusring,
+.c29[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 {
-  margin: 0;
-  color: rgb(73,73,73);
-  font-weight: 600;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c1 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-}
-
-.c4 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  min-height: auto;
-  height: 2.875rem;
-  -webkit-flex: 0 0 2.875rem;
-  -ms-flex: 0 0 2.875rem;
-  flex: 0 0 2.875rem;
-}
-
-.c12 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c11 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
-.c3 {
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  z-index: 1;
-  line-height: 1.5rem;
-  max-width: 100%;
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-}
-
-.c9 {
-  box-sizing: border-box;
-  min-height: 2.9375rem;
-  max-width: 100%;
-  width: auto;
-  height: auto;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  overflow: hidden;
-  background-color: transparent;
-  border-width: 0;
-  box-shadow: none;
-  color: inherit;
-}
-
-.c16 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-  width: 100%;
-}
-
-.c20 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  height: 3rem;
-  min-height: 3rem;
-  padding: 0.8125rem 0.75rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgb(73,73,73);
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
-}
-
-.c20:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c20::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:invalid {
-  box-shadow: none;
-}
-
-.c20:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-}
-
-.c20:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c24 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
-  padding: 0.8125rem 0.75rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgb(73,73,73);
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
-  text-overflow: ellipsis;
-  resize: vertical;
-}
-
-.c24:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c24::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c24::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c24:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c24:invalid {
-  box-shadow: none;
-}
-
-.c24:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-}
-
-.c24:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c24:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c24:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c24:disabled {
-  color: rgb(73,73,73);
-}
-
-.c24:disabled::-webkit-input-placeholder {
-  color: rgb(73,73,73);
-}
-
-.c24:disabled::-moz-placeholder {
-  color: rgb(73,73,73);
-}
-
-.c24:disabled:-ms-input-placeholder {
-  color: rgb(73,73,73);
-}
-
-.c23 {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  width: 100%;
-  max-width: 100%;
-}
-
-.c18 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c17 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c30 {
+.c28 {
   min-width: 7.5rem;
 }
 
-.c29 {
+.c27 {
   display: inline-block;
 }
 
-.c28 {
+.c26 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2743,7 +2403,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c28:focus {
+.c26:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -2751,43 +2411,43 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c28:hover {
+.c26:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c28[disabled] {
+.c26[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c28:focus {
+.c26:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c28:hover {
+.c26:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32 {
+.c30 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2831,7 +2491,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c32:focus {
+.c30:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -2839,43 +2499,43 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c30:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32: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);
 }
 
-.c32[disabled] {
+.c30[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c30:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c30:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c30:active,
+.c30:active:hover,
+.c30:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c34 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2931,7 +2591,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   float: right;
 }
 
-.c34:focus {
+.c32:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -2939,95 +2599,410 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c34:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c34[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c34:focus {
+.c32:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c34:hover {
+.c32:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c34:focus {
+.c32:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:hover {
+.c32:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c22 {
-  height: 1px;
-  background-color: rgb(216,216,216);
-  background-color: transparent;
+.c17 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+.c9 {
+  margin: 0;
+  color: rgb(73,73,73);
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
 }
 
 .c0 {
-  margin-bottom: 0;
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.c3 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+}
+
+.c11 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c10 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
 }
 
 .c2 {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  line-height: 1.5rem;
+  max-width: 100%;
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c27 {
+.c8 {
+  box-sizing: border-box;
+  min-height: 2.9375rem;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  overflow: hidden;
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+  color: inherit;
+}
+
+.c15 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c19 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  padding: 0.8125rem 0.75rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(73,73,73);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c19:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c19::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:invalid {
+  box-shadow: none;
+}
+
+.c19:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c19:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c22 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 6rem;
+  min-height: 6rem;
+  padding: 0.8125rem 0.75rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(73,73,73);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+  text-overflow: ellipsis;
+  resize: vertical;
+}
+
+.c22:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c22::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c22::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c22:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c22:invalid {
+  box-shadow: none;
+}
+
+.c22:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c22:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c22:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c22:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c22:disabled {
+  color: rgb(73,73,73);
+}
+
+.c22:disabled::-webkit-input-placeholder {
+  color: rgb(73,73,73);
+}
+
+.c22:disabled::-moz-placeholder {
+  color: rgb(73,73,73);
+}
+
+.c22:disabled:-ms-input-placeholder {
+  color: rgb(73,73,73);
+}
+
+.c21 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+  max-width: 100%;
+}
+
+.c16 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c1 {
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.c25 {
   margin-right: 0.375rem;
 }
 
-.c5 {
+.c4 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c8 {
+.c7 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c24 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -3036,7 +3011,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c24 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -3045,7 +3020,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c21 {
+  .c20 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -3054,7 +3029,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c14 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -3063,39 +3038,38 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c31 {
     display: none;
   }
 }
 
 <form
-  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c1"
+    className="c0"
     disabled={false}
     name="card"
   >
     <div
-      className="c2 c3 c4"
+      className="c1 c2 c3"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c5 c6"
+        className="c4 c5"
       >
         <div
-          className="c7"
+          className="c6"
         >
           <div
-            className="c8 c9 c4"
+            className="c7 c8 c3"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c10"
+              className="c9"
             >
               Add metadata
             </h4>
@@ -3104,82 +3078,78 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c10 c11"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c13"
+        className="c12"
       >
         <div
-          className="c14"
+          className="c13"
         >
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
                  key
               </label>
               <div
-                className="c19"
+                className="c18"
               >
                 <input
-                  className="c20"
+                  className="c19"
                   disabled={false}
                   id={null}
                   onBlur={null}
                 />
                 <div
-                  className="c14"
+                  className="c13"
                 >
                   <div
-                    className="c21"
+                    className="c20"
                   />
                 </div>
               </div>
             </div>
-            <div
-              className="c22 c14"
-              height="0.75rem"
-            />
           </div>
         </div>
         <div
-          className="c14"
+          className="c13"
         >
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
                  value
               </label>
               <div
-                className="c19"
+                className="c18"
               >
                 <textarea
-                  className="c23 c24"
+                  className="c21 c22"
                   disabled={false}
                   id={null}
                   name="name"
@@ -3187,30 +3157,26 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
                 />
               </div>
               <div
-                className="c14"
+                className="c13"
               >
                 <div
-                  className="c21"
+                  className="c20"
                 />
               </div>
             </div>
-            <div
-              className="c22 c14"
-              height="0.75rem"
-            />
           </div>
         </div>
         <div
-          className="c25"
+          className="c23"
         >
           <div
-            className="c26"
+            className="c24"
           >
             <div
-              className="c15"
+              className="c14"
             >
               <button
-                className="c27 c28 c29 c30 c31"
+                className="c25 c26 c27 c28 c29"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -3223,7 +3189,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c32 c29 c30 c31"
+                className="c30 c27 c28 c29"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -3236,10 +3202,10 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c33"
+              className="c31"
             >
               <button
-                className="c34 c29 c30 c31"
+                className="c32 c27 c28 c29"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -3249,7 +3215,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c35"
+                  className="c33"
                 >
                   <svg
                     height="16"
@@ -3282,36 +3248,36 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue method="add" /> without throwing 1`] = `
-.c19 {
+.c18 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c23 {
+.c22 {
   margin-top: 0.1875rem;
 }
 
-.c24 {
+.c23 {
   margin-top: 0.75rem;
 }
 
-.c35 {
+.c34 {
   margin-right: 0.75rem;
 }
 
-.c6 {
+.c5 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c13 {
+.c12 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
-.c21 {
+.c20 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3330,26 +3296,46 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
+.c24 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c21 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
 .c25 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
 }
 
-.c22 {
+.c32 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3359,27 +3345,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   display: block;
 }
 
-.c26 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c33 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3407,7 +3373,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   align-items: center;
 }
 
-.c14 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3437,7 +3403,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c15 {
+.c14 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3457,7 +3423,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c31 {
+.c30 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -3469,262 +3435,30 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   appearance: button;
 }
 
-.c31::-moz-focus-inner,
-.c31[type='button']::-moz-focus-inner,
-.c31[type='reset']::-moz-focus-inner,
-.c31[type='submit']::-moz-focus-inner {
+.c30::-moz-focus-inner,
+.c30[type='button']::-moz-focus-inner,
+.c30[type='reset']::-moz-focus-inner,
+.c30[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c31:-moz-focusring,
-.c31[type='button']:-moz-focusring,
-.c31[type='reset']:-moz-focusring,
-.c31[type='submit']:-moz-focusring {
+.c30:-moz-focusring,
+.c30[type='button']:-moz-focusring,
+.c30[type='reset']:-moz-focusring,
+.c30[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 {
-  margin: 0;
-  color: rgb(73,73,73);
-  font-weight: 600;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c1 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-}
-
-.c4 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  min-height: auto;
-  height: 2.875rem;
-  -webkit-flex: 0 0 2.875rem;
-  -ms-flex: 0 0 2.875rem;
-  flex: 0 0 2.875rem;
-}
-
-.c12 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c11 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
-.c3 {
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  z-index: 1;
-  line-height: 1.5rem;
-  max-width: 100%;
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-}
-
-.c9 {
-  box-sizing: border-box;
-  min-height: 2.9375rem;
-  max-width: 100%;
-  width: auto;
-  height: auto;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  overflow: hidden;
-  background-color: transparent;
-  border-width: 0;
-  box-shadow: none;
-  color: inherit;
-}
-
-.c16 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-  width: 100%;
-}
-
-.c20 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  height: 3rem;
-  min-height: 3rem;
-  padding: 0.8125rem 0.75rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgb(73,73,73);
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
-}
-
-.c20:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c20::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:invalid {
-  box-shadow: none;
-}
-
-.c20:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-}
-
-.c20:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c18 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c17 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c30 {
+.c29 {
   min-width: 7.5rem;
 }
 
-.c29 {
+.c28 {
   display: inline-block;
 }
 
-.c28 {
+.c27 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3767,7 +3501,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c28:focus {
+.c27:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3775,43 +3509,43 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c28[disabled] {
+.c27[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c28:focus {
+.c27:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32 {
+.c31 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3855,7 +3589,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c32:focus {
+.c31:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3863,43 +3597,43 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c31:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c32[disabled] {
+.c31[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c31:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c31:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c34 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3955,7 +3689,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   float: right;
 }
 
-.c34:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3963,89 +3697,317 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c34:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c34[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c34:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c34:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c34:focus {
+.c33:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:hover {
+.c33:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
+.c17 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+.c9 {
+  margin: 0;
+  color: rgb(73,73,73);
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
 .c0 {
-  margin-bottom: 0;
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.c3 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+}
+
+.c11 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c10 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
 }
 
 .c2 {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  line-height: 1.5rem;
+  max-width: 100%;
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c27 {
+.c8 {
+  box-sizing: border-box;
+  min-height: 2.9375rem;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  overflow: hidden;
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+  color: inherit;
+}
+
+.c15 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c19 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  padding: 0.8125rem 0.75rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(73,73,73);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c19:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c19::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:invalid {
+  box-shadow: none;
+}
+
+.c19:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c19:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c1 {
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.c26 {
   margin-right: 0.375rem;
 }
 
-.c5 {
+.c4 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c8 {
+.c7 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c24 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -4054,7 +4016,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c24 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -4063,7 +4025,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c22 {
+  .c21 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -4072,7 +4034,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c25 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -4081,39 +4043,38 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c32 {
     display: none;
   }
 }
 
 <form
-  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c1"
+    className="c0"
     disabled={false}
     name="card"
   >
     <div
-      className="c2 c3 c4"
+      className="c1 c2 c3"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c5 c6"
+        className="c4 c5"
       >
         <div
-          className="c7"
+          className="c6"
         >
           <div
-            className="c8 c9 c4"
+            className="c7 c8 c3"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c10"
+              className="c9"
             >
               Add metadata
             </h4>
@@ -4122,29 +4083,29 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c10 c11"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c13"
+        className="c12"
       >
         <div
-          className="c14"
+          className="c13"
           wrap={true}
         >
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
@@ -4152,55 +4113,55 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
                 key
               </label>
               <div
-                className="c19"
+                className="c18"
               >
                 <input
-                  className="c20"
+                  className="c19"
                   disabled={false}
                   id={null}
                   onBlur={null}
                 />
                 <div
-                  className="c21"
+                  className="c20"
                 >
                   <div
-                    className="c22"
+                    className="c21"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
                  value
               </label>
               <div
-                className="c23"
+                className="c22"
               >
                 <input
-                  className="c20"
+                  className="c19"
                   disabled={false}
                   id={null}
                   onBlur={null}
                 />
                 <div
-                  className="c21"
+                  className="c20"
                 >
                   <div
-                    className="c22"
+                    className="c21"
                   />
                 </div>
               </div>
@@ -4208,16 +4169,16 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c24"
+          className="c23"
         >
           <div
-            className="c25"
+            className="c24"
           >
             <div
-              className="c26"
+              className="c25"
             >
               <button
-                className="c27 c28 c29 c30 c31"
+                className="c26 c27 c28 c29 c30"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -4230,7 +4191,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c32 c29 c30 c31"
+                className="c31 c28 c29 c30"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -4243,10 +4204,10 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c33"
+              className="c32"
             >
               <button
-                className="c34 c29 c30 c31"
+                className="c33 c28 c29 c30"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -4256,7 +4217,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c35"
+                  className="c34"
                 >
                   <svg
                     height="16"
@@ -4289,36 +4250,36 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
-.c19 {
+.c18 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c23 {
+.c22 {
   margin-top: 0.1875rem;
 }
 
-.c24 {
+.c23 {
   margin-top: 0.75rem;
 }
 
-.c35 {
+.c34 {
   margin-right: 0.75rem;
 }
 
-.c6 {
+.c5 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c13 {
+.c12 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
-.c21 {
+.c20 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4337,26 +4298,46 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
+.c24 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c21 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
 .c25 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
 }
 
-.c22 {
+.c32 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4366,27 +4347,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   display: block;
 }
 
-.c26 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c33 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4414,7 +4375,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   align-items: center;
 }
 
-.c14 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4444,7 +4405,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c15 {
+.c14 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -4464,7 +4425,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c31 {
+.c30 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -4476,254 +4437,30 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   appearance: button;
 }
 
-.c31::-moz-focus-inner,
-.c31[type='button']::-moz-focus-inner,
-.c31[type='reset']::-moz-focus-inner,
-.c31[type='submit']::-moz-focus-inner {
+.c30::-moz-focus-inner,
+.c30[type='button']::-moz-focus-inner,
+.c30[type='reset']::-moz-focus-inner,
+.c30[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c31:-moz-focusring,
-.c31[type='button']:-moz-focusring,
-.c31[type='reset']:-moz-focusring,
-.c31[type='submit']:-moz-focusring {
+.c30:-moz-focusring,
+.c30[type='button']:-moz-focusring,
+.c30[type='reset']:-moz-focusring,
+.c30[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c1 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-}
-
-.c4 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  min-height: auto;
-  height: 2.875rem;
-  -webkit-flex: 0 0 2.875rem;
-  -ms-flex: 0 0 2.875rem;
-  flex: 0 0 2.875rem;
-}
-
-.c12 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c11 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
-.c3 {
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  z-index: 1;
-  line-height: 1.5rem;
-  max-width: 100%;
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-}
-
-.c9 {
-  box-sizing: border-box;
-  min-height: 2.9375rem;
-  max-width: 100%;
-  width: auto;
-  height: auto;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  overflow: hidden;
-  background-color: transparent;
-  border-width: 0;
-  box-shadow: none;
-  color: inherit;
-}
-
-.c16 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-  width: 100%;
-}
-
-.c20 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  height: 3rem;
-  min-height: 3rem;
-  padding: 0.8125rem 0.75rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgb(73,73,73);
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
-}
-
-.c20:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c20::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:invalid {
-  box-shadow: none;
-}
-
-.c20:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-}
-
-.c20:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c18 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c17 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c30 {
+.c29 {
   min-width: 7.5rem;
 }
 
-.c29 {
+.c28 {
   display: inline-block;
 }
 
-.c28 {
+.c27 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4766,7 +4503,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c28:focus {
+.c27:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -4774,43 +4511,43 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c28[disabled] {
+.c27[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c28:focus {
+.c27:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32 {
+.c31 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4854,7 +4591,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c32:focus {
+.c31:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -4862,43 +4599,43 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c31:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c32[disabled] {
+.c31[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c31:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c31:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c34 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4954,7 +4691,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   float: right;
 }
 
-.c34:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -4962,66 +4699,286 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c34:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c34[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c34:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c34:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c34:focus {
+.c33:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:hover {
+.c33:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
+.c17 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
 .c0 {
-  margin-bottom: 0;
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.c3 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+}
+
+.c11 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
 }
 
 .c10 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
+}
+
+.c2 {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  line-height: 1.5rem;
+  max-width: 100%;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.c8 {
+  box-sizing: border-box;
+  min-height: 2.9375rem;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  overflow: hidden;
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+  color: inherit;
+}
+
+.c15 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c19 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  padding: 0.8125rem 0.75rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(73,73,73);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c19:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c19::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:invalid {
+  box-shadow: none;
+}
+
+.c19:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c19:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c9 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -5030,30 +4987,30 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   display: block;
 }
 
-.c2 {
+.c1 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c27 {
+.c26 {
   margin-right: 0.375rem;
 }
 
-.c5 {
+.c4 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c8 {
+.c7 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c24 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -5062,7 +5019,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c24 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -5071,7 +5028,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c22 {
+  .c21 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -5080,7 +5037,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c25 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -5089,7 +5046,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c32 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -5098,62 +5055,61 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 <form
-  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c1"
+    className="c0"
     disabled={false}
     name="card"
   >
     <div
-      className="c2 c3 c4"
+      className="c1 c2 c3"
       disabled={false}
       name="card-header"
       onClick={undefined}
     >
       <div
-        className="c5 c6"
+        className="c4 c5"
       >
         <div
-          className="c7"
+          className="c6"
         >
           <div
-            className="c8 c9 c4"
+            className="c7 c8 c3"
             disabled={false}
             name="card-header-meta"
           >
             <div
-              className="c10"
+              className="c9"
             />
           </div>
         </div>
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c10 c11"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c13"
+        className="c12"
       >
         <div
-          className="c14"
+          className="c13"
           wrap={true}
         >
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
@@ -5161,55 +5117,55 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
                 key
               </label>
               <div
-                className="c19"
+                className="c18"
               >
                 <input
-                  className="c20"
+                  className="c19"
                   disabled={false}
                   id={null}
                   onBlur={null}
                 />
                 <div
-                  className="c21"
+                  className="c20"
                 >
                   <div
-                    className="c22"
+                    className="c21"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
                  value
               </label>
               <div
-                className="c23"
+                className="c22"
               >
                 <input
-                  className="c20"
+                  className="c19"
                   disabled={false}
                   id={null}
                   onBlur={null}
                 />
                 <div
-                  className="c21"
+                  className="c20"
                 >
                   <div
-                    className="c22"
+                    className="c21"
                   />
                 </div>
               </div>
@@ -5217,16 +5173,16 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c24"
+          className="c23"
         >
           <div
-            className="c25"
+            className="c24"
           >
             <div
-              className="c26"
+              className="c25"
             >
               <button
-                className="c27 c28 c29 c30 c31"
+                className="c26 c27 c28 c29 c30"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -5239,7 +5195,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c32 c29 c30 c31"
+                className="c31 c28 c29 c30"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -5252,10 +5208,10 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c33"
+              className="c32"
             >
               <button
-                className="c34 c29 c30 c31"
+                className="c33 c28 c29 c30"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -5265,7 +5221,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c35"
+                  className="c34"
                 >
                   <svg
                     height="16"
@@ -5298,32 +5254,32 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue removing /> without throwing 1`] = `
-.c19 {
+.c18 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c23 {
+.c22 {
   margin-top: 0.1875rem;
 }
 
-.c24 {
+.c23 {
   margin-top: 0.75rem;
 }
 
-.c6 {
+.c5 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c13 {
+.c12 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
-.c21 {
+.c20 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5342,26 +5298,46 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
+.c24 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c21 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
 .c25 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
 }
 
-.c22 {
+.c32 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -5371,27 +5347,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   display: block;
 }
 
-.c26 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c33 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5419,7 +5375,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   align-items: center;
 }
 
-.c14 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5449,7 +5405,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c15 {
+.c14 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -5469,7 +5425,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c31 {
+.c30 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -5481,271 +5437,39 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   appearance: button;
 }
 
-.c31::-moz-focus-inner,
-.c31[type='button']::-moz-focus-inner,
-.c31[type='reset']::-moz-focus-inner,
-.c31[type='submit']::-moz-focus-inner {
+.c30::-moz-focus-inner,
+.c30[type='button']::-moz-focus-inner,
+.c30[type='reset']::-moz-focus-inner,
+.c30[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c31:-moz-focusring,
-.c31[type='button']:-moz-focusring,
-.c31[type='reset']:-moz-focusring,
-.c31[type='submit']:-moz-focusring {
+.c30:-moz-focusring,
+.c30[type='button']:-moz-focusring,
+.c30[type='reset']:-moz-focusring,
+.c30[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 {
-  margin: 0;
-  color: rgb(73,73,73);
-  font-weight: 600;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c1 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-}
-
-.c4 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  min-height: auto;
-  height: 2.875rem;
-  -webkit-flex: 0 0 2.875rem;
-  -ms-flex: 0 0 2.875rem;
-  flex: 0 0 2.875rem;
-}
-
-.c12 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c11 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
-.c3 {
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  z-index: 1;
-  line-height: 1.5rem;
-  max-width: 100%;
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-}
-
-.c9 {
-  box-sizing: border-box;
-  min-height: 2.9375rem;
-  max-width: 100%;
-  width: auto;
-  height: auto;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  overflow: hidden;
-  background-color: transparent;
-  border-width: 0;
-  box-shadow: none;
-  color: inherit;
-}
-
-.c16 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-  width: 100%;
-}
-
-.c20 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  height: 3rem;
-  min-height: 3rem;
-  padding: 0.8125rem 0.75rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgb(73,73,73);
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
-}
-
-.c20:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c20::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:invalid {
-  box-shadow: none;
-}
-
-.c20:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-}
-
-.c20:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c18 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c17 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c36 {
+.c35 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
 }
 
-.c37 {
+.c36 {
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
 }
 
-.c38 {
+.c37 {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
 }
 
-.c35 {
+.c34 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5773,15 +5497,15 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c30 {
+.c29 {
   min-width: 7.5rem;
 }
 
-.c29 {
+.c28 {
   display: inline-block;
 }
 
-.c28 {
+.c27 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5824,7 +5548,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c28:focus {
+.c27:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -5832,43 +5556,43 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c28[disabled] {
+.c27[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c28:focus {
+.c27:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32 {
+.c31 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5912,7 +5636,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c32:focus {
+.c31:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -5920,43 +5644,43 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c31:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c32[disabled] {
+.c31[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c31:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c31:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c34 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6017,7 +5741,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   float: right;
 }
 
-.c34:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -6025,567 +5749,97 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c34:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c34[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c34:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c34:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c34:focus {
+.c33:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:hover {
+.c33:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c34:focus {
+.c33:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c34:hover {
+.c33:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c0 {
-  margin-bottom: 0;
-}
-
-.c2 {
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-}
-
-.c27 {
-  margin-right: 0.375rem;
-}
-
-.c5 {
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.c8 {
-  height: 2.9375rem;
-  max-width: 98%;
-}
-
-@media only screen and (min-width:0em) {
-  .c25 {
-    -webkit-align-items: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c25 {
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c22 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c26 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c33 {
-    display: none;
-  }
-}
-
-<form
-  className="c0"
-  onSubmit={undefined}
->
-  <div
-    className="c1"
-    disabled={false}
-    name="card"
-  >
-    <div
-      className="c2 c3 c4"
-      disabled={false}
-      name="card-header"
-      onClick={false}
-    >
-      <div
-        className="c5 c6"
-      >
-        <div
-          className="c7"
-        >
-          <div
-            className="c8 c9 c4"
-            disabled={false}
-            name="card-header-meta"
-          >
-            <h4
-              className="c10"
-            >
-              Add metadata
-            </h4>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="c11 c12"
-      disabled={false}
-      name="card-outlet"
-    >
-      <div
-        className="c13"
-      >
-        <div
-          className="c14"
-          wrap={true}
-        >
-          <div
-            className="c15"
-          >
-            <div
-              className="c16"
-              id={null}
-              name="name"
-              role="group"
-              style={undefined}
-            >
-              <label
-                className="c17 c18"
-                htmlFor={null}
-              >
-                Metadata
-                 
-                key
-              </label>
-              <div
-                className="c19"
-              >
-                <input
-                  className="c20"
-                  disabled={false}
-                  id={null}
-                  onBlur={null}
-                />
-                <div
-                  className="c21"
-                >
-                  <div
-                    className="c22"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className="c15"
-          >
-            <div
-              className="c16"
-              id={null}
-              name="value"
-              role="group"
-              style={undefined}
-            >
-              <label
-                className="c17 c18"
-                htmlFor={null}
-              >
-                Metadata
-                 value
-              </label>
-              <div
-                className="c23"
-              >
-                <input
-                  className="c20"
-                  disabled={false}
-                  id={null}
-                  onBlur={null}
-                />
-                <div
-                  className="c21"
-                >
-                  <div
-                    className="c22"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="c24"
-        >
-          <div
-            className="c25"
-          >
-            <div
-              className="c26"
-            >
-              <button
-                className="c27 c28 c29 c30 c31"
-                data-ui-button="true"
-                disabled={false}
-                href=""
-                id={null}
-                onClick={[Function]}
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                className="c32 c29 c30 c31"
-                data-ui-button="true"
-                disabled={true}
-                href=""
-                id={null}
-                type="submit"
-              >
-                <span>
-                  Create
-                </span>
-              </button>
-            </div>
-            <div
-              className="c33"
-            >
-              <button
-                className="c34 c29 c30 c31"
-                data-ui-button="true"
-                disabled={false}
-                href=""
-                icon={true}
-                id={null}
-                onClick={[Function]}
-                type="button"
-              >
-                <div
-                  className="c35"
-                >
-                  <svg
-                    height="10"
-                    width="28"
-                  >
-                    <rect
-                      className="c36"
-                      height="6"
-                      width="6"
-                      x="2"
-                      y="2"
-                    />
-                    <rect
-                      className="c37 c36"
-                      height="6"
-                      width="6"
-                      x="11"
-                      y="2"
-                    />
-                    <rect
-                      className="c38 c36"
-                      height="6"
-                      width="6"
-                      x="20"
-                      y="2"
-                    />
-                  </svg>
-                </div>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders <KeyValue submitting /> without throwing 1`] = `
-.c19 {
-  margin-top: 0.1875rem;
-  margin-right: 1.125rem;
-}
-
-.c23 {
-  margin-top: 0.1875rem;
-}
-
-.c24 {
-  margin-top: 0.75rem;
-}
-
-.c39 {
-  margin-right: 0.75rem;
-}
-
-.c6 {
-  padding-right: 1.125rem;
-  padding-left: 1.125rem;
-}
-
-.c13 {
-  padding-left: 1.125rem;
-  padding-right: 1.125rem;
-  padding-top: 1.125rem;
-  padding-bottom: 1.125rem;
-}
-
-.c21 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c25 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c22 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
+.c17 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
   display: block;
+  color: rgb(70,70,70);
+  text-align: left;
 }
 
-.c26 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c37 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-}
-
-.c15 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-}
-
-.c31 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-}
-
-.c31::-moz-focus-inner,
-.c31[type='button']::-moz-focus-inner,
-.c31[type='reset']::-moz-focus-inner,
-.c31[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c31:-moz-focusring,
-.c31[type='button']:-moz-focusring,
-.c31[type='reset']:-moz-focusring,
-.c31[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c10 {
+.c9 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
 
-.c1 {
+.c0 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6608,7 +5862,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c4 {
+.c3 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6635,7 +5889,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c12 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6657,7 +5911,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c11 {
+.c10 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -6673,7 +5927,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c3 {
+.c2 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -6685,7 +5939,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c9 {
+.c8 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -6719,7 +5973,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   color: inherit;
 }
 
-.c16 {
+.c15 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -6732,7 +5986,1105 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   width: 100%;
 }
 
+.c19 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  padding: 0.8125rem 0.75rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(73,73,73);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c19:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c19::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:invalid {
+  box-shadow: none;
+}
+
+.c19:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c19:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c1 {
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.c26 {
+  margin-right: 0.375rem;
+}
+
+.c4 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.c7 {
+  height: 2.9375rem;
+  max-width: 98%;
+}
+
+@media only screen and (min-width:0em) {
+  .c24 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c24 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c21 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c25 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c32 {
+    display: none;
+  }
+}
+
+<form
+  onSubmit={undefined}
+>
+  <div
+    className="c0"
+    disabled={false}
+    name="card"
+  >
+    <div
+      className="c1 c2 c3"
+      disabled={false}
+      name="card-header"
+      onClick={false}
+    >
+      <div
+        className="c4 c5"
+      >
+        <div
+          className="c6"
+        >
+          <div
+            className="c7 c8 c3"
+            disabled={false}
+            name="card-header-meta"
+          >
+            <h4
+              className="c9"
+            >
+              Add metadata
+            </h4>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="c10 c11"
+      disabled={false}
+      name="card-outlet"
+    >
+      <div
+        className="c12"
+      >
+        <div
+          className="c13"
+          wrap={true}
+        >
+          <div
+            className="c14"
+          >
+            <div
+              className="c15"
+              id={null}
+              name="name"
+              role="group"
+              style={undefined}
+            >
+              <label
+                className="c16 c17"
+                htmlFor={null}
+              >
+                Metadata
+                 
+                key
+              </label>
+              <div
+                className="c18"
+              >
+                <input
+                  className="c19"
+                  disabled={false}
+                  id={null}
+                  onBlur={null}
+                />
+                <div
+                  className="c20"
+                >
+                  <div
+                    className="c21"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="c14"
+          >
+            <div
+              className="c15"
+              id={null}
+              name="value"
+              role="group"
+              style={undefined}
+            >
+              <label
+                className="c16 c17"
+                htmlFor={null}
+              >
+                Metadata
+                 value
+              </label>
+              <div
+                className="c22"
+              >
+                <input
+                  className="c19"
+                  disabled={false}
+                  id={null}
+                  onBlur={null}
+                />
+                <div
+                  className="c20"
+                >
+                  <div
+                    className="c21"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="c23"
+        >
+          <div
+            className="c24"
+          >
+            <div
+              className="c25"
+            >
+              <button
+                className="c26 c27 c28 c29 c30"
+                data-ui-button="true"
+                disabled={false}
+                href=""
+                id={null}
+                onClick={[Function]}
+                type="button"
+              >
+                <span>
+                  Cancel
+                </span>
+              </button>
+              <button
+                className="c31 c28 c29 c30"
+                data-ui-button="true"
+                disabled={true}
+                href=""
+                id={null}
+                type="submit"
+              >
+                <span>
+                  Create
+                </span>
+              </button>
+            </div>
+            <div
+              className="c32"
+            >
+              <button
+                className="c33 c28 c29 c30"
+                data-ui-button="true"
+                disabled={false}
+                href=""
+                icon={true}
+                id={null}
+                onClick={[Function]}
+                type="button"
+              >
+                <div
+                  className="c34"
+                >
+                  <svg
+                    height="10"
+                    width="28"
+                  >
+                    <rect
+                      className="c35"
+                      height="6"
+                      width="6"
+                      x="2"
+                      y="2"
+                    />
+                    <rect
+                      className="c36 c35"
+                      height="6"
+                      width="6"
+                      x="11"
+                      y="2"
+                    />
+                    <rect
+                      className="c37 c35"
+                      height="6"
+                      width="6"
+                      x="20"
+                      y="2"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders <KeyValue submitting /> without throwing 1`] = `
+.c18 {
+  margin-top: 0.1875rem;
+  margin-right: 1.125rem;
+}
+
+.c22 {
+  margin-top: 0.1875rem;
+}
+
+.c23 {
+  margin-top: 0.75rem;
+}
+
+.c38 {
+  margin-right: 0.75rem;
+}
+
+.c5 {
+  padding-right: 1.125rem;
+  padding-left: 1.125rem;
+}
+
+.c12 {
+  padding-left: 1.125rem;
+  padding-right: 1.125rem;
+  padding-top: 1.125rem;
+  padding-bottom: 1.125rem;
+}
+
 .c20 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c24 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c21 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c25 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c36 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c13 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c14 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  display: block;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
+.c30 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+}
+
+.c30::-moz-focus-inner,
+.c30[type='button']::-moz-focus-inner,
+.c30[type='reset']::-moz-focus-inner,
+.c30[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c30:-moz-focusring,
+.c30[type='button']:-moz-focusring,
+.c30[type='reset']:-moz-focusring,
+.c30[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c33 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c34 {
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c35 {
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 1.25rem;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+}
+
+.c29 {
+  min-width: 7.5rem;
+}
+
+.c28 {
+  display: inline-block;
+}
+
+.c31 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c31:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c31:hover {
+  background-color: rgb(72,83,217);
+  border-color: rgb(45,56,132);
+}
+
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c31[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c31:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c31:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c37 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  float: right;
+}
+
+.c37:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c37:hover {
+  background-color: rgb(72,83,217);
+  border-color: rgb(45,56,132);
+}
+
+.c37:active,
+.c37:active:hover,
+.c37:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c37[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c37:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c37:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c37:active,
+.c37:active:hover,
+.c37:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c37:focus {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c37:hover {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c37:active,
+.c37:active:hover,
+.c37:active:focus {
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
+}
+
+.c37:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c37:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c37:active,
+.c37:active:hover,
+.c37:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c27 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c27:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c27:hover {
+  background-color: rgb(72,83,217);
+  border-color: rgb(45,56,132);
+}
+
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c27[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c27:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c27:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c27:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c27:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c17 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+.c9 {
+  margin: 0;
+  color: rgb(73,73,73);
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.c3 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+}
+
+.c11 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c10 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
+}
+
+.c2 {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  line-height: 1.5rem;
+  max-width: 100%;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.c8 {
+  box-sizing: border-box;
+  min-height: 2.9375rem;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  overflow: hidden;
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+  color: inherit;
+}
+
+.c15 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c19 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -6757,492 +7109,87 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c20:focus {
+.c19:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c20::-webkit-input-placeholder {
+.c19::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c20::-moz-placeholder {
+.c19::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c20:-ms-input-placeholder {
+.c19:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c20:invalid {
+.c19:invalid {
   box-shadow: none;
 }
 
-.c20::-webkit-input-placeholder {
+.c19::-webkit-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c20::-moz-placeholder {
+.c19::-moz-placeholder {
   color: rgb(216,216,216);
 }
 
-.c20:-ms-input-placeholder {
+.c19:-ms-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c20:disabled {
+.c19:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c20:disabled::-webkit-input-placeholder {
+.c19:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c20:disabled::-moz-placeholder {
+.c19:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c20:disabled:-ms-input-placeholder {
+.c19:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c18 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c17 {
+.c16 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c34 {
-  fill: rgb(59,70,204);
-  stroke: rgb(59,70,204);
-  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
-  animation: iCqDak 1.5s ease-out 0s infinite;
-}
-
-.c35 {
-  -webkit-animation-delay: 0.5s;
-  animation-delay: 0.5s;
-}
-
-.c36 {
-  -webkit-animation-delay: 1s;
-  animation-delay: 1s;
-}
-
-.c33 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 1.25rem;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-}
-
-.c30 {
-  min-width: 7.5rem;
-}
-
-.c29 {
-  display: inline-block;
-}
-
-.c32 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c32:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c32:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c32[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c32:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c32:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c38 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  float: right;
-}
-
-.c38:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c38:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c38:active,
-.c38:active:hover,
-.c38:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c38[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c38:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c38:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c38:active,
-.c38:active:hover,
-.c38:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c38:focus {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c38:hover {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c38:active,
-.c38:active:hover,
-.c38:active:focus {
-  background-color: rgba(210,67,58,0.1);
-  border-color: rgb(205,37,27);
-}
-
-.c38:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c38:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c38:active,
-.c38:active:hover,
-.c38:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c28 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c28:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c28:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c28[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c28:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c28:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c28:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c28:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c0 {
-  margin-bottom: 0;
-}
-
-.c2 {
+.c1 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c27 {
+.c26 {
   margin-right: 0.375rem;
 }
 
-.c5 {
+.c4 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c8 {
+.c7 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c24 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -7251,7 +7198,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c24 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -7260,7 +7207,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c22 {
+  .c21 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -7269,7 +7216,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c25 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -7278,39 +7225,38 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c37 {
+  .c36 {
     display: none;
   }
 }
 
 <form
-  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c1"
+    className="c0"
     disabled={false}
     name="card"
   >
     <div
-      className="c2 c3 c4"
+      className="c1 c2 c3"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c5 c6"
+        className="c4 c5"
       >
         <div
-          className="c7"
+          className="c6"
         >
           <div
-            className="c8 c9 c4"
+            className="c7 c8 c3"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c10"
+              className="c9"
             >
               Add metadata
             </h4>
@@ -7319,29 +7265,29 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c10 c11"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c13"
+        className="c12"
       >
         <div
-          className="c14"
+          className="c13"
           wrap={true}
         >
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
@@ -7349,55 +7295,55 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
                 key
               </label>
               <div
-                className="c19"
+                className="c18"
               >
                 <input
-                  className="c20"
+                  className="c19"
                   disabled={true}
                   id={null}
                   onBlur={null}
                 />
                 <div
-                  className="c21"
+                  className="c20"
                 >
                   <div
-                    className="c22"
+                    className="c21"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Metadata
                  value
               </label>
               <div
-                className="c23"
+                className="c22"
               >
                 <input
-                  className="c20"
+                  className="c19"
                   disabled={true}
                   id={null}
                   onBlur={null}
                 />
                 <div
-                  className="c21"
+                  className="c20"
                 >
                   <div
-                    className="c22"
+                    className="c21"
                   />
                 </div>
               </div>
@@ -7405,16 +7351,16 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c24"
+          className="c23"
         >
           <div
-            className="c25"
+            className="c24"
           >
             <div
-              className="c26"
+              className="c25"
             >
               <button
-                className="c27 c28 c29 c30 c31"
+                className="c26 c27 c28 c29 c30"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -7427,7 +7373,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c32 c29 c30 c31"
+                className="c31 c28 c29 c30"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -7435,28 +7381,28 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
                 type="submit"
               >
                 <div
-                  className="c33"
+                  className="c32"
                 >
                   <svg
                     height="10"
                     width="28"
                   >
                     <rect
-                      className="c34"
+                      className="c33"
                       height="6"
                       width="6"
                       x="2"
                       y="2"
                     />
                     <rect
-                      className="c35 c34"
+                      className="c34 c33"
                       height="6"
                       width="6"
                       x="11"
                       y="2"
                     />
                     <rect
-                      className="c36 c34"
+                      className="c35 c33"
                       height="6"
                       width="6"
                       x="20"
@@ -7467,10 +7413,10 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c37"
+              className="c36"
             >
               <button
-                className="c38 c29 c30 c31"
+                className="c37 c28 c29 c30"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -7480,7 +7426,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c39"
+                  className="c38"
                 >
                   <svg
                     height="16"
@@ -7513,36 +7459,36 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
-.c19 {
+.c18 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c23 {
+.c22 {
   margin-top: 0.1875rem;
 }
 
-.c24 {
+.c23 {
   margin-top: 0.75rem;
 }
 
-.c35 {
+.c34 {
   margin-right: 0.75rem;
 }
 
-.c6 {
+.c5 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c13 {
+.c12 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
-.c21 {
+.c20 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7561,26 +7507,46 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
+.c24 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c21 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
 .c25 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
 }
 
-.c22 {
+.c32 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7590,27 +7556,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   display: block;
 }
 
-.c26 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c33 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c7 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7638,7 +7584,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   align-items: center;
 }
 
-.c14 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7668,7 +7614,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c15 {
+.c14 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -7688,7 +7634,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c31 {
+.c30 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -7700,262 +7646,30 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   appearance: button;
 }
 
-.c31::-moz-focus-inner,
-.c31[type='button']::-moz-focus-inner,
-.c31[type='reset']::-moz-focus-inner,
-.c31[type='submit']::-moz-focus-inner {
+.c30::-moz-focus-inner,
+.c30[type='button']::-moz-focus-inner,
+.c30[type='reset']::-moz-focus-inner,
+.c30[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c31:-moz-focusring,
-.c31[type='button']:-moz-focusring,
-.c31[type='reset']:-moz-focusring,
-.c31[type='submit']:-moz-focusring {
+.c30:-moz-focusring,
+.c30[type='button']:-moz-focusring,
+.c30[type='reset']:-moz-focusring,
+.c30[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 {
-  margin: 0;
-  color: rgb(73,73,73);
-  font-weight: 600;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c1 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-}
-
-.c4 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  min-height: auto;
-  height: 2.875rem;
-  -webkit-flex: 0 0 2.875rem;
-  -ms-flex: 0 0 2.875rem;
-  flex: 0 0 2.875rem;
-}
-
-.c12 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c11 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
-.c3 {
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  z-index: 1;
-  line-height: 1.5rem;
-  max-width: 100%;
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-}
-
-.c9 {
-  box-sizing: border-box;
-  min-height: 2.9375rem;
-  max-width: 100%;
-  width: auto;
-  height: auto;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  overflow: hidden;
-  background-color: transparent;
-  border-width: 0;
-  box-shadow: none;
-  color: inherit;
-}
-
-.c16 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-  width: 100%;
-}
-
-.c20 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  height: 3rem;
-  min-height: 3rem;
-  padding: 0.8125rem 0.75rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgb(73,73,73);
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
-}
-
-.c20:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c20::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:invalid {
-  box-shadow: none;
-}
-
-.c20:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-}
-
-.c20:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c20:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c18 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c17 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c30 {
+.c29 {
   min-width: 7.5rem;
 }
 
-.c29 {
+.c28 {
   display: inline-block;
 }
 
-.c28 {
+.c27 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -7998,7 +7712,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c28:focus {
+.c27:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -8006,43 +7720,43 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c28[disabled] {
+.c27[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c28:focus {
+.c27:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c28:active,
-.c28:active:hover,
-.c28:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32 {
+.c31 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -8086,7 +7800,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c32:focus {
+.c31:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -8094,43 +7808,43 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c31:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c32[disabled] {
+.c31[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c31:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c31:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c34 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -8186,7 +7900,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   float: right;
 }
 
-.c34:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -8194,89 +7908,317 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c34:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c34[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c34:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c34:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c34:focus {
+.c33:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:hover {
+.c33:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
+.c17 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+.c9 {
+  margin: 0;
+  color: rgb(73,73,73);
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
 .c0 {
-  margin-bottom: 0;
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.c3 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+}
+
+.c11 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c10 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
 }
 
 .c2 {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  line-height: 1.5rem;
+  max-width: 100%;
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c27 {
+.c8 {
+  box-sizing: border-box;
+  min-height: 2.9375rem;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  overflow: hidden;
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+  color: inherit;
+}
+
+.c15 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c19 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  padding: 0.8125rem 0.75rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(73,73,73);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c19:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c19::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:invalid {
+  box-shadow: none;
+}
+
+.c19:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c19:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c19:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c1 {
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.c26 {
   margin-right: 0.375rem;
 }
 
-.c5 {
+.c4 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c8 {
+.c7 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c24 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -8285,7 +8227,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c24 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -8294,7 +8236,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c22 {
+  .c21 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -8303,7 +8245,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c25 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -8312,39 +8254,38 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c32 {
     display: none;
   }
 }
 
 <form
-  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c1"
+    className="c0"
     disabled={false}
     name="card"
   >
     <div
-      className="c2 c3 c4"
+      className="c1 c2 c3"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c5 c6"
+        className="c4 c5"
       >
         <div
-          className="c7"
+          className="c6"
         >
           <div
-            className="c8 c9 c4"
+            className="c7 c8 c3"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c10"
+              className="c9"
             >
               Add tag
             </h4>
@@ -8353,29 +8294,29 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c10 c11"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c13"
+        className="c12"
       >
         <div
-          className="c14"
+          className="c13"
           wrap={true}
         >
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Tag
@@ -8383,55 +8324,55 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
                 key
               </label>
               <div
-                className="c19"
+                className="c18"
               >
                 <input
-                  className="c20"
+                  className="c19"
                   disabled={false}
                   id={null}
                   onBlur={null}
                 />
                 <div
-                  className="c21"
+                  className="c20"
                 >
                   <div
-                    className="c22"
+                    className="c21"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c15"
+            className="c14"
           >
             <div
-              className="c16"
+              className="c15"
               id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c17 c18"
+                className="c16 c17"
                 htmlFor={null}
               >
                 Tag
                  value
               </label>
               <div
-                className="c23"
+                className="c22"
               >
                 <input
-                  className="c20"
+                  className="c19"
                   disabled={false}
                   id={null}
                   onBlur={null}
                 />
                 <div
-                  className="c21"
+                  className="c20"
                 >
                   <div
-                    className="c22"
+                    className="c21"
                   />
                 </div>
               </div>
@@ -8439,16 +8380,16 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c24"
+          className="c23"
         >
           <div
-            className="c25"
+            className="c24"
           >
             <div
-              className="c26"
+              className="c25"
             >
               <button
-                className="c27 c28 c29 c30 c31"
+                className="c26 c27 c28 c29 c30"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -8461,7 +8402,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c32 c29 c30 c31"
+                className="c31 c28 c29 c30"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -8474,10 +8415,10 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c33"
+              className="c32"
             >
               <button
-                className="c34 c29 c30 c31"
+                className="c33 c28 c29 c30"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -8487,7 +8428,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c35"
+                  className="c34"
                 >
                   <svg
                     height="16"
diff --git a/packages/ui-toolkit/src/key-value/__tests__/key-value.spec.js b/packages/resource-widgets/src/key-value/__tests__/key-value.spec.js
similarity index 98%
rename from packages/ui-toolkit/src/key-value/__tests__/key-value.spec.js
rename to packages/resource-widgets/src/key-value/__tests__/key-value.spec.js
index e7df534a..8778db4c 100644
--- a/packages/ui-toolkit/src/key-value/__tests__/key-value.spec.js
+++ b/packages/resource-widgets/src/key-value/__tests__/key-value.spec.js
@@ -3,7 +3,7 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import KeyValue from '../';
-import { Theme } from '../../mocks';
+import Theme from '../../mocks/theme';
 
 it('renders <KeyValue /> without throwing', () => {
   expect(
diff --git a/packages/ui-toolkit/src/key-value/index.js b/packages/resource-widgets/src/key-value/index.js
similarity index 73%
rename from packages/ui-toolkit/src/key-value/index.js
rename to packages/resource-widgets/src/key-value/index.js
index 52a21f0b..4e025aff 100644
--- a/packages/ui-toolkit/src/key-value/index.js
+++ b/packages/resource-widgets/src/key-value/index.js
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { Margin, Padding } from 'styled-components-spacing';
 import PropTypes from 'prop-types';
-import styled, { withTheme } from 'styled-components';
+import styled from 'styled-components';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
 import { Field } from 'redux-form';
 import remcalc from 'remcalc';
@@ -9,27 +9,24 @@ import titleCase from 'title-case';
 import Flex, { FlexItem } from 'styled-flex-component';
 import is from 'styled-is';
 
-import Message, {
-  Title as MessageTitle,
-  Description as MessageDescription
-} from '../message';
-
 import {
-  default as BaseCard,
-  Outlet as CardOutlet,
-  Header as CardHeader,
-  HeaderMeta as CardHeaderMeta
-} from '../card';
-
-import { FormGroup, Input, Textarea, FormLabel, FormMeta } from '../form';
-import { Delete as DeleteIcon, Arrow as ArrowIcon } from '../icons';
-import { H4 } from '../text/headings';
-import Button from '../button';
-import Divider from '../divider';
-
-const Form = styled.form`
-  margin-bottom: 0;
-`;
+  H4,
+  Button,
+  Message,
+  MessageTitle,
+  MessageDescription,
+  Card as BaseCard,
+  CardOutlet,
+  CardHeader,
+  CardHeaderMeta,
+  FormGroup,
+  Input,
+  Textarea,
+  FormLabel,
+  FormMeta,
+  DeleteIcon,
+  ArrowIcon
+} from 'joyent-ui-toolkit';
 
 const CollapsedKeyValue = styled.div`
   word-break: break-all;
@@ -82,7 +79,7 @@ const TextareaKeyValue = ({
   editor
 }) => (
   <Fragment>
-    {!onlyValue ? (
+    {onlyValue ? null : (
       <Row>
         <Col xs={12}>
           <FormGroup
@@ -92,7 +89,7 @@ const TextareaKeyValue = ({
             fluid
           >
             <FormLabel>{titleCase(type)} key</FormLabel>
-            <Margin top={0.5}>
+            <Margin top="0.5">
               <Input onBlur={null} type="text" disabled={submitting} />
               <Row>
                 <Col sm={7}>
@@ -101,11 +98,10 @@ const TextareaKeyValue = ({
               </Row>
             </Margin>
           </FormGroup>
-          <Divider height={remcalc(12)} transparent />
         </Col>
       </Row>
-    ) : null}
-    {!onlyName ? (
+    )}
+    {onlyName ? null : (
       <Row>
         <Col xs={12}>
           <FormGroup
@@ -115,7 +111,7 @@ const TextareaKeyValue = ({
             fluid
           >
             <FormLabel>{titleCase(type)} value</FormLabel>
-            <Margin top={0.5}>
+            <Margin top="0.5">
               <Textarea
                 monospace
                 name="name"
@@ -130,10 +126,9 @@ const TextareaKeyValue = ({
               </Col>
             </Row>
           </FormGroup>
-          <Divider height={remcalc(12)} transparent />
         </Col>
       </Row>
-    ) : null}
+    )}
   </Fragment>
 );
 
@@ -146,7 +141,7 @@ const InputKeyValue = ({
   onlyValue
 }) => (
   <Flex wrap justifyStart contentStretch>
-    {!onlyValue ? (
+    {onlyValue ? null : (
       <FlexItem basis="auto">
         <FormGroup
           id={id ? 'kv-input-name-' + id : null}
@@ -157,7 +152,7 @@ const InputKeyValue = ({
           <FormLabel>
             {titleCase(type)} {typeLabel}
           </FormLabel>
-          <Margin right={3} top={0.5}>
+          <Margin right="3" top="0.5">
             <Input onBlur={null} type="text" disabled={submitting} />
             <Row>
               <Col sm={7}>
@@ -167,8 +162,8 @@ const InputKeyValue = ({
           </Margin>
         </FormGroup>
       </FlexItem>
-    ) : null}
-    {!onlyName ? (
+    )}
+    {onlyName ? null : (
       <Fragment>
         <FlexItem basis="auto">
           <FormGroup
@@ -178,7 +173,7 @@ const InputKeyValue = ({
             fluid
           >
             <FormLabel>{titleCase(type)} value</FormLabel>
-            <Margin top={0.5}>
+            <Margin top="0.5">
               <Input onBlur={null} type="text" disabled={submitting} />
               <Row>
                 <Col sm={7}>
@@ -189,7 +184,7 @@ const InputKeyValue = ({
           </FormGroup>
         </FlexItem>
       </Fragment>
-    ) : null}
+    )}
   </Flex>
 );
 
@@ -210,7 +205,6 @@ export const KeyValue = ({
   onToggleExpanded,
   onCancel = () => null,
   onRemove = () => null,
-  theme = {},
   editor = null,
   onlyName = false,
   onlyValue = false,
@@ -218,7 +212,8 @@ export const KeyValue = ({
   borderless = false,
   shadow = true,
   customHeader,
-  headless = false
+  headless = false,
+  noActions = false
 }) => {
   const handleHeaderClick = method === 'edit' && onToggleExpanded;
 
@@ -271,14 +266,14 @@ export const KeyValue = ({
       {expanded ? (
         <CardOutlet>
           <Padding
-            top={headless ? 0 : 3}
-            bottom={borderless ? 0 : 3}
-            horizontal={borderless ? 0 : 3}
+            top={headless ? '0' : '3'}
+            bottom={borderless ? '0' : '3'}
+            horizontal={borderless ? '0' : '3'}
           >
             {error && !submitting ? (
               <Row>
                 <Col xs={12}>
-                  <Margin bottom={5}>
+                  <Margin bottom="5">
                     <Message error>
                       <MessageTitle>Ooops!</MessageTitle>
                       <MessageDescription>{error}</MessageDescription>
@@ -311,52 +306,54 @@ export const KeyValue = ({
             {input !== 'textarea' && input !== 'input'
               ? input(submitting)
               : null}
-            <Margin top={2}>
-              <Row between="xs" middle="xs">
-                <Col xs={method === 'add' ? 12 : 7}>
-                  <MarginalButton
-                    id={id ? 'kv-cancel-button-' + id : null}
-                    type="button"
-                    onClick={onCancel}
-                    disabled={disabled || submitting}
-                    secondary
-                  >
-                    <span>Cancel</span>
-                  </MarginalButton>
-                  <Button
-                    id={id ? 'kv-submit-button-' + id : null}
-                    type="submit"
-                    disabled={pristine || invalid}
-                    loading={submitting && !removing}
-                  >
-                    <span>{method === 'add' ? 'Create' : 'Save'}</span>
-                  </Button>
-                </Col>
-                {!noRemove && (
-                  <Col xs={method === 'add' ? false : 5}>
-                    <Button
+            {noActions ? null : (
+              <Margin top="2">
+                <Row between="xs" middle="xs">
+                  <Col xs={method === 'add' ? 12 : 7}>
+                    <MarginalButton
+                      id={id ? 'kv-cancel-button-' + id : null}
                       type="button"
-                      onClick={onRemove}
+                      onClick={onCancel}
                       disabled={disabled || submitting}
-                      loading={removing}
                       secondary
-                      right
-                      icon
-                      error
-                      id={id ? 'kv-remove-button-' + id : null}
                     >
-                      <Margin right={2}>
-                        <DeleteIcon
-                          disabled={disabled || submitting}
-                          fill={disabled || submitting ? undefined : theme.red}
-                        />
-                      </Margin>
-                      <span>Delete</span>
+                      <span>Cancel</span>
+                    </MarginalButton>
+                    <Button
+                      id={id ? 'kv-submit-button-' + id : null}
+                      type="submit"
+                      disabled={pristine || invalid}
+                      loading={submitting && !removing}
+                    >
+                      <span>{method === 'add' ? 'Create' : 'Save'}</span>
                     </Button>
                   </Col>
-                )}
-              </Row>
-            </Margin>
+                  {!noRemove && (
+                    <Col xs={method === 'add' ? false : 5}>
+                      <Button
+                        type="button"
+                        onClick={onRemove}
+                        disabled={disabled || submitting}
+                        loading={removing}
+                        secondary
+                        right
+                        icon
+                        error
+                        id={id ? 'kv-remove-button-' + id : null}
+                      >
+                        <Margin right="2">
+                          <DeleteIcon
+                            disabled={disabled || submitting}
+                            fill={disabled || submitting ? undefined : 'red'}
+                          />
+                        </Margin>
+                        <span>Delete</span>
+                      </Button>
+                    </Col>
+                  )}
+                </Row>
+              </Margin>
+            )}
           </Padding>
         </CardOutlet>
       ) : null}
@@ -379,8 +376,8 @@ KeyValue.propTypes = {
   onRemove: PropTypes.func
 };
 
-export default withTheme(({ handleSubmit, ...rest }) => (
-  <Form onSubmit={handleSubmit}>
+export default ({ handleSubmit, ...rest }) => (
+  <form onSubmit={handleSubmit}>
     <KeyValue {...rest} />
-  </Form>
-));
+  </form>
+);
diff --git a/packages/resource-widgets/src/network/index.js b/packages/resource-widgets/src/network/index.js
index 59b5ba5a..368a4d65 100644
--- a/packages/resource-widgets/src/network/index.js
+++ b/packages/resource-widgets/src/network/index.js
@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import React, { Fragment } from 'react';
 import { Field } from 'redux-form';
 import { Row, Col } from 'joyent-react-styled-flexboxgrid';
@@ -54,11 +53,11 @@ const ResponsiveFormGroup = styled(FormGroup)`
 `;
 
 export const Collapsed = ({ name, fabric, ...network }) => (
-  <Margin inline right={3} top={3}>
+  <Margin inline right="3" top="3">
     <Box>
       <Flex column>
         <FlexItem>
-          <Margin left={3} right={3} top={2} bottom={2}>
+          <Margin left="3" right="3" top="2" bottom="2">
             <P>{name}</P>
           </Margin>
         </FlexItem>
@@ -66,13 +65,13 @@ export const Collapsed = ({ name, fabric, ...network }) => (
           <Divider noMargin height={remcalc(0)} />
         </FlexItem>
         <FlexItem>
-          <Margin left={3} right={3} top={2} bottom={2}>
+          <Margin left="3" right="3" top="2" bottom="2">
             <Flex>
-              <Margin right={5}>
+              <Margin right="5">
                 <FlexItem>
                   <Flex alignCenter>
                     <FlexItem>
-                      <Margin right={1}>
+                      <Margin right="1">
                         {network.public ? <PublicIcon /> : <PrivateIcon />}
                       </Margin>
                     </FlexItem>
@@ -86,7 +85,7 @@ export const Collapsed = ({ name, fabric, ...network }) => (
                 <FlexItem>
                   <Flex alignCenter>
                     <FlexItem>
-                      <Margin right={1}>
+                      <Margin right="1">
                         {fabric ? <FabricIcon /> : <DataCenterIcon />}
                       </Margin>
                     </FlexItem>
@@ -130,7 +129,7 @@ export const Expanded = ({
             {readOnly ? null : (
               <CardHeaderBox>
                 <FormGroup
-                  id={'network-checkbox-' + paramCase(name)}
+                  id={`network-checkbox-${paramCase(name)}`}
                   name={id}
                   field={Field}
                 >
@@ -147,16 +146,16 @@ export const Expanded = ({
           <CardOutlet>
             <Padding all={{ mobile: 3, tablet: 5 }}>
               {description && (
-                <Margin bottom={3}>
+                <Margin bottom="3">
                   <P>{description}</P>
                 </Margin>
               )}
               <Flex>
-                <Margin right={5}>
+                <Margin right="5">
                   <FlexItem>
                     <Flex alignCenter>
                       <FlexItem>
-                        <Margin right={1}>
+                        <Margin right="1">
                           {network.public ? <PublicIcon /> : <PrivateIcon />}
                         </Margin>
                       </FlexItem>
@@ -166,11 +165,11 @@ export const Expanded = ({
                     </Flex>
                   </FlexItem>
                 </Margin>
-                <Margin right={5}>
+                <Margin right="5">
                   <FlexItem>
                     <Flex alignCenter>
                       <FlexItem>
-                        <Margin right={1}>
+                        <Margin right="1">
                           {fabric ? <FabricIcon /> : <DataCenterIcon />}
                         </Margin>
                       </FlexItem>
@@ -206,11 +205,11 @@ export const Expanded = ({
               <SmallOnly>
                 {fabric ? (
                   <Flex>
-                    <Margin right={5}>
+                    <Margin right="5">
                       <FlexItem>
                         <Flex alignCenter>
                           <FlexItem>
-                            <Margin right={1}>
+                            <Margin right="1">
                               <InstanceCountIcon />
                             </Margin>
                           </FlexItem>
@@ -227,7 +226,7 @@ export const Expanded = ({
               </SmallOnly>
               {fabric ? (
                 <Fragment>
-                  <Margin top={3}>
+                  <Margin top="3">
                     <Card collapsed={!infoExpanded} actionable={!infoExpanded}>
                       <BaseCardHeader
                         secondary={false}
@@ -235,7 +234,7 @@ export const Expanded = ({
                         onClick={onInfoClick}
                       >
                         <CardHeaderMeta>
-                          <Padding left={3} right={3}>
+                          <Padding left="3" right="3">
                             <P>Network information</P>
                           </Padding>
                         </CardHeaderMeta>
@@ -249,9 +248,9 @@ export const Expanded = ({
                             <Flex column>
                               {network.internet_nat ? (
                                 <FlexItem>
-                                  <Margin bottom={3}>
+                                  <Margin bottom="3">
                                     <Flex alignCenter>
-                                      <Margin right={1} top={0.5}>
+                                      <Margin right="1" top="0.5">
                                         <DotIcon
                                           size={remcalc(12)}
                                           color="green"
@@ -265,10 +264,10 @@ export const Expanded = ({
                                 </FlexItem>
                               ) : null}
                               <FlexItem>
-                                <Margin bottom={2}>
+                                <Margin bottom="2">
                                   <ResponsiveFormGroup name="id">
                                     <FormLabel>ID</FormLabel>
-                                    <Margin top={0.5}>
+                                    <Margin top="0.5">
                                       <Input
                                         onBlur={null}
                                         big
@@ -283,7 +282,7 @@ export const Expanded = ({
                               <FlexItem>
                                 <ResponsiveFormGroup name="subnet">
                                   <FormLabel>Subnet</FormLabel>
-                                  <Margin top={0.5}>
+                                  <Margin top="0.5">
                                     <Input
                                       onBlur={null}
                                       big
@@ -297,7 +296,7 @@ export const Expanded = ({
                               <FlexItem>
                                 <ResponsiveFormGroup name="ip-range">
                                   <FormLabel>IP range</FormLabel>
-                                  <Margin top={0.5}>
+                                  <Margin top="0.5">
                                     <Input
                                       onBlur={null}
                                       big
@@ -315,7 +314,7 @@ export const Expanded = ({
                     </Card>
                   </Margin>
                   {machines.length ? (
-                    <Margin top={3}>
+                    <Margin top="3">
                       <Card
                         collapsed={!machinesExpanded}
                         actionable={!machinesExpanded}
@@ -326,7 +325,7 @@ export const Expanded = ({
                           onClick={onMachinesClick}
                         >
                           <CardHeaderMeta>
-                            <Padding left={3} right={3}>
+                            <Padding left="3" right="3">
                               <P>Instances on network</P>
                             </Padding>
                           </CardHeaderMeta>
@@ -338,7 +337,7 @@ export const Expanded = ({
                         </BaseCardHeader>
                         {machinesExpanded ? (
                           <CardOutlet>
-                            <Padding top={2} bottom={2} left={3} right={3}>
+                            <Padding top="2" bottom="2" left="3" right="3">
                               <Flex column>
                                 {machines.map(({ name }) => (
                                   <FlexItem>
diff --git a/packages/resource-widgets/src/post/index.js b/packages/resource-widgets/src/post/index.js
new file mode 100644
index 00000000..eac00e18
--- /dev/null
+++ b/packages/resource-widgets/src/post/index.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Margin, Padding } from 'styled-components-spacing';
+import Flex, { FlexItem } from 'styled-flex-component';
+import titleCase from 'title-case';
+import plur from 'plur';
+
+import { H2, P, Anchor, Button, Card, CardOutlet } from 'joyent-ui-toolkit';
+
+export const Title = ({ children, ...props }) => (
+  <Margin bottom="3">
+    <H2 {...props}>{children}</H2>
+  </Margin>
+);
+
+export const Content = ({ children, ...props }) => (
+  <Margin bottom="2">
+    <P {...props}>{children}</P>
+  </Margin>
+);
+
+export default ({
+  children,
+  id = '',
+  object = 'instance',
+  name = 'image',
+  altCreateTo,
+  ...rest
+}) => (
+  <Card {...rest}>
+    <CardOutlet>
+      <Padding all="5">
+        {children}
+        <P>Where would you like to return to?</P>
+        <Margin top="5">
+          <Flex alignCenter>
+            <FlexItem>
+              <Margin right="1">
+                <Button to={`/${plur(object)}/${id}`} component={Link}>
+                  View {object}
+                </Button>
+              </Margin>
+            </FlexItem>
+            <FlexItem>
+              <Margin right="3">
+                <Button to={`/${plur(object)}`} component={Link} secondary>
+                  {titleCase(object)} list
+                </Button>
+              </Margin>
+            </FlexItem>
+            {altCreateTo ? (
+              <FlexItem>
+                <Anchor to={altCreateTo} component={Link}>
+                  Create {name} from {object}
+                </Anchor>
+              </FlexItem>
+            ) : null}
+          </Flex>
+        </Margin>
+      </Padding>
+    </CardOutlet>
+  </Card>
+);
diff --git a/packages/ui-toolkit/.eslintrc b/packages/ui-toolkit/.eslintrc
deleted file mode 100644
index 740ed1f2..00000000
--- a/packages/ui-toolkit/.eslintrc
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "extends": "joyent-portal",
-  "rules": {
-    "no-console": 1,
-    "new-cap": 0,
-    "jsx-a11y/href-no-hash": 0,
-    "no-negated-condition": 0
-  }
-}
diff --git a/packages/ui-toolkit/package.json b/packages/ui-toolkit/package.json
index c5e31227..660c07ea 100644
--- a/packages/ui-toolkit/package.json
+++ b/packages/ui-toolkit/package.json
@@ -14,8 +14,6 @@
     "build:lib": "NODE_ENV=production redrun -p build:es build:umd",
     "build:bundle": "echo 0",
     "prepublish": "NODE_ENV=production redrun build:lib",
-    "lint": "redrun lint:ci -- --fix",
-    "lint:ci": "NODE_ENV=test eslint . --ext .js --ext .md",
     "test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
     "test:ci": "redrun test",
     "build:es": "babel src --out-dir dist/es --ignore spec.js",
diff --git a/packages/ui-toolkit/src/base/global.js b/packages/ui-toolkit/src/base/global.js
index fa4de3b6..2d59d872 100644
--- a/packages/ui-toolkit/src/base/global.js
+++ b/packages/ui-toolkit/src/base/global.js
@@ -48,9 +48,14 @@ export default ({ theme }) => css`
     border: solid ${remcalc(1)} ${theme.grey};
     margin: ${remcalc(8)} 0 ${remcalc(8)} 0;
     font-family: "Roboto Mono", monospace !important;
+    height: ${remcalc(180)} !important;
   }
 
   [name=user-script] .CodeMirror {
     margin: 0;
   }
+
+  form {
+    margin: 0;
+  }
 `;
diff --git a/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
index e0fb7f61..4c488ba7 100644
--- a/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
@@ -4,7 +4,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
 .c10 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -277,7 +277,7 @@ exports[`Breadcrumb Default Item 1`] = `
 .c2 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
diff --git a/packages/ui-toolkit/src/breadcrumb/index.js b/packages/ui-toolkit/src/breadcrumb/index.js
index 8c669782..5e96a5c3 100644
--- a/packages/ui-toolkit/src/breadcrumb/index.js
+++ b/packages/ui-toolkit/src/breadcrumb/index.js
@@ -15,7 +15,7 @@ const BreadcrumContianer = styled(Container)`
  */
 export default ({ children, ...rest }) => (
   <BreadcrumContianer {...rest} fluid>
-    <Padding top={1} bottom={1}>
+    <Padding top="1" bottom="1">
       <Container>
         <Row name="breadcrum">
           <Col xs={12}>{children}</Col>
diff --git a/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap b/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap
index 9c704622..a4baaa83 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
@@ -74,7 +74,7 @@ exports[`Button Default Button 1`] = `
 
 .c0:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c0:active,
@@ -187,7 +187,7 @@ exports[`Button Disabled Button 1`] = `
 
 .c0:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c0:active,
@@ -309,7 +309,7 @@ exports[`Button Error Button 1`] = `
 
 .c0:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c0:active,
@@ -441,7 +441,7 @@ exports[`Button Loading Button 1`] = `
 
 .c0:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c0:active,
@@ -565,7 +565,7 @@ exports[`Button Secondary Button 1`] = `
 
 .c0:hover {
   background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c0:active,
diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js
index def39919..4f2faaf8 100644
--- a/packages/ui-toolkit/src/button/index.js
+++ b/packages/ui-toolkit/src/button/index.js
@@ -111,7 +111,7 @@ const Button = styled(BaseButton)`
 
   &:hover {
     background-color: ${props => props.theme.primaryHover};
-    border: solid ${remcalc(1)} ${props => props.theme.primaryActive};
+    border-color: ${props => props.theme.primaryActive};
   }
 
   &:active,
diff --git a/packages/ui-toolkit/src/card/demo.md b/packages/ui-toolkit/src/card/demo.md
index 2a2195aa..37a0417d 100644
--- a/packages/ui-toolkit/src/card/demo.md
+++ b/packages/ui-toolkit/src/card/demo.md
@@ -6,7 +6,7 @@ const { Margin } = require('styled-components-spacing');
 const { default: Card } = require('.');
 
 <Card>
-  <Margin top={11} />
+  <Margin top="11" />
 </Card>;
 ```
 
@@ -22,7 +22,7 @@ const { Actions } = require('../icons');
 <Card>
   <Header>
     <HeaderMeta>
-      <Margin left={2} rigth={2}>
+      <Margin left="2" rigth="2">
         <H4 white>Nginx</H4>
       </Margin>
     </HeaderMeta>
@@ -30,7 +30,7 @@ const { Actions } = require('../icons');
       <Actions light />
     </HeaderBox>
   </Header>
-  <Margin top={11} />
+  <Margin top="11" />
 </Card>;
 ```
 
@@ -46,7 +46,7 @@ const { Actions } = require('../icons');
 <Card disabled>
   <Header>
     <HeaderMeta>
-      <Margin left={2} rigth={2}>
+      <Margin left="2" rigth="2">
         <H4>Nginx</H4>
       </Margin>
     </HeaderMeta>
@@ -54,7 +54,7 @@ const { Actions } = require('../icons');
       <Actions />
     </HeaderBox>
   </Header>
-  <Margin top={11} />
+  <Margin top="11" />
 </Card>;
 ```
 
@@ -71,19 +71,19 @@ const { TagList, TagItem } = require('../tags');
 const { Fragment } = React;
 
 <Fragment>
-  <Margin bottom={2}>
+  <Margin bottom="2">
     <Card>
-      <Padding left={3} right={3} top={1.5} bottom={1.5}>
+      <Padding left="3" right="3" top="1.5" bottom="1.5">
         <Row>
           <Col xs={3}>
             <Flex justifyStart alignCenter contentStretch full>
-              <Margin right={0.5}>
+              <Margin right="0.5">
                 <FlexItem>
                   <Strong>From: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>
-                <Margin top={0.5} bottom={0.5}>
+                <Margin top="0.5" bottom="0.5">
                   <P>All VMs in DC</P>
                 </Margin>
               </Flex>
@@ -91,13 +91,13 @@ const { Fragment } = React;
           </Col>
           <Col xs={3}>
             <Flex justifyStart alignCenter contentStretch full>
-              <Margin right={0.5}>
+              <Margin right="0.5">
                 <FlexItem>
                   <Strong>To: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>
-                <Margin top={0.5} bottom={0.5}>
+                <Margin top="0.5" bottom="0.5">
                   <P>Any</P>
                 </Margin>
               </Flex>
@@ -105,13 +105,13 @@ const { Fragment } = React;
           </Col>
           <Col xs={2}>
             <Flex justifyStart alignCenter contentStretch full>
-              <Margin right={0.5}>
+              <Margin right="0.5">
                 <FlexItem>
                   <Strong>Protocol: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>
-                <Margin top={0.5} bottom={0.5}>
+                <Margin top="0.5" bottom="0.5">
                   <P>TCP</P>
                 </Margin>
               </Flex>
@@ -119,13 +119,13 @@ const { Fragment } = React;
           </Col>
           <Col xs={2}>
             <Flex justifyStart alignCenter contentStretch full>
-              <Margin right={0.5}>
+              <Margin right="0.5">
                 <FlexItem>
                   <Strong>Ports: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>
-                <Margin top={0.5} bottom={0.5}>
+                <Margin top="0.5" bottom="0.5">
                   <P>80;443</P>
                 </Margin>
               </Flex>
@@ -133,13 +133,13 @@ const { Fragment } = React;
           </Col>
           <Col xs={2}>
             <Flex justifyStart alignCenter contentStretch full>
-              <Margin right={0.5}>
+              <Margin right="0.5">
                 <FlexItem>
                   <Strong>Action: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>
-                <Margin top={0.5} bottom={0.5}>
+                <Margin top="0.5" bottom="0.5">
                   <P>ALLOW</P>
                 </Margin>
               </Flex>
@@ -149,19 +149,19 @@ const { Fragment } = React;
       </Padding>
     </Card>
   </Margin>
-  <Margin bottom={2}>
+  <Margin bottom="2">
     <Card>
-      <Padding left={3} right={3} top={1.5} bottom={1.5}>
+      <Padding left="3" right="3" top="1.5" bottom="1.5">
         <Row>
           <Col xs={3}>
             <Flex justifyStart alignCenter contentStretch full>
-              <Margin right={0.5}>
+              <Margin right="0.5">
                 <FlexItem>
                   <Strong>From: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>
-                <Margin top={0.5} bottom={0.5}>
+                <Margin top="0.5" bottom="0.5">
                   <P>All VMs in DC</P>
                 </Margin>
               </Flex>
@@ -169,13 +169,13 @@ const { Fragment } = React;
           </Col>
           <Col xs={3}>
             <Flex justifyStart alignCenter contentStretch full>
-              <Margin right={0.5}>
+              <Margin right="0.5">
                 <FlexItem>
                   <Strong>To: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>
-                <Margin top={0.5} bottom={0.5}>
+                <Margin top="0.5" bottom="0.5">
                   <P>Any</P>
                 </Margin>
               </Flex>
@@ -183,13 +183,13 @@ const { Fragment } = React;
           </Col>
           <Col xs={2}>
             <Flex justifyStart alignCenter contentStretch full>
-              <Margin right={0.5}>
+              <Margin right="0.5">
                 <FlexItem>
                   <Strong>Protocol: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>
-                <Margin top={0.5} bottom={0.5}>
+                <Margin top="0.5" bottom="0.5">
                   <P>UDP</P>
                 </Margin>
               </Flex>
@@ -197,13 +197,13 @@ const { Fragment } = React;
           </Col>
           <Col xs={2}>
             <Flex justifyStart alignCenter contentStretch full>
-              <Margin right={0.5}>
+              <Margin right="0.5">
                 <FlexItem>
                   <Strong>Ports: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>
-                <Margin top={0.5} bottom={0.5}>
+                <Margin top="0.5" bottom="0.5">
                   <P>80;443</P>
                 </Margin>
               </Flex>
@@ -211,13 +211,13 @@ const { Fragment } = React;
           </Col>
           <Col xs={2}>
             <Flex justifyStart alignCenter contentStretch full>
-              <Margin right={0.5}>
+              <Margin right="0.5">
                 <FlexItem>
                   <Strong>Action: </Strong>
                 </FlexItem>
               </Margin>
               <Flex alignCenter>
-                <Margin top={0.5} bottom={0.5}>
+                <Margin top="0.5" bottom="0.5">
                   <P>ALLOW</P>
                 </Margin>
               </Flex>
@@ -228,11 +228,11 @@ const { Fragment } = React;
     </Card>
   </Margin>
   <Card>
-    <Padding left={3} right={3} top={1.5} bottom={1.5}>
+    <Padding left="3" right="3" top="1.5" bottom="1.5">
       <Row>
         <Col xs={3}>
           <Flex justifyStart alignCenter contentStretch full>
-            <Margin right={0.5}>
+            <Margin right="0.5">
               <FlexItem>
                 <Strong>From: </Strong>
               </FlexItem>
@@ -246,13 +246,13 @@ const { Fragment } = React;
         </Col>
         <Col xs={3}>
           <Flex justifyStart alignCenter contentStretch full>
-            <Margin right={0.5}>
+            <Margin right="0.5">
               <FlexItem>
                 <Strong>To: </Strong>
               </FlexItem>
             </Margin>
             <Flex alignCenter>
-              <Margin top={0.5} bottom={0.5}>
+              <Margin top="0.5" bottom="0.5">
                 <P>Any</P>
               </Margin>
             </Flex>
@@ -260,13 +260,13 @@ const { Fragment } = React;
         </Col>
         <Col xs={2}>
           <Flex justifyStart alignCenter contentStretch full>
-            <Margin right={0.5}>
+            <Margin right="0.5">
               <FlexItem>
                 <Strong>Protocol: </Strong>
               </FlexItem>
             </Margin>
             <Flex alignCenter>
-              <Margin top={0.5} bottom={0.5}>
+              <Margin top="0.5" bottom="0.5">
                 <P>TCP</P>
               </Margin>
             </Flex>
@@ -274,13 +274,13 @@ const { Fragment } = React;
         </Col>
         <Col xs={2}>
           <Flex justifyStart alignCenter contentStretch full>
-            <Margin right={0.5}>
+            <Margin right="0.5">
               <FlexItem>
                 <Strong>Ports: </Strong>
               </FlexItem>
             </Margin>
             <Flex alignCenter>
-              <Margin top={0.5} bottom={0.5}>
+              <Margin top="0.5" bottom="0.5">
                 <P>80;443</P>
               </Margin>
             </Flex>
@@ -288,13 +288,13 @@ const { Fragment } = React;
         </Col>
         <Col xs={2}>
           <Flex justifyStart alignCenter contentStretch full>
-            <Margin right={0.5}>
+            <Margin right="0.5">
               <FlexItem>
                 <Strong>Action: </Strong>
               </FlexItem>
             </Margin>
             <Flex alignCenter>
-              <Margin top={0.5} bottom={0.5}>
+              <Margin top="0.5" bottom="0.5">
                 <P>ALLOW</P>
               </Margin>
             </Flex>
diff --git a/packages/ui-toolkit/src/card/header.js b/packages/ui-toolkit/src/card/header.js
index 9c8f96c9..93fcd6df 100644
--- a/packages/ui-toolkit/src/card/header.js
+++ b/packages/ui-toolkit/src/card/header.js
@@ -170,7 +170,9 @@ const Header = ({ children, transparent, shadow, ...rest }) => {
     // if parent is primary, become secondary
     const isSecondary = isBoolean(rest.secondary)
       ? rest.secondary
-      : transparent ? secondary : secondary || parentPrimary;
+      : transparent
+        ? secondary
+        : secondary || parentPrimary;
     // if parent is primary, don't become transparent
     const isTransparent = transparent || secondary || tertiary;
 
diff --git a/packages/ui-toolkit/src/divider/index.js b/packages/ui-toolkit/src/divider/index.js
index e4a0fa58..d9fb7dc4 100644
--- a/packages/ui-toolkit/src/divider/index.js
+++ b/packages/ui-toolkit/src/divider/index.js
@@ -7,6 +7,7 @@ import remcalc from 'remcalc';
 const HorizontalDivider = styled(Row)`
   height: 1px;
   background-color: ${props => props.theme.grey};
+  height: ${props => props.height};
 
   ${is('transparent')`
     background-color: transparent;
diff --git a/packages/ui-toolkit/src/download.md b/packages/ui-toolkit/src/download.md
index 1e9d8cee..ebef9e5f 100644
--- a/packages/ui-toolkit/src/download.md
+++ b/packages/ui-toolkit/src/download.md
@@ -12,11 +12,9 @@ yarn add joyent-portal-ui-toolkit
 ### Usage
 
 ```js static
-import { H1 } from 'joyent-portal-ui-toolkit'
+import { H1 } from 'joyent-portal-ui-toolkit';
 
-export default () => (
-  <H1>Hello World</H1>
-);
+export default () => <H1>Hello World</H1>;
 ```
 
 ### Demo
diff --git a/packages/ui-toolkit/src/editor/index.js b/packages/ui-toolkit/src/editor/index.js
index 75d90864..f9942a59 100644
--- a/packages/ui-toolkit/src/editor/index.js
+++ b/packages/ui-toolkit/src/editor/index.js
@@ -38,11 +38,19 @@ class ManifestEditorBundle extends Component {
   }
 }
 
-export default ({ input = {}, value = '', mode, defaultValue, readOnly }) => (
+export default ({
+  input = {},
+  value = '',
+  mode,
+  defaultValue,
+  readOnly,
+  ...props
+}) => (
   <ManifestEditorBundle
     mode={mode}
     {...input}
     value={input.value || value || defaultValue}
     readOnly={readOnly}
+    {...props}
   />
 );
diff --git a/packages/ui-toolkit/src/footer/index.js b/packages/ui-toolkit/src/footer/index.js
index b789f369..347a4bf8 100644
--- a/packages/ui-toolkit/src/footer/index.js
+++ b/packages/ui-toolkit/src/footer/index.js
@@ -57,4 +57,4 @@ export default () => (
   </List>
 );
 
-export { default as StickyFooter } from './sticky-footer';
+export { default as Sticky } from './sticky';
diff --git a/packages/ui-toolkit/src/footer/sticky-footer.js b/packages/ui-toolkit/src/footer/sticky.js
similarity index 93%
rename from packages/ui-toolkit/src/footer/sticky-footer.js
rename to packages/ui-toolkit/src/footer/sticky.js
index b8f1c7fe..5a31568a 100644
--- a/packages/ui-toolkit/src/footer/sticky-footer.js
+++ b/packages/ui-toolkit/src/footer/sticky.js
@@ -20,7 +20,7 @@ const Footer = styled.div`
   align-content: stretch;
   align-items: stretch;
   background-color: ${props =>
-    props.fill ? props => props.fill : 'rgba(241, 241, 241, 1)'};
+    props.fill ? props.theme[props.fill] : 'rgba(241, 241, 241, 1)'};
   border-top: ${remcalc(1)} solid ${props => props.theme.grey};
   max-height: ${remcalc(53)};
   min-height: ${remcalc(53)};
diff --git a/packages/ui-toolkit/src/form/base/input.js b/packages/ui-toolkit/src/form/base/input.js
index ffef73c1..f89a842f 100644
--- a/packages/ui-toolkit/src/form/base/input.js
+++ b/packages/ui-toolkit/src/form/base/input.js
@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { Fragment } from 'react';
+import Flex, { FlexItem } from 'styled-flex-component';
 import { Subscriber } from 'joy-react-broadcast';
 import styled, { css } from 'styled-components';
 import remcalc from 'remcalc';
 import is, { isNot } from 'styled-is';
 import PropTypes from 'prop-types';
 
+import Button from '../../button';
+
 const colorWithDisabled = props =>
   props.disabled ? props.theme.disabled : props.theme.text;
 
@@ -193,9 +196,32 @@ const style = css`
     width: ${remcalc(355)};
     max-width: 100%;
   `};
+
+  ${is('number')`
+    border-radius: 0;
+  `};
 `;
 
-const BaseInput = Component => ({ resize, onBlur, type, ...props }) => {
+const LeftButton = styled(Button)`
+  border-top-left-radius: ${props => props.theme.borderRadius};
+  border-bottom-left-radius: ${props => props.theme.borderRadius};
+  border-right: 0;
+`;
+
+const RightButton = styled(Button)`
+  border-top-right-radius: ${props => props.theme.borderRadius};
+  border-bottom-right-radius: ${props => props.theme.borderRadius};
+  border-left: 0;
+`;
+
+const BaseInput = Component => ({
+  resize,
+  onBlur,
+  type,
+  onPlusClick,
+  onMinusClick,
+  ...props
+}) => {
   const render = value => {
     const _value = value || {};
     const { input = {}, meta = {}, id = '' } = _value;
@@ -204,24 +230,47 @@ const BaseInput = Component => ({ resize, onBlur, type, ...props }) => {
     const hasWarning = Boolean(props.warning || _value.warning || meta.warning);
     const hasSuccess = Boolean(props.success || _value.success || meta.success);
 
+    const number = type === 'number' && (onPlusClick || onMinusClick);
     const textarea = type === 'textarea';
     const fluid = Boolean(props.fluid);
     const mono = Boolean(props.mono);
 
+    const TheFragment = number ? Flex : Fragment;
+    const TheItem = number ? FlexItem : Fragment;
+
     return (
-      <Component
-        {...props}
-        {...input}
-        onBlur={onBlur}
-        id={id}
-        error={hasError}
-        warning={hasWarning}
-        success={hasSuccess}
-        fluid={fluid}
-        mono={mono}
-        resize={textarea ? resize : null}
-        textarea={textarea}
-      />
+      <TheFragment>
+        {number ? (
+          <TheItem>
+            <LeftButton type="button" onClick={onMinusClick} secondary actions>
+              -
+            </LeftButton>
+          </TheItem>
+        ) : null}
+        <TheItem>
+          <Component
+            {...props}
+            {...input}
+            onBlur={onBlur}
+            id={id}
+            error={hasError}
+            warning={hasWarning}
+            success={hasSuccess}
+            fluid={fluid}
+            mono={mono}
+            resize={textarea ? resize : null}
+            textarea={textarea}
+            number={number}
+          />
+        </TheItem>
+        {number ? (
+          <TheItem>
+            <RightButton type="button" onClick={onPlusClick} secondary actions>
+              +
+            </RightButton>
+          </TheItem>
+        ) : null}
+      </TheFragment>
     );
   };
 
diff --git a/packages/ui-toolkit/src/form/copiable-field.js b/packages/ui-toolkit/src/form/copiable-field.js
index 4f44afae..4b857ce9 100644
--- a/packages/ui-toolkit/src/form/copiable-field.js
+++ b/packages/ui-toolkit/src/form/copiable-field.js
@@ -80,7 +80,7 @@ class CopyToClipboardTooltip extends Component {
 const CopiableField = ({ md, label, text, ...rest }) => (
   <Row>
     <Col xs={12} md={md || 7}>
-      <Margin bottom={0.5}>
+      <Margin bottom="0.5">
         {label ? <FormLabel>{label}</FormLabel> : null}
       </Margin>
       <InputIconWrapper {...rest}>
diff --git a/packages/ui-toolkit/src/grids/Readme.md b/packages/ui-toolkit/src/grids/Readme.md
index 8eb55a8f..d0192791 100644
--- a/packages/ui-toolkit/src/grids/Readme.md
+++ b/packages/ui-toolkit/src/grids/Readme.md
@@ -3,11 +3,14 @@
 ```jsx noeditor
 const big = require('./big.svg');
 
-<img style={{
+<img
+  style={{
     maxWidth: '100%',
     marginTop: 22,
     marginBottom: 40
-}} src={big} />
+  }}
+  src={big}
+/>;
 ```
 
 ### Medium Grid
@@ -15,11 +18,14 @@ const big = require('./big.svg');
 ```jsx noeditor
 const medium = require('./medium.svg');
 
-<img style={{
+<img
+  style={{
     maxWidth: '100%',
     marginTop: 22,
     marginBottom: 40
-}} src={medium} />
+  }}
+  src={medium}
+/>;
 ```
 
 ### Small Grid
@@ -27,11 +33,14 @@ const medium = require('./medium.svg');
 ```jsx noeditor
 const small = require('./small.svg');
 
-<img style={{
+<img
+  style={{
     maxWidth: '100%',
     marginTop: 22,
     marginBottom: 40
-}} src={small} />
+  }}
+  src={small}
+/>;
 ```
 
 ### Baseline & Spacing
@@ -41,9 +50,12 @@ Most of the horizontal spacing between different elements and components is deri
 ```jsx noeditor
 const baseline = require('./baseline.svg');
 
-<img style={{
+<img
+  style={{
     maxWidth: '100%',
     marginTop: 22,
     marginBottom: 40
-}} src={baseline} />
+  }}
+  src={baseline}
+/>;
 ```
diff --git a/packages/ui-toolkit/src/grids/vertical.md b/packages/ui-toolkit/src/grids/vertical.md
index 7054e8ff..59a6d4a2 100644
--- a/packages/ui-toolkit/src/grids/vertical.md
+++ b/packages/ui-toolkit/src/grids/vertical.md
@@ -9,11 +9,14 @@ When defining the space necessary between and within components, alway use one o
 ```jsx noeditor
 const spacing = require('./spacing.svg');
 
-<img style={{
+<img
+  style={{
     maxWidth: '100%',
     marginTop: 22,
     marginBottom: 40
-}} src={spacing} />
+  }}
+  src={spacing}
+/>;
 ```
 
 ### Stack - Vertical spacing
@@ -23,11 +26,14 @@ Stack, or the vertical spacing between elements, uses all of the values provided
 ```jsx noeditor
 const stack = require('./stack.svg');
 
-<img style={{
+<img
+  style={{
     maxWidth: '100%',
     marginTop: 22,
     marginBottom: 40
-}} src={stack} />
+  }}
+  src={stack}
+/>;
 ```
 
 <h4>Stack example</h4>
@@ -35,11 +41,14 @@ const stack = require('./stack.svg');
 ```jsx noeditor
 const stackExample = require('./stack-example.svg');
 
-<img style={{
+<img
+  style={{
     maxWidth: '100%',
     marginTop: 22,
     marginBottom: 40
-}} src={stackExample} />
+  }}
+  src={stackExample}
+/>;
 ```
 
 ### Inline - Horizontal spacing
@@ -49,11 +58,14 @@ Inline, or the horizontal spacing between elements, is used to provide additiona
 ```jsx noeditor
 const inline = require('./inline.svg');
 
-<img style={{
+<img
+  style={{
     maxWidth: '100%',
     marginTop: 22,
     marginBottom: 40
-}} src={inline} />
+  }}
+  src={inline}
+/>;
 ```
 
 <h4>Inline example</h4>
@@ -61,11 +73,14 @@ const inline = require('./inline.svg');
 ```jsx noeditor
 const inlineExample = require('./inline-example.svg');
 
-<img style={{
+<img
+  style={{
     maxWidth: '100%',
     marginTop: 22,
     marginBottom: 40
-}} src={inlineExample} />
+  }}
+  src={inlineExample}
+/>;
 ```
 
 ### Uniform Inset — Interior padding
@@ -75,11 +90,14 @@ Uniform Inset, or the equal padding on the interior of a component, takes the pl
 ```jsx noeditor
 const inset = require('./inset.svg');
 
-<img style={{
+<img
+  style={{
     maxWidth: '100%',
     marginTop: 22,
     marginBottom: 40
-}} src={inset} />
+  }}
+  src={inset}
+/>;
 ```
 
 <h4>Uniform Inset example</h4>
@@ -87,11 +105,14 @@ const inset = require('./inset.svg');
 ```jsx noeditor
 const insetExample = require('./inset-example.svg');
 
-<img style={{
+<img
+  style={{
     maxWidth: '100%',
     marginTop: 22,
     marginBottom: 40
-}} src={insetExample} />
+  }}
+  src={insetExample}
+/>;
 ```
 
 ### Squish Inset — Irregular interior padding
@@ -101,11 +122,14 @@ Squish inset, or irregular interior padding, adopts similar patterns of use to t
 ```jsx noeditor
 const squishInset = require('./squish-inset.svg');
 
-<img style={{
+<img
+  style={{
     maxWidth: '100%',
     marginTop: 22,
     marginBottom: 40
-}} src={squishInset} />
+  }}
+  src={squishInset}
+/>;
 ```
 
 <h4>Squish Inset example</h4>
@@ -113,9 +137,12 @@ const squishInset = require('./squish-inset.svg');
 ```jsx noeditor
 const squishInsetExample = require('./squish-inset-example.svg');
 
-<img style={{
+<img
+  style={{
     maxWidth: '100%',
     marginTop: 22,
     marginBottom: 40
-}} src={squishInsetExample} />
+  }}
+  src={squishInsetExample}
+/>;
 ```
diff --git a/packages/ui-toolkit/src/hr/index.js b/packages/ui-toolkit/src/hr/index.js
index 264ab8ec..ccfe2d60 100644
--- a/packages/ui-toolkit/src/hr/index.js
+++ b/packages/ui-toolkit/src/hr/index.js
@@ -3,4 +3,4 @@ import remcalc from 'remcalc';
 
 import Divider from '../divider';
 
-export default () => <Divider height={remcalc(1)} />;
+export default props => <Divider height={remcalc(1)} {...props} />;
diff --git a/packages/ui-toolkit/src/icons/functional.md b/packages/ui-toolkit/src/icons/functional.md
index 8d75d78a..859adb5d 100644
--- a/packages/ui-toolkit/src/icons/functional.md
+++ b/packages/ui-toolkit/src/icons/functional.md
@@ -118,7 +118,7 @@ const {
   </ListItem>
   <ListItem>
     <Icon>
-      <Dot color='primary' />
+      <Dot color="primary" />
     </Icon>
     <Label>Dot > Primary</Label>
   </ListItem>
diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js
index 5a7602a3..2c6acf7a 100644
--- a/packages/ui-toolkit/src/index.js
+++ b/packages/ui-toolkit/src/index.js
@@ -13,8 +13,7 @@ export { default as Sup } from './text/sup';
 export { default as theme } from './theme';
 export { default as Divider } from './divider';
 export { default as Hr } from './hr';
-export { default as Footer, StickyFooter } from './footer';
-export { default as KeyValue } from './key-value';
+export { default as Footer, Sticky as StickyFooter } from './footer';
 export { default as StatusLoader } from './status-loader';
 
 export { default as Breadcrumb, Item as BreadcrumbItem } from './breadcrumb';
diff --git a/packages/ui-toolkit/src/label/index.js b/packages/ui-toolkit/src/label/index.js
index c6dc341c..82bba858 100644
--- a/packages/ui-toolkit/src/label/index.js
+++ b/packages/ui-toolkit/src/label/index.js
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import remcalc from 'remcalc';
+import is from 'styled-is';
 
 const Label = styled.label`
   font-size: ${remcalc(15)};
@@ -9,6 +10,10 @@ const Label = styled.label`
   display: block;
   color: ${props => props.theme.secondary};
   text-align: left;
+
+  ${is('inline')`
+    display: inline-block;
+  `};
 `;
 
 export default Label;
diff --git a/packages/ui-toolkit/src/message/__tests__/__snapshots__/message.spec.js.snap b/packages/ui-toolkit/src/message/__tests__/__snapshots__/message.spec.js.snap
index 37bd6e9e..a1e6691f 100644
--- a/packages/ui-toolkit/src/message/__tests__/__snapshots__/message.spec.js.snap
+++ b/packages/ui-toolkit/src/message/__tests__/__snapshots__/message.spec.js.snap
@@ -6,6 +6,7 @@ exports[`Message Description 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c0 {
@@ -24,7 +25,7 @@ exports[`Message Message 1`] = `
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -34,6 +35,7 @@ exports[`Message Message 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c0 {
@@ -91,7 +93,7 @@ exports[`Message Message Error 1`] = `
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -101,6 +103,7 @@ exports[`Message Message Error 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c0 {
@@ -159,7 +162,7 @@ exports[`Message Message Warning 1`] = `
 .c3 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -169,6 +172,7 @@ exports[`Message Message Warning 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c0 {
@@ -227,7 +231,7 @@ exports[`Message Title 1`] = `
 .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
diff --git a/packages/ui-toolkit/src/pagination/index.js b/packages/ui-toolkit/src/pagination/index.js
index 43e9a271..c887ca36 100644
--- a/packages/ui-toolkit/src/pagination/index.js
+++ b/packages/ui-toolkit/src/pagination/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import styled, { withTheme } from 'styled-components';
+import styled from 'styled-components';
+import { Margin } from 'styled-components-spacing';
 import remcalc from 'remcalc';
 import is from 'styled-is';
 
@@ -47,18 +48,17 @@ export const TableFoot = ({ children, colSpan, ...rest }) => (
   </Tfoot>
 );
 
-export const Item = withTheme(
-  ({
-    children,
-    next,
-    prev,
-    disabled,
-    to,
-    component,
-    active,
-    theme,
-    ...rest
-  }) => (
+export const Item = ({
+  children,
+  next,
+  prev,
+  disabled,
+  to,
+  component,
+  active,
+  ...rest
+}) => (
+  <Margin horizontal="1" inline>
     <Anchor
       disabled={disabled}
       active={active}
@@ -67,20 +67,12 @@ export const Item = withTheme(
       {...rest}
     >
       {prev ? (
-        <Arrow
-          left
-          direction="right"
-          fill={disabled ? theme.grey : theme.primary}
-        />
+        <Arrow left direction="right" fill={disabled ? 'grey' : 'primary'} />
       ) : null}
       {children}
       {next ? (
-        <Arrow
-          right
-          direction="left"
-          fill={disabled ? theme.grey : theme.primary}
-        />
+        <Arrow right direction="left" fill={disabled ? 'grey' : 'primary'} />
       ) : null}
     </Anchor>
-  )
+  </Margin>
 );
diff --git a/packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap b/packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap
index d7932cbd..09ae6473 100644
--- a/packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap
+++ b/packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Popover Divider 1`] = `
 .c0 {
-  width: calc(100% + 2.25rem);
+  width: 100%;
   border-top: 0.0625rem solid rgb(216,216,216);
 }
 
@@ -29,7 +29,7 @@ Array [
     Hello
 </div>,
   .c2 {
-  width: calc(100% + 2.25rem);
+  width: 100%;
   border-top: 0.0625rem solid rgb(216,216,216);
 }
 
@@ -37,6 +37,7 @@ Array [
   display: block;
   text-align: left;
   font-size: 1rem;
+  margin: 0.375rem 1.125rem;
   cursor: pointer;
 }
 
diff --git a/packages/ui-toolkit/src/popover/divider.js b/packages/ui-toolkit/src/popover/divider.js
index 41741e39..e056a58b 100644
--- a/packages/ui-toolkit/src/popover/divider.js
+++ b/packages/ui-toolkit/src/popover/divider.js
@@ -2,6 +2,6 @@ import styled from 'styled-components';
 import remcalc from 'remcalc';
 
 export default styled.div`
-  width: calc(100% + ${remcalc(36)});
+  width: 100%;
   border-top: ${remcalc(1)} solid ${props => props.theme.grey};
 `;
diff --git a/packages/ui-toolkit/src/popover/item.js b/packages/ui-toolkit/src/popover/item.js
index 37e17eb2..c8defa8a 100644
--- a/packages/ui-toolkit/src/popover/item.js
+++ b/packages/ui-toolkit/src/popover/item.js
@@ -7,7 +7,10 @@ import remcalc from 'remcalc';
 const BaseItem = styled.span`
   display: block;
   text-align: left;
-  font-size: ${remcalc(16)} ${isNot('disabled')`
+  font-size: ${remcalc(16)};
+  margin: ${remcalc(6)} ${remcalc(18)};
+
+  ${isNot('disabled')`
     cursor: pointer;
 
     &:hover {
diff --git a/packages/ui-toolkit/src/principles/readme.md b/packages/ui-toolkit/src/principles/readme.md
index 3ac569ec..6d969b6f 100644
--- a/packages/ui-toolkit/src/principles/readme.md
+++ b/packages/ui-toolkit/src/principles/readme.md
@@ -1,6 +1,6 @@
 ```jsx noeditor
-    const React = require('react');
-    const { default: Principles } = require('./index');
+const React = require('react');
+const { default: Principles } = require('./index');
 
-    <Principles />
+<Principles />;
 ```
diff --git a/packages/ui-toolkit/src/status-loader/__tests__/__snapshots__/loading.spec.js.snap b/packages/ui-toolkit/src/status-loader/__tests__/__snapshots__/loading.spec.js.snap
index 3eec5b55..699e4dab 100644
--- a/packages/ui-toolkit/src/status-loader/__tests__/__snapshots__/loading.spec.js.snap
+++ b/packages/ui-toolkit/src/status-loader/__tests__/__snapshots__/loading.spec.js.snap
@@ -23,6 +23,7 @@ exports[`StatusLoader StatusLoader 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 .c0 {
diff --git a/packages/ui-toolkit/src/status-loader/index.js b/packages/ui-toolkit/src/status-loader/index.js
index 9bc01e6e..7ec14ba5 100644
--- a/packages/ui-toolkit/src/status-loader/index.js
+++ b/packages/ui-toolkit/src/status-loader/index.js
@@ -35,10 +35,10 @@ const Msg = styled(P)`
   text-align: center;
 `;
 
-const StatusLoader = ({ msg, row, inline, small, ...rest }) => (
+const StatusLoader = ({ msg, row, inline, small, children, ...rest }) => (
   <Container row={row} inline={inline} {...rest}>
     <Loader />
-    {!small && <Msg>{msg || 'Loading...'}</Msg>}
+    {!small && <Msg>{children || msg || 'Loading...'}</Msg>}
   </Container>
 );
 
diff --git a/packages/ui-toolkit/src/table/Readme.md b/packages/ui-toolkit/src/table/Readme.md
index 7daad6fb..84f01a7d 100644
--- a/packages/ui-toolkit/src/table/Readme.md
+++ b/packages/ui-toolkit/src/table/Readme.md
@@ -166,7 +166,7 @@ const { default: Flex } = require('styled-flex-component');
           You haven’t commissioned any instances yet, but they’re really easy to
           set up. Click below to get going.
         </P>
-        <Margin top={2}>
+        <Margin top="2">
           <Button>Create Instance</Button>
         </Margin>
       </Flex>
@@ -207,7 +207,7 @@ const { Dot, Actions } = require('../icons');
   <Tbody>
     <Tr>
       <Td padding="0" paddingLeft="12" middle left>
-        <FormGroup paddingTop={4}>
+        <FormGroup>
           <Checkbox noMargin checked />
         </FormGroup>
       </Td>
@@ -228,7 +228,7 @@ const { Dot, Actions } = require('../icons');
     </Tr>
     <Tr>
       <Td padding="0" paddingLeft="12" middle left>
-        <FormGroup paddingTop={4}>
+        <FormGroup>
           <Checkbox noMargin />
         </FormGroup>
       </Td>
@@ -278,7 +278,7 @@ const { Dot } = require('../icons');
   <Tbody>
     <Tr>
       <Td padding="0" paddingLeft="12" middle left selected>
-        <FormGroup paddingTop={4}>
+        <FormGroup>
           <Radio noMargin checked />
         </FormGroup>
       </Td>
@@ -296,7 +296,7 @@ const { Dot } = require('../icons');
     </Tr>
     <Tr>
       <Td padding="0" paddingLeft="12" middle left>
-        <FormGroup paddingTop={4}>
+        <FormGroup>
           <Radio noMargin />
         </FormGroup>
       </Td>
diff --git a/packages/ui-toolkit/src/table/index.js b/packages/ui-toolkit/src/table/index.js
index 0e3f188a..9d8638f8 100644
--- a/packages/ui-toolkit/src/table/index.js
+++ b/packages/ui-toolkit/src/table/index.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import { Broadcast, Subscriber } from 'joy-react-broadcast';
 import isBoolean from 'lodash.isboolean';
+import isUndefined from 'lodash.isundefined';
 import isNaN from 'lodash.isnan';
+import { Margin } from 'styled-components-spacing';
 import styled, { css } from 'styled-components';
 import is, { isOr } from 'styled-is';
 import remcalc from 'remcalc';
@@ -45,7 +47,8 @@ const Column = css`
   white-space: nowrap;
 
   box-sizing: border-box;
-  padding: 0 ${remcalc(24)};
+  padding: 0
+    ${props => remcalc(isUndefined(props.padding) ? 24 : props.padding)};
   height: ${remcalc(60)};
 
   ${handleBreakpoint('xs')};
@@ -62,6 +65,10 @@ const Column = css`
     ${handleBreakpoint('lg')};
   `};
 
+  ${is('shrinken')`
+    height: ${remcalc(42)};
+  `};
+
   ${is('actionable')`
     cursor: pointer;
     user-select: none;
@@ -314,7 +321,9 @@ export const Th = ({ children, ...rest }) => (
       >
         {children}
         {!showSort || !header ? null : (
-          <ArrowIcon direction={sortOrder === 'asc' ? 'down' : 'up'} />
+          <Margin left="1" inline>
+            <ArrowIcon direction={sortOrder === 'asc' ? 'down' : 'up'} />
+          </Margin>
         )}
       </BaseTh>
     )}
diff --git a/packages/ui-toolkit/src/tags/Readme.md b/packages/ui-toolkit/src/tags/Readme.md
index cf02d7bc..766eb070 100644
--- a/packages/ui-toolkit/src/tags/Readme.md
+++ b/packages/ui-toolkit/src/tags/Readme.md
@@ -37,7 +37,7 @@ const { Margin } = require('styled-components-spacing');
 
 <TagItem active>
   Tags:4lyf
-  <Margin left={1}>
+  <Margin left="1">
     <PlusIcon />
   </Margin>
 </TagItem>;
@@ -50,7 +50,7 @@ const { Margin } = require('styled-components-spacing');
 
 <TagItem>
   Tags:4lyf
-  <Margin left={1}>
+  <Margin left="1">
     <PlusIcon />
   </Margin>
 </TagItem>;
@@ -63,7 +63,7 @@ const { Margin } = require('styled-components-spacing');
 
 <TagItem disabled>
   Tags:4lyf
-  <Margin left={1}>
+  <Margin left="1">
     <PlusIcon />
   </Margin>
 </TagItem>;
@@ -76,7 +76,7 @@ const { Margin } = require('styled-components-spacing');
 
 <TagItem error>
   Tags:4lyf
-  <Margin left={1}>
+  <Margin left="1">
     <PlusIcon />
   </Margin>
 </TagItem>;
diff --git a/packages/ui-toolkit/src/tags/list.js b/packages/ui-toolkit/src/tags/list.js
index 64129bf7..7a0a4b1c 100644
--- a/packages/ui-toolkit/src/tags/list.js
+++ b/packages/ui-toolkit/src/tags/list.js
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import remcalc from 'remcalc';
 
 export default styled.ul`
   margin: 0;
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 40b0f7a5..2bd1e6f8 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
@@ -15,6 +15,7 @@ exports[`Button H1 1`] = `
   font-style: normal;
   font-stretch: normal;
   font-weight: normal;
+  margin: 0;
 }
 
 <h1
@@ -60,7 +61,7 @@ exports[`Button H4 1`] = `
 .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -76,7 +77,7 @@ exports[`Button H5 1`] = `
 .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.5rem;
   font-size: 0.9375rem;
 }
@@ -92,7 +93,7 @@ exports[`Button H6 1`] = `
 .c0 {
   margin: 0;
   color: rgb(73,73,73);
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1.125rem;
   font-size: 0.8125rem;
 }
@@ -110,6 +111,7 @@ exports[`Button Paragraph 1`] = `
   margin: 0;
   line-height: 1.5rem;
   font-size: 0.9375rem;
+  margin: 0;
 }
 
 <p
diff --git a/packages/ui-toolkit/src/text/__tests__/text.spec.js b/packages/ui-toolkit/src/text/__tests__/text.spec.js
index 4ab3f7f7..1d70b983 100644
--- a/packages/ui-toolkit/src/text/__tests__/text.spec.js
+++ b/packages/ui-toolkit/src/text/__tests__/text.spec.js
@@ -92,7 +92,7 @@ describe('Button', () => {
     expect(tree).toHaveStyleRule('font-size', remcalc(15));
     expect(tree).toHaveStyleRule(
       'font-weight',
-      `${theme.font.weight.semibold}`
+      `${theme.font.weight.normal}`
     );
   });
 
diff --git a/packages/ui-toolkit/src/text/headings.js b/packages/ui-toolkit/src/text/headings.js
index d0e6e2d5..788071ec 100644
--- a/packages/ui-toolkit/src/text/headings.js
+++ b/packages/ui-toolkit/src/text/headings.js
@@ -13,6 +13,7 @@ export const H1 = styled(NH1)`
   font-style: normal;
   font-stretch: normal;
   font-weight: normal;
+  margin: 0;
 
   ${is('inline')`
     display: inline-block;
@@ -85,7 +86,7 @@ export const H3 = styled.h3`
 export const H4 = styled.h4`
   margin: 0;
   color: ${props => props.theme.text};
-  font-weight: ${props => props.theme.font.weight.semibold};
+  font-weight: ${props => props.theme.font.weight.normal};
   line-height: ${remcalc(24)};
   font-size: ${remcalc(15)};
 
@@ -102,7 +103,7 @@ export const H4 = styled.h4`
 export const H5 = styled.h4`
   margin: 0;
   color: ${props => props.theme.text};
-  font-weight: normal;
+  font-weight: ${props => props.theme.font.weight.normal};
   line-height: ${remcalc(24)};
   font-size: ${remcalc(15)};
 
@@ -123,7 +124,7 @@ export const H5 = styled.h4`
 export const H6 = styled.h6`
   margin: 0;
   color: ${props => props.theme.text};
-  font-weight: normal;
+  font-weight: ${props => props.theme.font.weight.normal};
   line-height: ${remcalc(18)};
   font-size: ${remcalc(13)};
 
diff --git a/packages/ui-toolkit/src/text/p.js b/packages/ui-toolkit/src/text/p.js
index 9ac89ec6..1fb7cf2b 100644
--- a/packages/ui-toolkit/src/text/p.js
+++ b/packages/ui-toolkit/src/text/p.js
@@ -9,6 +9,7 @@ export default styled.p`
 
   line-height: ${remcalc(24)};
   font-size: ${remcalc(15)};
+  margin: 0;
 
   ${is('white')`
     -webkit-text-fill-color: currentcolor;
diff --git a/packages/ui-toolkit/src/theme/colors.js b/packages/ui-toolkit/src/theme/colors.js
index fb65b31b..c6dcd996 100644
--- a/packages/ui-toolkit/src/theme/colors.js
+++ b/packages/ui-toolkit/src/theme/colors.js
@@ -118,24 +118,24 @@ export default () => (
         components.
       </P>
     </div>
-    <Margin style={{ display: 'inline-block' }} top={4} bottom={5} right={5}>
+    <Margin style={{ display: 'inline-block' }} top="4" bottom="5" right="5">
       <Color key="primaryHover" name="Blue 1" color={theme.primary} />
       <Color key="primaryActive" name="Blue 2" color={theme.primaryActive} />
     </Margin>
-    <Margin style={{ display: 'inline-block' }} top={4} bottom={5}>
+    <Margin style={{ display: 'inline-block' }} top="4" bottom="5">
       <Color key="joyent1" name="Joyent 1" color="rgb(44, 72, 89)" />
       <Color key="joyent2" name="Joyent 2" color="rgb(27, 50, 64)" />
     </Margin>
     <div>
-      <Margin right={5} style={{ display: 'inline-block' }} bottom={2}>
+      <Margin right="5" style={{ display: 'inline-block' }} bottom="2">
         <Color key="green" name="Green 1" color={theme.green} />
         <Color key="greenDark" name="Green 2" color={theme.greenDark} />
       </Margin>
-      <Margin bottom={2} right={5} style={{ display: 'inline-block' }}>
+      <Margin bottom="2" right="5" style={{ display: 'inline-block' }}>
         <Color key="orange" name="Orange 1" color={theme.orange} />
         <Color key="orangeDark" name="Orange 2" color={theme.orangeDark} />
       </Margin>
-      <Margin bottom={5} right={5} style={{ display: 'inline-block' }}>
+      <Margin bottom="5" right="5" style={{ display: 'inline-block' }}>
         <Color key="red" name="Red 1" color={theme.red} />
         <Color key="redDark" name="Red 2" color={theme.redDark} />
       </Margin>
@@ -146,7 +146,7 @@ export default () => (
       similar components. They allow us to make certain components look
       clickable, whilst making others appear disabled or static.
     </P>
-    <Margin top={4}>
+    <Margin top="4">
       <Flex wrap>
         <Color
           bottom
diff --git a/packages/ui-toolkit/src/theme/colors.md b/packages/ui-toolkit/src/theme/colors.md
index 488cc0ca..ecf2da54 100644
--- a/packages/ui-toolkit/src/theme/colors.md
+++ b/packages/ui-toolkit/src/theme/colors.md
@@ -2,5 +2,5 @@
 const React = require('react');
 const { default: Colors } = require('./colors');
 
-<Colors />
+<Colors />;
 ```
diff --git a/packages/ui-toolkit/src/theme/index.js b/packages/ui-toolkit/src/theme/index.js
index 40144bf0..c4932190 100644
--- a/packages/ui-toolkit/src/theme/index.js
+++ b/packages/ui-toolkit/src/theme/index.js
@@ -33,7 +33,8 @@ const flexboxgrid = {
 const spacing = [0, 0.5, 1, 2, 3, 4, 5, 8].reduce(
   (sum, mult) => ({
     ...sum,
-    [mult]: remcalc(mult * 6)
+    [mult]: remcalc(mult * 6),
+    [`-${mult}`]: `-${remcalc(mult * 6)}`
   }),
   {}
 );
diff --git a/prototypes/console-boilerplate/.babelrc b/prototypes/console-boilerplate/.babelrc
new file mode 100644
index 00000000..d09473cc
--- /dev/null
+++ b/prototypes/console-boilerplate/.babelrc
@@ -0,0 +1,12 @@
+{
+  "ignore": ["_document.js", "_aliases.js"],
+  "presets": [
+    [
+      "joyent-portal",
+      {
+        "aliases": true,
+        "autoAliases": true
+      }
+    ]
+  ]
+}
diff --git a/consoles/my-joy-images/.eslintignore b/prototypes/console-boilerplate/.eslintignore
similarity index 100%
rename from consoles/my-joy-images/.eslintignore
rename to prototypes/console-boilerplate/.eslintignore
diff --git a/prototypes/console-boilerplate/.gitignore b/prototypes/console-boilerplate/.gitignore
new file mode 100644
index 00000000..4a6d8eef
--- /dev/null
+++ b/prototypes/console-boilerplate/.gitignore
@@ -0,0 +1,25 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+
+yarn-error.log*
+
+## Image Snapshots Diff
+
+**/__diff_output__
+
+lib/app
+
diff --git a/prototypes/console-boilerplate/.lighthouserc b/prototypes/console-boilerplate/.lighthouserc
new file mode 100644
index 00000000..c0641475
--- /dev/null
+++ b/prototypes/console-boilerplate/.lighthouserc
@@ -0,0 +1,8 @@
+{
+  "setup": {
+    "compile": "npm run build",
+    "start": "serve -s build --port 3069 --single",
+    "href": "http://0.0.0.0:3069"
+  },
+  "extends": "lighthouse:default"
+}
diff --git a/prototypes/console-boilerplate/.npmignore b/prototypes/console-boilerplate/.npmignore
new file mode 100644
index 00000000..6140a085
--- /dev/null
+++ b/prototypes/console-boilerplate/.npmignore
@@ -0,0 +1,27 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+
+yarn-error.log*
+
+## Image Snapshots Diff
+
+**/__diff_output__
+
+!lib/app
+!dist
+!build
+
diff --git a/prototypes/console-boilerplate/.stylelintrc b/prototypes/console-boilerplate/.stylelintrc
new file mode 100644
index 00000000..3a875f40
--- /dev/null
+++ b/prototypes/console-boilerplate/.stylelintrc
@@ -0,0 +1,4 @@
+{
+  "test": ["./src/**/*.js"],
+  "extends": ["stylelint-config-joyent-portal"]
+}
diff --git a/prototypes/console-boilerplate/.tern-project b/prototypes/console-boilerplate/.tern-project
new file mode 100644
index 00000000..851b348c
--- /dev/null
+++ b/prototypes/console-boilerplate/.tern-project
@@ -0,0 +1,13 @@
+{
+  "libs": ["ecmascript", "browser"],
+  "plugins": {
+    "doc_comment": true,
+    "local-scope": true,
+    "jsx": true,
+    "node": true,
+    "webpack": {
+      "configPath":
+        "../../node_modules/joyent-react-scripts/src/webpack.config.dev.js"
+    }
+  }
+}
diff --git a/prototypes/console-boilerplate/.yarnclean b/prototypes/console-boilerplate/.yarnclean
new file mode 100644
index 00000000..e69de29b
diff --git a/prototypes/console-boilerplate/lib/index.js b/prototypes/console-boilerplate/lib/index.js
new file mode 100644
index 00000000..2be166c1
--- /dev/null
+++ b/prototypes/console-boilerplate/lib/index.js
@@ -0,0 +1,92 @@
+const Inert = require('inert');
+const Path = require('path');
+const RenderReact = require('hapi-render-react');
+const Intercept = require('apr-intercept');
+const Fs = require('mz/fs');
+
+const { NAMESPACE = 'console' } = process.env;
+
+exports.register = async server => {
+  const relativeTo = Path.join(__dirname, 'app');
+  const buildRoot = Path.join(__dirname, `../build/${NAMESPACE}/static/`);
+  const publicRoot = Path.join(__dirname, `../public/static/`);
+
+  await server.register([
+    {
+      plugin: Inert
+    },
+    {
+      plugin: RenderReact
+    }
+  ]);
+
+  server.route([
+    {
+      method: 'GET',
+      path: `/${NAMESPACE}/service-worker.js`,
+      config: {
+        auth: false,
+        handler: {
+          file: {
+            path: Path.join(__dirname, '../build/service-worker.js')
+          }
+        }
+      }
+    },
+    {
+      method: 'GET',
+      path: `/${NAMESPACE}/favicon.ico`,
+      config: {
+        auth: false,
+        handler: {
+          file: {
+            path: Path.join(__dirname, '../build/favicon.ico')
+          }
+        }
+      }
+    },
+    {
+      method: 'GET',
+      path: `/${NAMESPACE}/static/{rest*}`,
+      config: {
+        auth: false
+      },
+      handler: async (request, h) => {
+        const { params } = request;
+        const { rest } = params;
+
+        const publicPathname = Path.join(publicRoot, rest);
+        const buildPathname = Path.join(buildRoot, rest);
+
+        const [err] = await Intercept(
+          Fs.access(publicPathname, Fs.constants.R_OK)
+        );
+
+        const file = err ? buildPathname : publicPathname;
+        return h.file(file, { confine: false });
+      }
+    },
+    {
+      method: '*',
+      path: `/${NAMESPACE}/~server-error`,
+      handler: {
+        view: {
+          name: 'server-error',
+          relativeTo
+        }
+      }
+    },
+    {
+      method: '*',
+      path: `/${NAMESPACE}/{path*}`,
+      handler: {
+        view: {
+          name: 'app',
+          relativeTo
+        }
+      }
+    }
+  ]);
+};
+
+exports.pkg = require('../package.json');
diff --git a/prototypes/console-boilerplate/package.json b/prototypes/console-boilerplate/package.json
new file mode 100644
index 00000000..77e1ff8d
--- /dev/null
+++ b/prototypes/console-boilerplate/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "my-joy-console",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MPL-2.0",
+  "repository": "github:yldio/joyent-portal",
+  "main": "lib/index.js",
+  "scripts": {
+    "dev": "NAMESPACE=console NODE_ENV=development REACT_APP_GQL_PORT=4000 PORT=3099 joyent-react-scripts start",
+    "build:test": "echo 0",
+    "build:lib": "echo 0",
+    "build:bundle": "NAMESPACE=console NODE_ENV=production redrun -p build:frontend build:ssr",
+    "prepublish": "NODE_ENV=production redrun build:bundle",
+    "test": "DEFAULT_TIMEOUT_INTERVAL=100000 NODE_ENV=test joyent-react-scripts test --env=jsdom",
+    "test:ci": "NODE_ENV=test joyent-react-scripts test --env=jsdom --testPathIgnorePatterns='.ui.js'",
+    "build:frontend": "joyent-react-scripts build",
+    "build:ssr": "SSR=1 UMD=1 babel src --out-dir lib/app --copy-files"
+  },
+  "dependencies": {
+    "@manaflair/redux-batch": "^0.1.0",
+    "cross-fetch": "^2.1.0",
+    "exenv": "^1.2.2",
+    "hapi-render-react": "^2.5.2",
+    "hapi-render-react-joyent-document": "^5.0.0",
+    "inert": "^5.1.0",
+    "joyent-ui-toolkit": "^6.0.0",
+    "lodash.get": "^4.4.2",
+    "query-string": "^6.1.0",
+    "react": "^16.3.1",
+    "react-apollo": "^2.1.2",
+    "react-dom": "^16.3.1",
+    "react-redux-values": "^1.1.2",
+    "react-router-dom": "^4.2.2",
+    "redux": "^3.7.2",
+    "redux-form": "^7.3.0",
+    "remcalc": "^1.0.10",
+    "styled-components": "^3.2.5",
+    "styled-components-spacing": "^2.1.3"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-preset-joyent-portal": "^7.0.1",
+    "eslint": "^4.19.1",
+    "eslint-config-joyent-portal": "^3.3.1",
+    "jest-image-snapshot": "^2.4.0",
+    "jest-styled-components": "^5.0.1",
+    "joyent-react-scripts": "^8.0.3",
+    "react-screenshot-renderer": "^1.1.2",
+    "react-test-renderer": "^16.3.1",
+    "redrun": "^6.0.2"
+  }
+}
diff --git a/prototypes/console-boilerplate/public/manifest.json b/prototypes/console-boilerplate/public/manifest.json
new file mode 100644
index 00000000..4372986a
--- /dev/null
+++ b/prototypes/console-boilerplate/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Joyent",
+  "name": "My Joyent &beta;",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#1E313B",
+  "background_color": "#FAFAFA"
+}
diff --git a/prototypes/console-boilerplate/public/static/css/libre-franklin.css b/prototypes/console-boilerplate/public/static/css/libre-franklin.css
new file mode 100644
index 00000000..73f4397c
--- /dev/null
+++ b/prototypes/console-boilerplate/public/static/css/libre-franklin.css
@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Libre Franklin'), local('LibreFranklin-Regular'),
+    url(../fonts/libre-franklin/libre-franklin-regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Libre Franklin Medium'), local('LibreFranklin-Medium'),
+    url(../fonts/libre-franklin/libre-franklin-medium.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Libre Franklin SemiBold'), local('LibreFranklin-SemiBold'),
+    url(../fonts/libre-franklin/libre-franklin-semibold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Libre Franklin Bold'), local('LibreFranklin-Bold'),
+    url(../fonts/libre-franklin/libre-franklin-bold.ttf) format('truetype');
+}
diff --git a/prototypes/console-boilerplate/public/static/css/roboto-mono.css b/prototypes/console-boilerplate/public/static/css/roboto-mono.css
new file mode 100644
index 00000000..dd436dc9
--- /dev/null
+++ b/prototypes/console-boilerplate/public/static/css/roboto-mono.css
@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'),
+    url(../fonts/roboto-mono/roboto-mono-regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Mono Bold'), local('RobotoMono-Bold'),
+    url(../fonts/roboto-mono/roboto-mono-bold.ttf) format('truetype');
+}
diff --git a/prototypes/console-boilerplate/public/static/fonts/libre-franklin/libre-franklin-bold.ttf b/prototypes/console-boilerplate/public/static/fonts/libre-franklin/libre-franklin-bold.ttf
new file mode 100755
index 00000000..b43e97cc
Binary files /dev/null and b/prototypes/console-boilerplate/public/static/fonts/libre-franklin/libre-franklin-bold.ttf differ
diff --git a/prototypes/console-boilerplate/public/static/fonts/libre-franklin/libre-franklin-light.ttf b/prototypes/console-boilerplate/public/static/fonts/libre-franklin/libre-franklin-light.ttf
new file mode 100755
index 00000000..2167ab43
Binary files /dev/null and b/prototypes/console-boilerplate/public/static/fonts/libre-franklin/libre-franklin-light.ttf differ
diff --git a/prototypes/console-boilerplate/public/static/fonts/libre-franklin/libre-franklin-medium.ttf b/prototypes/console-boilerplate/public/static/fonts/libre-franklin/libre-franklin-medium.ttf
new file mode 100755
index 00000000..41daf855
Binary files /dev/null and b/prototypes/console-boilerplate/public/static/fonts/libre-franklin/libre-franklin-medium.ttf differ
diff --git a/prototypes/console-boilerplate/public/static/fonts/libre-franklin/libre-franklin-regular.ttf b/prototypes/console-boilerplate/public/static/fonts/libre-franklin/libre-franklin-regular.ttf
new file mode 100755
index 00000000..487c31e2
Binary files /dev/null and b/prototypes/console-boilerplate/public/static/fonts/libre-franklin/libre-franklin-regular.ttf differ
diff --git a/prototypes/console-boilerplate/public/static/fonts/libre-franklin/libre-franklin-semibold.ttf b/prototypes/console-boilerplate/public/static/fonts/libre-franklin/libre-franklin-semibold.ttf
new file mode 100755
index 00000000..98341cd5
Binary files /dev/null and b/prototypes/console-boilerplate/public/static/fonts/libre-franklin/libre-franklin-semibold.ttf differ
diff --git a/prototypes/console-boilerplate/public/static/fonts/libre-franklin/license.txt b/prototypes/console-boilerplate/public/static/fonts/libre-franklin/license.txt
new file mode 100755
index 00000000..9df4654e
--- /dev/null
+++ b/prototypes/console-boilerplate/public/static/fonts/libre-franklin/license.txt
@@ -0,0 +1,93 @@
+Copyright (c) 2015, Impallari Type (www.impallari.com)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/prototypes/console-boilerplate/public/static/fonts/roboto-mono/license.txt b/prototypes/console-boilerplate/public/static/fonts/roboto-mono/license.txt
new file mode 100755
index 00000000..75b52484
--- /dev/null
+++ b/prototypes/console-boilerplate/public/static/fonts/roboto-mono/license.txt
@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/prototypes/console-boilerplate/public/static/fonts/roboto-mono/roboto-mono-bold.ttf b/prototypes/console-boilerplate/public/static/fonts/roboto-mono/roboto-mono-bold.ttf
new file mode 100755
index 00000000..07ef607d
Binary files /dev/null and b/prototypes/console-boilerplate/public/static/fonts/roboto-mono/roboto-mono-bold.ttf differ
diff --git a/prototypes/console-boilerplate/public/static/fonts/roboto-mono/roboto-mono-regular.ttf b/prototypes/console-boilerplate/public/static/fonts/roboto-mono/roboto-mono-regular.ttf
new file mode 100755
index 00000000..b158a334
Binary files /dev/null and b/prototypes/console-boilerplate/public/static/fonts/roboto-mono/roboto-mono-regular.ttf differ
diff --git a/prototypes/console-boilerplate/readme.md b/prototypes/console-boilerplate/readme.md
new file mode 100644
index 00000000..7ac0f054
--- /dev/null
+++ b/prototypes/console-boilerplate/readme.md
@@ -0,0 +1,20 @@
+# my-joy-console
+
+[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg?style=flat-square)](https://opensource.org/licenses/MPL-2.0)
+[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
+
+## Table of Contents
+
+* [Usage](#usage)
+* [License](#license)
+
+## Usage
+
+```
+npm run start
+open http://0.0.0.0:3069
+```
+
+## License
+
+MPL-2.0
diff --git a/prototypes/console-boilerplate/src/_aliases.js b/prototypes/console-boilerplate/src/_aliases.js
new file mode 100644
index 00000000..f053ebf7
--- /dev/null
+++ b/prototypes/console-boilerplate/src/_aliases.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/prototypes/console-boilerplate/src/_document.js b/prototypes/console-boilerplate/src/_document.js
new file mode 100644
index 00000000..9d9156db
--- /dev/null
+++ b/prototypes/console-boilerplate/src/_document.js
@@ -0,0 +1,56 @@
+const get = require('lodash.get');
+const Document = require('hapi-render-react-joyent-document');
+const path = require('path');
+const url = require('url');
+
+const { theme } = require('joyent-ui-toolkit');
+const { default: createClient } = require('./state/apollo-client');
+const { default: createStore } = require('./state/redux-store');
+
+const indexFile = path.join(__dirname, '../../build/index.html');
+const assets = require('../../build/asset-manifest.json');
+
+const { NODE_ENV = 'development' } = process.env;
+
+const getState = request => {
+  const { req } = request.raw;
+  const { headers } = req;
+  const { host } = headers;
+
+  const protocol = NODE_ENV === 'development' ? 'http:' : 'https:';
+  const _font = get(theme, 'font.href', () => '');
+  const _mono = get(theme, 'monoFont.href', () => '');
+  const _addr = url.parse(`${protocol}//${host}`);
+
+  const _theme = Object.assign({}, theme, {
+    font: Object.assign({}, theme.font, {
+      href: () =>
+        _font(
+          Object.assign(_addr, {
+            namespace: 'console'
+          })
+        )
+    }),
+    monoFont: Object.assign({}, theme.monoFont, {
+      href: () =>
+        _mono(
+          Object.assign(_addr, {
+            namespace: 'console'
+          })
+        )
+    })
+  });
+
+  return {
+    theme: _theme,
+    createClient,
+    createStore
+  };
+};
+
+module.exports = Document({
+  namespace: 'console/',
+  assets,
+  indexFile,
+  getState
+});
diff --git a/prototypes/console-boilerplate/src/app.js b/prototypes/console-boilerplate/src/app.js
new file mode 100644
index 00000000..cf61df7e
--- /dev/null
+++ b/prototypes/console-boilerplate/src/app.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { RootContainer } from 'joyent-ui-toolkit';
+import Routes from '@root/routes';
+
+export default () => (
+  <RootContainer>
+    <Routes />
+  </RootContainer>
+);
diff --git a/prototypes/console-boilerplate/src/components/navigation/__tests__/menu.spec.js b/prototypes/console-boilerplate/src/components/navigation/__tests__/menu.spec.js
new file mode 100644
index 00000000..76b00858
--- /dev/null
+++ b/prototypes/console-boilerplate/src/components/navigation/__tests__/menu.spec.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Menu from '../menu';
+import Theme from '@mocks/theme';
+
+it('renders <Menu /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Menu />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Menu links /> without throwing', () => {
+  const links = [
+    {
+      name: 'summary',
+      pathname: '/:name/summary'
+    },
+    {
+      name: 'tags',
+      pathname: '/:name/tags'
+    },
+    {
+      name: 'metadata',
+      pathname: '/:name/metadata'
+    },
+    {
+      name: 'networks',
+      pathname: '/:name/networks'
+    },
+    {
+      name: 'firewall',
+      pathname: '/:name/firewall'
+    },
+    {
+      name: 'dns',
+      pathname: '/:name/dns'
+    },
+    {
+      name: 'snapshots',
+      pathname: '/:name/snapshots'
+    }
+  ];
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Menu links={links} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
diff --git a/prototypes/console-boilerplate/src/components/navigation/index.js b/prototypes/console-boilerplate/src/components/navigation/index.js
new file mode 100644
index 00000000..9d65b4b8
--- /dev/null
+++ b/prototypes/console-boilerplate/src/components/navigation/index.js
@@ -0,0 +1 @@
+export { default as Menu } from './menu';
diff --git a/prototypes/console-boilerplate/src/components/navigation/menu.js b/prototypes/console-boilerplate/src/components/navigation/menu.js
new file mode 100644
index 00000000..804d34c9
--- /dev/null
+++ b/prototypes/console-boilerplate/src/components/navigation/menu.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import forceArray from 'force-array';
+import { Margin } from 'styled-components-spacing';
+import { NavLink } from 'react-router-dom';
+
+import {
+  SectionList,
+  SectionListItem,
+  SectionListAnchor,
+  ViewContainer
+} from 'joyent-ui-toolkit';
+
+const getMenuItems = (links = []) =>
+  links.map(({ pathname, name }) => (
+    <SectionListItem key={pathname}>
+      <SectionListAnchor to={pathname} component={NavLink}>
+        {name}
+      </SectionListAnchor>
+    </SectionListItem>
+  ));
+
+const Menu = ({ links = [] }) => {
+  const _links = forceArray(links);
+
+  if (!_links.length) {
+    return null;
+  }
+
+  return (
+    <ViewContainer plain>
+      <Margin bottom="6">
+        <SectionList>{getMenuItems(_links)}</SectionList>
+      </Margin>
+    </ViewContainer>
+  );
+};
+
+export default Menu;
diff --git a/prototypes/console-boilerplate/src/containers/index.js b/prototypes/console-boilerplate/src/containers/index.js
new file mode 100644
index 00000000..f5138a5b
--- /dev/null
+++ b/prototypes/console-boilerplate/src/containers/index.js
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => <p>hello world</p>;
diff --git a/prototypes/console-boilerplate/src/containers/navigation/__tests__/breadcrumb.spec.js b/prototypes/console-boilerplate/src/containers/navigation/__tests__/breadcrumb.spec.js
new file mode 100644
index 00000000..339070a6
--- /dev/null
+++ b/prototypes/console-boilerplate/src/containers/navigation/__tests__/breadcrumb.spec.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Breadcrumb from '../breadcrumb';
+import Theme from '@mocks/theme';
+
+it('renders <Breadcrumb /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Breadcrumb />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Breadcrumb match /> without throwing', () => {
+  const match = {
+    params: {
+      resource: 'name'
+    }
+  };
+
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Breadcrumb match={match} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
diff --git a/prototypes/console-boilerplate/src/containers/navigation/breadcrumb.js b/prototypes/console-boilerplate/src/containers/navigation/breadcrumb.js
new file mode 100644
index 00000000..f0dab803
--- /dev/null
+++ b/prototypes/console-boilerplate/src/containers/navigation/breadcrumb.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import paramCase from 'param-case';
+import get from 'lodash.get';
+import { Link } from 'react-router-dom';
+
+import { Breadcrumb, BreadcrumbItem } from 'joyent-ui-toolkit';
+
+export default ({ match }) => {
+  const resource = get(match, 'params.resource');
+
+  const links = [
+    {
+      name: 'Compute',
+      pathname: '/'
+    },
+    {
+      name: 'Console',
+      pathname: '/console'
+    }
+  ]
+    .concat(
+      resource && [
+        {
+          name: paramCase(resource),
+          pathname: `/console/${resource}`
+        }
+      ]
+    )
+    .filter(Boolean)
+    .map(({ name, pathname }) => (
+      <BreadcrumbItem key={name} to={pathname} component={Link}>
+        {name}
+      </BreadcrumbItem>
+    ));
+
+  return <Breadcrumb>{links}</Breadcrumb>;
+};
diff --git a/prototypes/console-boilerplate/src/containers/navigation/index.js b/prototypes/console-boilerplate/src/containers/navigation/index.js
new file mode 100644
index 00000000..4e5c76e1
--- /dev/null
+++ b/prototypes/console-boilerplate/src/containers/navigation/index.js
@@ -0,0 +1,2 @@
+export { default as Breadcrumb } from './breadcrumb';
+export { default as Menu } from './menu';
diff --git a/prototypes/console-boilerplate/src/containers/navigation/menu.js b/prototypes/console-boilerplate/src/containers/navigation/menu.js
new file mode 100644
index 00000000..9f7a1e8b
--- /dev/null
+++ b/prototypes/console-boilerplate/src/containers/navigation/menu.js
@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import get from 'lodash.get';
+
+import { Menu } from '@components/navigation';
+
+export default connect((state, { match }) => {
+  const resourceId = get(match, 'params.resource');
+  const allSections = get(state, 'ui.sections');
+  const sections = resourceId ? allSections.resources : [];
+
+  const links = sections.map(({ name, pathname }) => ({
+    name,
+    pathname: `/console/${resourceId}/${pathname}`
+  }));
+
+  return {
+    links
+  };
+})(Menu);
diff --git a/prototypes/console-boilerplate/src/index.js b/prototypes/console-boilerplate/src/index.js
new file mode 100644
index 00000000..34c08d5c
--- /dev/null
+++ b/prototypes/console-boilerplate/src/index.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ThemeProvider } from 'styled-components';
+import { Provider as ReduxProvider } from 'react-redux';
+import { ApolloProvider } from 'react-apollo';
+import { BrowserRouter } from 'react-router-dom';
+import isFunction from 'lodash.isfunction';
+import isFinite from 'lodash.isfinite';
+
+import { theme } from 'joyent-ui-toolkit';
+
+import createStore from '@state/redux-store';
+import createClient from '@state/apollo-client';
+import App from './app';
+
+if (!isFunction(Number.isFinite)) {
+  Number.isFinite = isFinite;
+}
+
+ReactDOM.hydrate(
+  <ApolloProvider client={createClient()}>
+    <ThemeProvider theme={theme}>
+      <ReduxProvider store={createStore()}>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </ReduxProvider>
+    </ThemeProvider>
+  </ApolloProvider>,
+  document.getElementById('root')
+);
diff --git a/prototypes/console-boilerplate/src/routes.js b/prototypes/console-boilerplate/src/routes.js
new file mode 100644
index 00000000..7bf21351
--- /dev/null
+++ b/prototypes/console-boilerplate/src/routes.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import get from 'lodash.get';
+
+import {
+  PageContainer,
+  ViewContainer,
+  Message,
+  MessageDescription,
+  MessageTitle,
+  Footer
+} from 'joyent-ui-toolkit';
+
+import { Breadcrumb, Menu } from '@containers/navigation';
+import { Route as ServerError } from '@root/server-error';
+
+import Index from '@containers';
+
+export default () => (
+  <PageContainer>
+    {/* Breadcrumb */}
+    <Switch>
+      <Route path="/console/~create/:section?" exact component={Breadcrumb} />
+      <Route path="/console/~:action/:resource?" component={Breadcrumb} exact />
+      <Route path="/console/:resource?" component={Breadcrumb} />
+    </Switch>
+
+    {/* Menu */}
+    <Switch>
+      <Route path="/~server-error" component={() => null} />
+      <Route path="/console/~:action/:id?" exact component={Menu} />
+      <Route path="/console/:resource?/:section?" component={Menu} />
+    </Switch>
+
+    {/* Resource List */}
+    <Switch>
+      <Route path="/console" exact component={Index} />
+    </Switch>
+
+    {/* Instance Sections */}
+    <Switch>
+      <Route path="/console/~:action" component={() => null} />
+      <Route path="/console/:resource/section" exact component={() => null} />
+      <Route
+        path="/console/:resource"
+        exact
+        component={({ match }) => (
+          <Redirect to={`/console/${get(match, 'params.resource')}/section`} />
+        )}
+      />
+    </Switch>
+
+    {/* Actions */}
+    <Switch>
+      {/* Create Instance */}
+      <Route
+        path="/console/~create/"
+        exact
+        component={({ match, location }) => (
+          <Redirect to={`/console/~create${location.search}`} />
+        )}
+      />
+      <Route path="/console/~create/:step" component={() => null} />
+    </Switch>
+
+    <Route path="/~server-error" exact component={ServerError} />
+
+    <Route path="/" exact component={() => <Redirect to="/console" />} />
+
+    <noscript>
+      <ViewContainer main>
+        <Message warning>
+          <MessageTitle>Ooops!</MessageTitle>
+          <MessageDescription>
+            You need to enable JavaScript to run this app.
+          </MessageDescription>
+        </Message>
+      </ViewContainer>
+    </noscript>
+    <Footer />
+  </PageContainer>
+);
diff --git a/prototypes/console-boilerplate/src/server-error.js b/prototypes/console-boilerplate/src/server-error.js
new file mode 100644
index 00000000..ee84a451
--- /dev/null
+++ b/prototypes/console-boilerplate/src/server-error.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Margin } from 'styled-components-spacing';
+import remcalc from 'remcalc';
+
+import {
+  RootContainer,
+  PageContainer,
+  ViewContainer,
+  Message,
+  MessageDescription,
+  MessageTitle,
+  Divider
+} from 'joyent-ui-toolkit';
+
+import Breadcrumb from '@containers/navigation/breadcrumb';
+
+export const Route = () => (
+  <ViewContainer main>
+    <Divider height={remcalc(24)} transparent />
+    <Margin bottom="4">
+      <Message error>
+        <MessageTitle>Ooops!</MessageTitle>
+        <MessageDescription>
+          An error occurred while loading your page
+        </MessageDescription>
+      </Message>
+    </Margin>
+  </ViewContainer>
+);
+
+export default () => (
+  <RootContainer>
+    <PageContainer>
+      <Breadcrumb />
+      <Route />
+    </PageContainer>
+  </RootContainer>
+);
diff --git a/prototypes/console-boilerplate/src/state/apollo-client.js b/prototypes/console-boilerplate/src/state/apollo-client.js
new file mode 100644
index 00000000..c02da4f2
--- /dev/null
+++ b/prototypes/console-boilerplate/src/state/apollo-client.js
@@ -0,0 +1,39 @@
+import { ApolloClient } from 'apollo-client';
+import { HttpLink } from 'apollo-link-http';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import fetch from 'cross-fetch';
+
+import global from './global';
+
+const {
+  REACT_APP_GQL_PORT = global.port,
+  REACT_APP_GQL_PROTOCOL = global.protocol,
+  REACT_APP_GQL_HOSTNAME = global.hostname
+} = process.env;
+
+const PORT = REACT_APP_GQL_PORT ? `:${REACT_APP_GQL_PORT}` : '';
+const URI = `${REACT_APP_GQL_PROTOCOL}://${REACT_APP_GQL_HOSTNAME}${PORT}/console/graphql`;
+
+export default (opts = {}) => {
+  let cache = new InMemoryCache();
+
+  if (global.__APOLLO_STATE__) {
+    cache = cache.restore(global.__APOLLO_STATE__);
+  }
+
+  return new ApolloClient({
+    cache,
+    link: new HttpLink({
+      uri: URI,
+      credentials: 'same-origin',
+      fetch,
+      headers: {
+        'X-CSRF-Token': global.cookie.replace(
+          /(?:(?:^|.*;\s*)crumb\s*=\s*([^;]*).*$)|^.*$/,
+          '$1'
+        )
+      }
+    }),
+    ...opts
+  });
+};
diff --git a/prototypes/console-boilerplate/src/state/global.js b/prototypes/console-boilerplate/src/state/global.js
new file mode 100644
index 00000000..e9ca19a2
--- /dev/null
+++ b/prototypes/console-boilerplate/src/state/global.js
@@ -0,0 +1,26 @@
+import { canUseDOM } from 'exenv';
+import queryString from 'query-string';
+
+export const Global = () => {
+  if (!canUseDOM) {
+    return {
+      cookie: ''
+    };
+  }
+
+  return {
+    port: window.location.port,
+    protocol: window.location.protocol.replace(/:$/, ''),
+    hostname: window.location.hostname,
+    pathname: window.location.pathname,
+    origin: window.location.origin,
+    cookie: document.cookie || '',
+    search: window.location.search,
+    query: queryString.parse(window.location.search || ''),
+    __REDUX_DEVTOOLS_EXTENSION__: window.__REDUX_DEVTOOLS_EXTENSION__,
+    __APOLLO_STATE__: window.__APOLLO_STATE__,
+    __REDUX_STATE__: window.__REDUX_STATE__
+  };
+};
+
+export default Global();
diff --git a/prototypes/console-boilerplate/src/state/parse-error.js b/prototypes/console-boilerplate/src/state/parse-error.js
new file mode 100644
index 00000000..a42ee0d6
--- /dev/null
+++ b/prototypes/console-boilerplate/src/state/parse-error.js
@@ -0,0 +1,4 @@
+export default ({ graphQLErrors = [], message = '' }) =>
+  graphQLErrors.length
+    ? graphQLErrors.map(({ message }) => message).join('\n')
+    : message;
diff --git a/prototypes/console-boilerplate/src/state/redux-store.js b/prototypes/console-boilerplate/src/state/redux-store.js
new file mode 100644
index 00000000..9034cf24
--- /dev/null
+++ b/prototypes/console-boilerplate/src/state/redux-store.js
@@ -0,0 +1,36 @@
+import { reduxBatch } from '@manaflair/redux-batch';
+import { createStore, combineReducers, compose } from 'redux';
+import { reducer as formReducer } from 'redux-form';
+import { reducer as valuesReducer } from 'react-redux-values';
+import paramCase from 'param-case';
+import global from './global';
+
+const initialState = {
+  ui: {
+    sections: {
+      resource: [].map(name => ({
+        pathname: paramCase(name),
+        name
+      }))
+    }
+  }
+};
+
+export default () => {
+  return createStore(
+    combineReducers({
+      values: valuesReducer,
+      form: formReducer,
+      ui: (state = {}) => state
+    }),
+    global.__REDUX_STATE__ || initialState,
+    compose(
+      reduxBatch,
+      // If you are using the devToolsExtension, you can add it here also
+      // eslint-disable-next-line no-negated-condition
+      typeof global.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined'
+        ? global.__REDUX_DEVTOOLS_EXTENSION__()
+        : f => f
+    )
+  );
+};
diff --git a/prototypes/console-boilerplate/src/state/theme.js b/prototypes/console-boilerplate/src/state/theme.js
new file mode 100644
index 00000000..0f096191
--- /dev/null
+++ b/prototypes/console-boilerplate/src/state/theme.js
@@ -0,0 +1,21 @@
+import { theme } from 'joyent-ui-toolkit';
+
+const font = theme.font.href({
+  namespace: 'console'
+});
+
+const monoFont = theme.monoFont.href({
+  namespace: 'console'
+});
+
+export default {
+  ...theme,
+  font: {
+    ...theme.font,
+    href: () => font
+  },
+  monoFont: {
+    ...theme.monoFont,
+    href: () => monoFont
+  }
+};
diff --git a/prototypes/cra-boilerplate/.eslintrc b/prototypes/cra-boilerplate/.eslintrc
deleted file mode 100644
index 3dba382d..00000000
--- a/prototypes/cra-boilerplate/.eslintrc
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "extends": "joyent-portal",
-  "rules": {
-    "no-console": 0,
-    "jsx-a11y/href-no-hash": 0
-  }
-}
diff --git a/prototypes/cra-boilerplate/package.json b/prototypes/cra-boilerplate/package.json
index 8b7e5ab7..f284f7d2 100644
--- a/prototypes/cra-boilerplate/package.json
+++ b/prototypes/cra-boilerplate/package.json
@@ -8,8 +8,6 @@
   "scripts": {
     "dev": "NODE_ENV=development joyent-react-scripts start",
     "build": "NODE_ENV=production joyent-react-scripts build",
-    "lint-ci": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
-    "lint": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
     "prepublish": "echo 0"
   },
   "dependencies": {
diff --git a/yarn.lock b/yarn.lock
index 181682a3..1a18451d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8,32 +8,6 @@
   dependencies:
     "@babel/highlight" "7.0.0-beta.44"
 
-"@babel/code-frame@7.0.0-beta.46":
-  version "7.0.0-beta.46"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.46.tgz#e0d002100805daab1461c0fcb32a07e304f3a4f4"
-  dependencies:
-    "@babel/highlight" "7.0.0-beta.46"
-
-"@babel/core@7.0.0-beta.46":
-  version "7.0.0-beta.46"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.0.0-beta.46.tgz#dbe2189bcdef9a2c84becb1ec624878d31a95689"
-  dependencies:
-    "@babel/code-frame" "7.0.0-beta.46"
-    "@babel/generator" "7.0.0-beta.46"
-    "@babel/helpers" "7.0.0-beta.46"
-    "@babel/template" "7.0.0-beta.46"
-    "@babel/traverse" "7.0.0-beta.46"
-    "@babel/types" "7.0.0-beta.46"
-    babylon "7.0.0-beta.46"
-    convert-source-map "^1.1.0"
-    debug "^3.1.0"
-    json5 "^0.5.0"
-    lodash "^4.2.0"
-    micromatch "^2.3.11"
-    resolve "^1.3.2"
-    semver "^5.4.1"
-    source-map "^0.5.0"
-
 "@babel/generator@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
@@ -44,21 +18,11 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
-"@babel/generator@7.0.0-beta.46":
-  version "7.0.0-beta.46"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.46.tgz#6f57159bcc28bf8c3ed6b549789355cebfa3faa7"
-  dependencies:
-    "@babel/types" "7.0.0-beta.46"
-    jsesc "^2.5.1"
-    lodash "^4.2.0"
-    source-map "^0.5.0"
-    trim-right "^1.0.1"
-
 "@babel/helper-annotate-as-pure@^7.0.0-beta.37":
-  version "7.0.0-beta.46"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.46.tgz#4cd76d5c93409ea01d31be66395a3b98a372792e"
+  version "7.0.0-beta.47"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.47.tgz#354fb596055d9db369211bf075f0d5e93904d6f6"
   dependencies:
-    "@babel/types" "7.0.0-beta.46"
+    "@babel/types" "7.0.0-beta.47"
 
 "@babel/helper-function-name@7.0.0-beta.44":
   version "7.0.0-beta.44"
@@ -68,26 +32,12 @@
     "@babel/template" "7.0.0-beta.44"
     "@babel/types" "7.0.0-beta.44"
 
-"@babel/helper-function-name@7.0.0-beta.46":
-  version "7.0.0-beta.46"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.46.tgz#d0c4eed2e220e180f91b02e008dcc4594afe1d39"
-  dependencies:
-    "@babel/helper-get-function-arity" "7.0.0-beta.46"
-    "@babel/template" "7.0.0-beta.46"
-    "@babel/types" "7.0.0-beta.46"
-
 "@babel/helper-get-function-arity@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.44.tgz#d03ca6dd2b9f7b0b1e6b32c56c72836140db3a15"
   dependencies:
     "@babel/types" "7.0.0-beta.44"
 
-"@babel/helper-get-function-arity@7.0.0-beta.46":
-  version "7.0.0-beta.46"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.46.tgz#7161bfe449b4183dbe25d1fe5579338b7429e5f2"
-  dependencies:
-    "@babel/types" "7.0.0-beta.46"
-
 "@babel/helper-module-imports@7.0.0-beta.32":
   version "7.0.0-beta.32"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.32.tgz#8126fc024107c226879841b973677a4f4e510a03"
@@ -101,20 +51,6 @@
   dependencies:
     "@babel/types" "7.0.0-beta.44"
 
-"@babel/helper-split-export-declaration@7.0.0-beta.46":
-  version "7.0.0-beta.46"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.46.tgz#6903893c72bb2a3d54ed20b5ff2aa8a28e8d2ea1"
-  dependencies:
-    "@babel/types" "7.0.0-beta.46"
-
-"@babel/helpers@7.0.0-beta.46":
-  version "7.0.0-beta.46"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.0.0-beta.46.tgz#b5f988dfd77f4f713792cf7818b687050736ee52"
-  dependencies:
-    "@babel/template" "7.0.0-beta.46"
-    "@babel/traverse" "7.0.0-beta.46"
-    "@babel/types" "7.0.0-beta.46"
-
 "@babel/highlight@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5"
@@ -123,14 +59,6 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
-"@babel/highlight@7.0.0-beta.46":
-  version "7.0.0-beta.46"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.46.tgz#c553c51e65f572bdedd6eff66fc0bb563016645e"
-  dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^3.0.0"
-
 "@babel/template@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
@@ -140,15 +68,6 @@
     babylon "7.0.0-beta.44"
     lodash "^4.2.0"
 
-"@babel/template@7.0.0-beta.46":
-  version "7.0.0-beta.46"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.46.tgz#8b23982411d5b5dbfa479437bfe414adb1411bb9"
-  dependencies:
-    "@babel/code-frame" "7.0.0-beta.46"
-    "@babel/types" "7.0.0-beta.46"
-    babylon "7.0.0-beta.46"
-    lodash "^4.2.0"
-
 "@babel/traverse@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.44.tgz#a970a2c45477ad18017e2e465a0606feee0d2966"
@@ -164,21 +83,6 @@
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-"@babel/traverse@7.0.0-beta.46":
-  version "7.0.0-beta.46"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.46.tgz#29a0c0395b3642f0297e6f8e475bde89f9343755"
-  dependencies:
-    "@babel/code-frame" "7.0.0-beta.46"
-    "@babel/generator" "7.0.0-beta.46"
-    "@babel/helper-function-name" "7.0.0-beta.46"
-    "@babel/helper-split-export-declaration" "7.0.0-beta.46"
-    "@babel/types" "7.0.0-beta.46"
-    babylon "7.0.0-beta.46"
-    debug "^3.1.0"
-    globals "^11.1.0"
-    invariant "^2.2.0"
-    lodash "^4.2.0"
-
 "@babel/types@7.0.0-beta.32":
   version "7.0.0-beta.32"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.32.tgz#c317d0ecc89297b80bbcb2f50608e31f6452a5ff"
@@ -195,12 +99,12 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
-"@babel/types@7.0.0-beta.46":
-  version "7.0.0-beta.46"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.46.tgz#eb84399a699af9fcb244440cce78e1acbeb40e0c"
+"@babel/types@7.0.0-beta.47":
+  version "7.0.0-beta.47"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.47.tgz#e6fcc1a691459002c2671d558a586706dddaeef8"
   dependencies:
     esutils "^2.0.2"
-    lodash "^4.2.0"
+    lodash "^4.17.5"
     to-fast-properties "^2.0.0"
 
 "@commitlint/cli@^4.2.1":
@@ -269,8 +173,8 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.2.tgz#138e00b332d519b4e307bded6159e5ba48aba3ae"
 
 "@emotion/stylis@^0.6.5":
-  version "0.6.7"
-  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.6.7.tgz#730a6aa2198257124940014d7fffac7cf3e6614c"
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.6.8.tgz#6ad4e8d32b19b440efa4481bbbcb98a8c12765bb"
 
 "@emotion/unitless@^0.6.2":
   version "0.6.3"
@@ -317,6 +221,10 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@nodelib/fs.stat@^1.0.1":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.0.tgz#50c1e2260ac0ed9439a181de3725a0168d59c48a"
+
 "@types/async@2.0.49":
   version "2.0.49"
   resolved "https://registry.yarnpkg.com/@types/async/-/async-2.0.49.tgz#92e33d13f74c895cb9a7f38ba97db8431ed14bc0"
@@ -325,19 +233,23 @@
   version "0.12.6"
   resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-0.12.6.tgz#3d619198585fcabe5f4e1adfb5cf5f3388c66c13"
 
+"@types/node@^9.4.6":
+  version "9.6.18"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.18.tgz#092e13ef64c47e986802c9c45a61c1454813b31d"
+
 "@types/zen-observable@^0.5.3":
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.5.3.tgz#91b728599544efbb7386d8b6633693a3c2e7ade5"
 
-"@vxna/mini-html-webpack-template@^0.1.6":
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/@vxna/mini-html-webpack-template/-/mini-html-webpack-template-0.1.6.tgz#64225d564da5fe610b6445523c245572923c00b8"
+"@vxna/mini-html-webpack-template@^0.1.7":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@vxna/mini-html-webpack-template/-/mini-html-webpack-template-0.1.7.tgz#2a8270e513ee14f395cc17c2ce22ced383c45d22"
   dependencies:
     common-tags "^1.7.2"
 
 JSONStream@^1.0.4:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.2.tgz#c102371b6ec3a7cf3b847ca00c20bb0fce4c6dea"
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.3.tgz#27b4b8fbbfeab4e71bcf551e7f27be8d952239bf"
   dependencies:
     jsonparse "^1.2.0"
     through ">=2.2.7 <3"
@@ -584,6 +496,14 @@ apollo-link-state@^0.4.1:
     apollo-utilities "^1.0.8"
     graphql-anywhere "^4.1.0-alpha.0"
 
+apollo-link@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.1.tgz#c120b16059f9bd93401b9f72b94d2f80f3f305d2"
+  dependencies:
+    "@types/node" "^9.4.6"
+    apollo-utilities "^1.0.0"
+    zen-observable-ts "^0.8.6"
+
 apollo-link@^1.0.0, apollo-link@^1.2.1, apollo-link@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.2.tgz#54c84199b18ac1af8d63553a68ca389c05217a03"
@@ -596,7 +516,7 @@ apollo-server-module-graphiql@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/apollo-server-module-graphiql/-/apollo-server-module-graphiql-1.3.4.tgz#50399b7c51b7267d0c841529f5173e5fc7304de4"
 
-apollo-utilities@^1.0.0, apollo-utilities@^1.0.12, apollo-utilities@^1.0.8:
+apollo-utilities@^1.0.0, apollo-utilities@^1.0.1, apollo-utilities@^1.0.12, apollo-utilities@^1.0.8:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.0.12.tgz#9e2b2a34cf89f3bf0d73a664effd8c1bb5d1b7f7"
 
@@ -840,8 +760,8 @@ ast-types@0.9.11:
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.11.tgz#371177bb59232ff5ceaa1d09ee5cad705b1a5aa9"
 
 ast-types@^0.11.3:
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.11.3.tgz#c20757fe72ee71278ea0ff3d87e5c2ca30d9edf8"
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.11.4.tgz#76f930930e9571851ba282a9a0f6923f29f6be2f"
 
 ast-types@^0.7.2:
   version "0.7.8"
@@ -860,20 +780,16 @@ async@^1.4.0, async@^1.5.0, async@^1.5.2:
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
 async@^2.1.2, async@^2.1.4, async@^2.4.1:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"
   dependencies:
-    lodash "^4.14.0"
-
-async@~1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/async/-/async-1.2.1.tgz#a4816a17cd5ff516dfa2c7698a453369b9790de0"
+    lodash "^4.17.10"
 
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
-atob@^2.0.0:
+atob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.1.tgz#ae2d5a729477f289d60dd7f96a6314a22dd6c22a"
 
@@ -1239,11 +1155,10 @@ babel-plugin-emotion@^9.1.2:
     touch "^1.0.0"
 
 babel-plugin-inline-import-graphql-ast@^2.2.0:
-  version "2.3.7"
-  resolved "https://registry.yarnpkg.com/babel-plugin-inline-import-graphql-ast/-/babel-plugin-inline-import-graphql-ast-2.3.7.tgz#22e10eb989c901abd6041b30e0de2069c5a2d4bb"
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-inline-import-graphql-ast/-/babel-plugin-inline-import-graphql-ast-2.4.0.tgz#51f3e35c1ada0fa2f14119316a88f01f9be946de"
   dependencies:
-    "@babel/core" "7.0.0-beta.46"
-    graphql-tag "^2.9.1"
+    graphql-tag "^2.9.2"
 
 babel-plugin-istanbul@^4.0.0:
   version "4.1.6"
@@ -1269,8 +1184,8 @@ babel-plugin-lodash@^3.3.2:
     require-package-name "^2.0.1"
 
 babel-plugin-macros@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.2.0.tgz#31fc16748d6480697a517f692dc4421cb7bff0cc"
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.2.1.tgz#7cc0f84735aa86f776b51860793a98928f43a7fa"
   dependencies:
     cosmiconfig "^4.0.0"
 
@@ -1594,16 +1509,16 @@ babel-plugin-transform-inline-consecutive-adds@^0.3.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-inline-consecutive-adds/-/babel-plugin-transform-inline-consecutive-adds-0.3.0.tgz#f07d93689c0002ed2b2b62969bdd99f734e03f57"
 
 babel-plugin-transform-member-expression-literals@^6.9.0:
-  version "6.9.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-member-expression-literals/-/babel-plugin-transform-member-expression-literals-6.9.2.tgz#1f397ab961a5c3a401f2a747af06e72004afcb76"
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-member-expression-literals/-/babel-plugin-transform-member-expression-literals-6.9.4.tgz#37039c9a0c3313a39495faac2ff3a6b5b9d038bf"
 
 babel-plugin-transform-merge-sibling-variables@^6.9.0:
-  version "6.9.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-merge-sibling-variables/-/babel-plugin-transform-merge-sibling-variables-6.9.2.tgz#994a9004a79c79f0c91c496e8a2dbc7e9b73f7b4"
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-merge-sibling-variables/-/babel-plugin-transform-merge-sibling-variables-6.9.4.tgz#85b422fc3377b449c9d1cde44087203532401dae"
 
 babel-plugin-transform-minify-booleans@^6.9.0:
-  version "6.9.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-minify-booleans/-/babel-plugin-transform-minify-booleans-6.9.2.tgz#cf995be067a0303cb526549f03dcd9682419430d"
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-minify-booleans/-/babel-plugin-transform-minify-booleans-6.9.4.tgz#acbb3e56a3555dd23928e4b582d285162dd2b198"
 
 babel-plugin-transform-object-rest-spread@6.26.0:
   version "6.26.0"
@@ -1613,8 +1528,8 @@ babel-plugin-transform-object-rest-spread@6.26.0:
     babel-runtime "^6.26.0"
 
 babel-plugin-transform-property-literals@^6.9.0:
-  version "6.9.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-property-literals/-/babel-plugin-transform-property-literals-6.9.2.tgz#a58d0996cf2adaf224f7ce848ad1cde4cd8cf275"
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-property-literals/-/babel-plugin-transform-property-literals-6.9.4.tgz#98c1d21e255736573f93ece54459f6ce24985d39"
   dependencies:
     esutils "^2.0.2"
 
@@ -1663,12 +1578,12 @@ babel-plugin-transform-regexp-constructors@^0.3.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-regexp-constructors/-/babel-plugin-transform-regexp-constructors-0.3.0.tgz#9bb2c8dd082271a5cb1b3a441a7c52e8fd07e0f5"
 
 babel-plugin-transform-remove-console@^6.9.0:
-  version "6.9.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.2.tgz#e8a0c27d56c9503ca16e284f6b64dbd4b95d21e9"
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz#b980360c067384e24b357a588d807d3c83527780"
 
 babel-plugin-transform-remove-debugger@^6.9.0:
-  version "6.9.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-debugger/-/babel-plugin-transform-remove-debugger-6.9.2.tgz#536c87bdb6200d1460c996dd95d179cf38c24ee1"
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-debugger/-/babel-plugin-transform-remove-debugger-6.9.4.tgz#42b727631c97978e1eb2d199a7aec84a18339ef2"
 
 babel-plugin-transform-remove-undefined@^0.3.0:
   version "0.3.0"
@@ -1683,8 +1598,8 @@ babel-plugin-transform-runtime@6.23.0:
     babel-runtime "^6.22.0"
 
 babel-plugin-transform-simplify-comparison-operators@^6.9.0:
-  version "6.9.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-simplify-comparison-operators/-/babel-plugin-transform-simplify-comparison-operators-6.9.2.tgz#0c0e9afa732924f03aa982fd63c92d0408bd5656"
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-simplify-comparison-operators/-/babel-plugin-transform-simplify-comparison-operators-6.9.4.tgz#f62afe096cab0e1f68a2d753fdf283888471ceb9"
 
 babel-plugin-transform-strict-mode@^6.24.1:
   version "6.24.1"
@@ -1694,8 +1609,8 @@ babel-plugin-transform-strict-mode@^6.24.1:
     babel-types "^6.24.1"
 
 babel-plugin-transform-undefined-to-void@^6.9.0:
-  version "6.9.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-undefined-to-void/-/babel-plugin-transform-undefined-to-void-6.9.2.tgz#165fde73393276bea02a739658878dcced0b9ebb"
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-undefined-to-void/-/babel-plugin-transform-undefined-to-void-6.9.4.tgz#be241ca81404030678b748717322b89d0c8fe280"
 
 babel-polyfill@6.23.0:
   version "6.23.0"
@@ -1898,10 +1813,6 @@ babylon@7.0.0-beta.44:
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.44.tgz#89159e15e6e30c5096e22d738d8c0af8a0e8ca1d"
 
-babylon@7.0.0-beta.46:
-  version "7.0.0-beta.46"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.46.tgz#b6ddaba81bbb130313932757ff9c195d527088b6"
-
 babylon@^6.17.0, babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
@@ -1994,18 +1905,6 @@ boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
 
-boom@4.x.x:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31"
-  dependencies:
-    hoek "4.x.x"
-
-boom@5.x.x:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02"
-  dependencies:
-    hoek "4.x.x"
-
 boom@7.1.x:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/boom/-/boom-7.1.1.tgz#50392a4e3417e971f1ad28622c20e832275260bb"
@@ -2161,10 +2060,6 @@ browserslist@^2.1.2, browserslist@^2.5.1:
     caniuse-lite "^1.0.30000792"
     electron-to-chromium "^1.3.30"
 
-brule@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/brule/-/brule-3.1.0.tgz#56c93098401749b16616cef0d0000a2090f3b60a"
-
 bser@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/bser/-/bser-1.0.2.tgz#381116970b2a6deea5646dd15dd7278444b56169"
@@ -2371,12 +2266,12 @@ caniuse-api@^1.5.2:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000836"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000836.tgz#788b6c8f6f02991743b18cdbbd54f96d05b4b95a"
+  version "1.0.30000844"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000844.tgz#bca5798cda2b6931d68100c2d69e55fb338cbb41"
 
 caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000792:
-  version "1.0.30000836"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000836.tgz#c08f405b884d36dc44fa4c9a85c2c06cdab1dbb5"
+  version "1.0.30000844"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000844.tgz#de7c84cde0582143cf4f5abdf1b98e5a0539ad4a"
 
 capture-stack-trace@^1.0.0:
   version "1.0.0"
@@ -2514,8 +2409,8 @@ chownr@^1.0.1:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
 
 ci-env@^1.4.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/ci-env/-/ci-env-1.6.0.tgz#6b75e90a4391462cc7ec5146b94d6fa4a890a041"
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/ci-env/-/ci-env-1.6.1.tgz#3e3ef4fc528a2825397f912cfa30cde17ec364cc"
 
 ci-info@^1.0.0:
   version "1.1.3"
@@ -2626,20 +2521,19 @@ clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
 
-cloudapi-gql@^7.1.4:
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/cloudapi-gql/-/cloudapi-gql-7.2.1.tgz#6c908719380c2713da3a66583906116612ab62ee"
+cloudapi-gql@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/cloudapi-gql/-/cloudapi-gql-8.0.0.tgz#e065633ae4c0721f1bdec6c0053de562ac4343c5"
   dependencies:
     apr-map "3.0.x"
     boom "7.2.x"
     bounce "1.2.x"
     force-array "3.1.x"
     fwrule "2.0.x"
-    graphi "5.6.x"
     hasha "3.0.x"
     lodash.uniq "4.5.x"
     sentiment "4.2.x"
-    webconsole-cloudapi-client "1.0.x"
+    webconsole-cloudapi-client "1.x.x"
     wreck "14.0.x"
 
 cmd-shim@^2.0.2:
@@ -2664,8 +2558,8 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
 codemirror@^5.18.2, codemirror@^5.36.0:
-  version "5.37.0"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.37.0.tgz#c349b584e158f590277f26d37c2469a6bc538036"
+  version "5.38.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.38.0.tgz#26a9551446e51dbdde36aabe60f72469724fd332"
 
 collapse-white-space@^1.0.2:
   version "1.0.4"
@@ -2783,8 +2677,8 @@ compare-func@^1.3.1:
     dot-prop "^3.0.0"
 
 compare-versions@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.1.0.tgz#43310256a5c555aaed4193c04d8f154cf9c6efd5"
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.2.1.tgz#a49eb7689d4caaf0b6db5220173fd279614000f7"
 
 component-emitter@^1.2.1:
   version "1.2.1"
@@ -2854,10 +2748,6 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
 
-console-polyfill@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/console-polyfill/-/console-polyfill-0.3.0.tgz#84900902a18c47a5eba932be75fa44d23e8af861"
-
 constant-case@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-2.0.0.tgz#4175764d389d3fa9c8ecd29186ed6005243b6a46"
@@ -3041,7 +2931,7 @@ conventional-recommended-bump@^1.2.1:
     meow "^3.3.0"
     object-assign "^4.0.1"
 
-convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
+convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
 
@@ -3179,8 +3069,8 @@ create-react-class@^15.5.1:
     object-assign "^4.1.1"
 
 cross-fetch@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-2.1.1.tgz#c41b37af8e62ca1c6ad0bd519dcd0a16c75b6f1f"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-2.2.0.tgz#2bcbff94ee51319bcee6699c642c5dda2aa8b6c0"
   dependencies:
     node-fetch "2.1.2"
     whatwg-fetch "2.0.4"
@@ -3203,12 +3093,6 @@ cross-spawn@^6.0.0:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cryptiles@3.x.x:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe"
-  dependencies:
-    boom "5.x.x"
-
 cryptiles@4.1.x, cryptiles@4.x.x:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-4.1.1.tgz#169256b9df9fe3c73f8085c99e30b32247d4ab46"
@@ -3307,8 +3191,8 @@ css-selector-tokenizer@^0.7.0:
     regexpu-core "^1.0.0"
 
 css-to-react-native@^2.0.3:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.1.2.tgz#c06d628467ef961c85ec358a90f3c87469fb0095"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.2.0.tgz#d524ef7f39a2747a8914e86563669ba35b7cf2e7"
   dependencies:
     css-color-keywords "^1.0.0"
     fbjs "^0.8.5"
@@ -3449,12 +3333,6 @@ debug@^3.0.0, debug@^3.0.1, debug@^3.1.0:
   dependencies:
     ms "2.0.0"
 
-decache@^3.0.5:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/decache/-/decache-3.1.0.tgz#4f5036fbd6581fcc97237ac3954a244b9536c2da"
-  dependencies:
-    find "^0.2.4"
-
 decamelize-keys@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
@@ -3575,6 +3453,10 @@ depd@~1.1.1, depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
 
+deprecated-decorator@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/deprecated-decorator/-/deprecated-decorator-0.1.6.tgz#00966317b7a12fe92f3cc831f7583af329b86c37"
+
 des.js@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
@@ -3698,8 +3580,8 @@ domhandler@2.1:
     domelementtype "1"
 
 domhandler@^2.3.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.1.tgz#892e47000a99be55bbf3774ffea0561d8879c259"
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
   dependencies:
     domelementtype "1"
 
@@ -3786,8 +3668,8 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
 electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30:
-  version "1.3.45"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.45.tgz#458ac1b1c5c760ce8811a16d2bfbd97ec30bafb8"
+  version "1.3.48"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.48.tgz#d3b0d8593814044e092ece2108fc3ac9aea4b900"
 
 elliptic@^6.0.0:
   version "6.4.0"
@@ -3868,12 +3750,6 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-error-stack-parser@1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-1.3.3.tgz#fada6e3a9cd2b0e080e6d6fc751418649734f35c"
-  dependencies:
-    stackframe "^0.3.1"
-
 es-abstract@^1.7.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.11.0.tgz#cce87d518f0496893b1a30cd8461835535480681"
@@ -4046,10 +3922,10 @@ eslint-plugin-flowtype@2.39.1:
     lodash "^4.15.0"
 
 eslint-plugin-flowtype@^2.46.1:
-  version "2.46.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.46.3.tgz#7e84131d87ef18b496b1810448593374860b4e8e"
+  version "2.47.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.47.1.tgz#1be0d6b855dbf8f253fcf49ea3d44bf6c23ff984"
   dependencies:
-    lodash "^4.15.0"
+    lodash "^4.17.10"
 
 eslint-plugin-import@2.8.0:
   version "2.8.0"
@@ -4067,8 +3943,8 @@ eslint-plugin-import@2.8.0:
     read-pkg-up "^2.0.0"
 
 eslint-plugin-import@^2.9.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.11.0.tgz#15aeea37a67499d848e8e981806d4627b5503816"
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.12.0.tgz#dad31781292d6664b25317fd049d2e2b2f02205d"
   dependencies:
     contains-path "^0.1.0"
     debug "^2.6.8"
@@ -4130,8 +4006,8 @@ eslint-plugin-react@7.4.0:
     prop-types "^15.5.10"
 
 eslint-plugin-react@^7.7.0:
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.7.0.tgz#f606c719dbd8a1a2b3d25c16299813878cca0160"
+  version "7.8.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.8.2.tgz#e95c9c47fece55d2303d1a67c9d01b930b88a51d"
   dependencies:
     doctrine "^2.0.2"
     has "^1.0.1"
@@ -4433,10 +4309,6 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.0.tgz#5a474353b9f3353ddd8176dfd37b91c83a46f1d4"
-
 extend@^3.0.0, extend@~3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
@@ -4519,10 +4391,11 @@ fast-diff@^1.1.1:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
 
 fast-glob@^2.0.2:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.1.tgz#686c2345be88f3741e174add0be6f2e5b6078889"
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.2.tgz#71723338ac9b4e0e2fff1d6748a2a13d5ed352bf"
   dependencies:
     "@mrmlnc/readdir-enhanced" "^2.2.1"
+    "@nodelib/fs.stat" "^1.0.1"
     glob-parent "^3.1.0"
     is-glob "^4.0.0"
     merge2 "^1.2.1"
@@ -4695,12 +4568,6 @@ find-up@^2.0.0, find-up@^2.1.0:
   dependencies:
     locate-path "^2.0.0"
 
-find@^0.2.4:
-  version "0.2.9"
-  resolved "https://registry.yarnpkg.com/find/-/find-0.2.9.tgz#4b73f1ff9e56ad91b76e716407fe5ffe6554bb8c"
-  dependencies:
-    traverse-chain "~0.1.0"
-
 findup@^0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/findup/-/findup-0.1.5.tgz#8ad929a3393bac627957a7e5de4623b06b0e2ceb"
@@ -4845,11 +4712,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
 fsevents@^1.0.0, fsevents@^1.1.2, fsevents@^1.1.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.3.tgz#08292982e7059f6674c93d8b829c1e8604979ac0"
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.4.tgz#f41dcb1af2582af3692da36fc55cbd8e1041c426"
   dependencies:
     nan "^2.9.2"
-    node-pre-gyp "^0.9.0"
+    node-pre-gyp "^0.10.0"
 
 fullstore@^1.0.0:
   version "1.1.0"
@@ -4860,8 +4727,8 @@ function-bind@^1.0.2, function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
 function.name-polyfill@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/function.name-polyfill/-/function.name-polyfill-1.0.5.tgz#d349bb4e24a324f08120455ee78a04142b1257bb"
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/function.name-polyfill/-/function.name-polyfill-1.0.6.tgz#c54e37cae0a77dfcb49d47982815b0826b5c60d9"
 
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
@@ -5130,22 +4997,14 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.4,
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
-graphi@5.5.x:
-  version "5.5.1"
-  resolved "https://registry.yarnpkg.com/graphi/-/graphi-5.5.1.tgz#8cd26a887937eb47ddde042625c65f4e8ee2452b"
-  dependencies:
-    boom "7.x.x"
-    graphql "0.13.x"
-    graphql-server-module-graphiql "1.3.x"
-    lodash.merge "4.6.x"
-
-graphi@5.6.x:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/graphi/-/graphi-5.6.0.tgz#eb2374b8f467c428023854cbd118f96f0d357bda"
+graphi@^5.7.0:
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/graphi/-/graphi-5.7.0.tgz#a3f4f19ac632ffe49b625c89d014563665704660"
   dependencies:
     boom "7.x.x"
     graphql "0.13.x"
     graphql-server-module-graphiql "1.3.x"
+    graphql-tools v3.0.0-beta.0
     lodash.merge "4.6.x"
 
 graphql-anywhere@^4.1.0-alpha.0, graphql-anywhere@^4.1.10:
@@ -5160,10 +5019,20 @@ graphql-server-module-graphiql@1.3.x:
   dependencies:
     apollo-server-module-graphiql "^1.3.4"
 
-graphql-tag@^2.8.0, graphql-tag@^2.9.1:
+graphql-tag@^2.8.0, graphql-tag@^2.9.2:
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.9.2.tgz#2f60a5a981375f430bf1e6e95992427dc18af686"
 
+graphql-tools@v3.0.0-beta.0:
+  version "3.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/graphql-tools/-/graphql-tools-3.0.0-beta.0.tgz#cc6741328ea616e2ada66a2aaf17bc269610c82e"
+  dependencies:
+    apollo-link "1.2.1"
+    apollo-utilities "^1.0.1"
+    deprecated-decorator "^0.1.6"
+    iterall "^1.1.3"
+    uuid "^3.1.0"
+
 graphql@0.13.x, graphql@^0.13.1:
   version "0.13.2"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270"
@@ -5187,9 +5056,9 @@ gzip-size@^4.0.0:
     duplexer "^0.1.1"
     pify "^3.0.0"
 
-h2o2@^8.0.1:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/h2o2/-/h2o2-8.1.1.tgz#fdba23054926356aba10402769266ee568ac43bf"
+h2o2@^8.1.2:
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/h2o2/-/h2o2-8.1.2.tgz#25e6f69f453175c9ca1e3618741c5ebe1b5000c1"
   dependencies:
     boom "7.x.x"
     hoek "5.x.x"
@@ -5210,6 +5079,12 @@ handlebars@^4.0.2, handlebars@^4.0.3:
   optionalDependencies:
     uglify-js "^2.6"
 
+hapi-render-react-joyent-document@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/hapi-render-react-joyent-document/-/hapi-render-react-joyent-document-5.0.0.tgz#3e182a1afdae8e1874d322caed3d883bfd85efde"
+  dependencies:
+    through2 "^2.0.3"
+
 hapi-render-react-joyent-document@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/hapi-render-react-joyent-document/-/hapi-render-react-joyent-document-7.1.0.tgz#518a8505d31b3fcf65145bb81390402c2cab6ac7"
@@ -5230,9 +5105,9 @@ hapi-render-react@^2.5.2:
     mz "^2.7.0"
     p-is-promise "^1.1.0"
 
-hapi-triton-auth@^2.0.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/hapi-triton-auth/-/hapi-triton-auth-2.1.0.tgz#40d513a6b970300677cc157fcf8803b5f71d96c1"
+hapi-triton-auth@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/hapi-triton-auth/-/hapi-triton-auth-3.0.0.tgz#c7c91090ca4bd25e974c8b0041c50f8e475d648b"
   dependencies:
     boom "7.1.x"
     bounce "1.2.x"
@@ -5240,19 +5115,18 @@ hapi-triton-auth@^2.0.1:
     hoek "5.0.x"
     wreck "14.0.x"
 
-hapi-webconsole-nav@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/hapi-webconsole-nav/-/hapi-webconsole-nav-1.2.0.tgz#aad402a75c24754944c77ead534e8ad488c61237"
+hapi-webconsole-nav@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/hapi-webconsole-nav/-/hapi-webconsole-nav-2.1.0.tgz#2655fd85b170417347e4b5adde15644f8e528edc"
   dependencies:
-    boom "7.x.x"
-    bounce "1.x.x"
-    graphi "5.5.x"
-    webconsole-cloudapi-client "1.x.x"
-    wreck "14.x.x"
+    boom "7.2.x"
+    bounce "1.2.x"
+    webconsole-cloudapi-client "1.1.x"
+    wreck "14.0.x"
 
-hapi@^17.3.1:
-  version "17.4.0"
-  resolved "https://registry.yarnpkg.com/hapi/-/hapi-17.4.0.tgz#c56c0ec3b8d678cc941bdb943bcbddc4107e838b"
+hapi@^17.4.0:
+  version "17.5.0"
+  resolved "https://registry.yarnpkg.com/hapi/-/hapi-17.5.0.tgz#9fc33f10d6f563d0203853937b60dd13a59b51ce"
   dependencies:
     accept "3.x.x"
     ammo "3.x.x"
@@ -5358,15 +5232,6 @@ hasha@3.0.x:
   dependencies:
     is-stream "^1.0.1"
 
-hawk@~6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
-  dependencies:
-    boom "4.x.x"
-    cryptiles "3.x.x"
-    hoek "4.x.x"
-    sntp "2.x.x"
-
 he@1.1.x:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
@@ -5401,10 +5266,6 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoek@4.x.x:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
-
 hoek@5.0.x, hoek@5.x.x:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-5.0.3.tgz#b71d40d943d0a95da01956b547f83c4a5b4a34ac"
@@ -5454,8 +5315,8 @@ html-entities@^1.2.0:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
 
 html-minifier@^3.2.3:
-  version "3.5.15"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.15.tgz#f869848d4543cbfd84f26d5514a2a87cbf9a05e0"
+  version "3.5.16"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.16.tgz#39f5aabaf78bdfc057fe67334226efd7f3851175"
   dependencies:
     camel-case "3.0.x"
     clean-css "4.1.x"
@@ -5528,8 +5389,8 @@ http-errors@~1.6.2:
     statuses ">= 1.4.0 < 2"
 
 http-parser-js@>=0.4.0:
-  version "0.4.12"
-  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.12.tgz#b9cfbf4a2cf26f0fc34b10ca1489a27771e3474f"
+  version "0.4.13"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.13.tgz#3bd6d6fde6e3172c9334c3b33b6c193d80fe1137"
 
 http-proxy-middleware@~0.17.4:
   version "0.17.4"
@@ -5793,6 +5654,10 @@ iron@5.x.x:
     cryptiles "4.x.x"
     hoek "5.x.x"
 
+irregular-plurals@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/irregular-plurals/-/irregular-plurals-2.0.0.tgz#39d40f05b00f656d0b7fa471230dd3b714af2872"
+
 is-absolute-url@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
@@ -6129,10 +5994,6 @@ is-wsl@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
 
-is_js@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/is_js/-/is_js-0.9.0.tgz#0ab94540502ba7afa24c856aa985561669e9c52d"
-
 isarray@0.0.1, isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -6246,7 +6107,7 @@ istanbul-reports@^1.3.0:
   dependencies:
     handlebars "^4.0.3"
 
-iterall@^1.2.1:
+iterall@^1.1.3, iterall@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
 
@@ -6549,8 +6410,8 @@ joyent-react-styled-flexboxgrid@^2.2.3:
     prop-types "^15.6.0"
 
 js-base64@^2.1.9:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.5.tgz#e293cd3c7c82f070d700fc7a1ca0a2e69f101f92"
 
 js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
@@ -6650,7 +6511,7 @@ json-stable-stringify@^1.0.1:
   dependencies:
     jsonify "~0.0.0"
 
-json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.0, json-stringify-safe@~5.0.1:
+json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
 
@@ -7078,7 +6939,7 @@ lodash.values@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.values/-/lodash.values-4.3.0.tgz#a3a6c2b0ebecc5c2cba1c17e6e620fe81b53d347"
 
-lodash@4.17.10, lodash@4.17.5, "lodash@>=3.5 <5", lodash@^3.3.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
+lodash@4.17.10, lodash@4.17.5, "lodash@>=3.5 <5", lodash@^3.3.1, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
 
@@ -7135,17 +6996,9 @@ lru-cache@4.1.x, lru-cache@^4.0.1, lru-cache@^4.1.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
-lru-cache@~2.2.1:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d"
-
 lunr@^2.1.6:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.2.0.tgz#ab66b8853e8f420cd018d9b474a650537d78a86f"
-
-macaddress@^0.2.8:
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.2.1.tgz#62c62947bf83619450e94abf26061f1ce3baaa47"
 
 magic-string@^0.22.4:
   version "0.22.5"
@@ -7154,8 +7007,8 @@ magic-string@^0.22.4:
     vlq "^0.2.2"
 
 make-dir@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.2.0.tgz#6d6a49eead4aae296c53bbf3a1a008bd6c89469b"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
   dependencies:
     pify "^3.0.0"
 
@@ -7195,9 +7048,9 @@ markdown-table@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.2.tgz#c78db948fa879903a41bce522e3b96f801c63786"
 
-markdown-to-jsx@^6.4.1:
-  version "6.6.2"
-  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.6.2.tgz#a9194033d014f503c7dff528c12b4e25719a6b0f"
+markdown-to-jsx@^6.6.3:
+  version "6.6.5"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.6.5.tgz#db0dca51b66f27518065f6040cc20cfc4edc46ce"
   dependencies:
     prop-types "^15.5.10"
     unquote "^1.1.0"
@@ -7297,8 +7150,8 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
 
 micro@^9.1.0:
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/micro/-/micro-9.3.0.tgz#00b5b3cd45411bf6de171fd339596ce549a078f7"
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/micro/-/micro-9.3.1.tgz#0c37eba0171554b1beccda5215ff8ea4e7aa59d6"
   dependencies:
     arg "2.0.0"
     chalk "2.4.0"
@@ -7363,10 +7216,14 @@ mime@1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
 
-mime@^1.3.4, mime@^1.4.1, mime@^1.5.0:
+mime@^1.4.1, mime@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
 
+mime@^2.0.3:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.3.1.tgz#b1621c54d63b97c47d3cfe7f7215f7d64517c369"
+
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
@@ -7428,10 +7285,10 @@ minimist@~0.0.1:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
 
 minipass@^2.2.1, minipass@^2.2.4:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.0.tgz#2e11b1c46df7fe7f1afbe9a490280add21ffe384"
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.3.tgz#a7dcc8b7b833f5d368759cce544dccb55f50f233"
   dependencies:
-    safe-buffer "^5.1.1"
+    safe-buffer "^5.1.2"
     yallist "^3.0.0"
 
 minizlib@^1.1.0:
@@ -7649,9 +7506,9 @@ node-notifier@^5.0.2:
     shellwords "^0.1.1"
     which "^1.3.0"
 
-node-pre-gyp@^0.9.0:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.9.1.tgz#f11c07516dd92f87199dbc7e1838eab7cd56c9e0"
+node-pre-gyp@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.0.tgz#6e4ef5bb5c5203c6552448828c852c40111aac46"
   dependencies:
     detect-libc "^1.0.2"
     mkdirp "^0.5.1"
@@ -7892,10 +7749,10 @@ ora@^2.0.0:
     wcwidth "^1.0.1"
 
 original@>=0.0.5:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/original/-/original-1.0.0.tgz#9147f93fa1696d04be61e01bd50baeaca656bd3b"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/original/-/original-1.0.1.tgz#b0a53ff42ba997a8c9cd1fb5daaeb42b9d693190"
   dependencies:
-    url-parse "1.0.x"
+    url-parse "~1.4.0"
 
 os-browserify@^0.3.0:
   version "0.3.0"
@@ -8208,6 +8065,12 @@ pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
+plur@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/plur/-/plur-3.0.1.tgz#268652d605f816699b42b86248de73c9acd06a7c"
+  dependencies:
+    irregular-plurals "^2.0.0"
+
 pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
@@ -8294,11 +8157,10 @@ postcss-discard-unused@^2.2.1:
     uniqs "^2.0.0"
 
 postcss-filter-plugins@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c"
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.3.tgz#82245fdf82337041645e477114d8e593aa18b8ec"
   dependencies:
     postcss "^5.0.4"
-    uniqid "^4.0.0"
 
 postcss-flexbugs-fixes@3.2.0:
   version "3.2.0"
@@ -8611,8 +8473,8 @@ pretty-format@^3.5.1:
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"
 
 pretty-quick@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/pretty-quick/-/pretty-quick-1.4.1.tgz#9d41f778d2d4d940ec603d1293a0998e84c4722c"
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/pretty-quick/-/pretty-quick-1.6.0.tgz#afc3591eb5c4cf37614a305d489a8a40e57c9258"
   dependencies:
     chalk "^2.3.0"
     execa "^0.8.0"
@@ -8707,8 +8569,8 @@ pump@^2.0.0, pump@^2.0.1:
     once "^1.3.1"
 
 pumpify@^1.3.3, pumpify@^1.4.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.0.tgz#30c905a26c88fa0074927af07256672b474b1c15"
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
   dependencies:
     duplexify "^3.6.0"
     inherits "^2.0.3"
@@ -8727,13 +8589,13 @@ punycode@^1.2.4, punycode@^1.4.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
 puppeteer@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-1.3.0.tgz#f571c5f27153ca164a8188e6328ce2e4946878f3"
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-1.4.0.tgz#437f0f3450d76e437185c0bf06f446e80f184692"
   dependencies:
-    debug "^2.6.8"
+    debug "^3.1.0"
     extract-zip "^1.6.5"
     https-proxy-agent "^2.1.0"
-    mime "^1.3.4"
+    mime "^2.0.3"
     progress "^2.0.0"
     proxy-from-env "^1.0.0"
     rimraf "^2.6.1"
@@ -8766,7 +8628,7 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
-query-string@^6.0.0:
+query-string@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.1.0.tgz#01e7d69f6a0940dac67a937d6c6325647aa4532a"
   dependencies:
@@ -8781,10 +8643,6 @@ querystring@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
-querystringify@0.0.x:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-0.0.4.tgz#0cf7f84f9463ff0ae51c4c4b142d95be37724d9c"
-
 querystringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.0.0.tgz#fa3ed6e68eb15159457c89b37bc6472833195755"
@@ -9111,10 +8969,10 @@ react-scroll-parallax@^1.3.3:
     prop-types "^15.5.10"
 
 react-styleguidist@^7.0.4:
-  version "7.0.10"
-  resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-7.0.10.tgz#aaf38f14c5d0a12bc3026e4d7f70fc18d9c86049"
+  version "7.0.14"
+  resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-7.0.14.tgz#ac6c6e5e7c80cb0e021aebe86f6609122a776a94"
   dependencies:
-    "@vxna/mini-html-webpack-template" "^0.1.6"
+    "@vxna/mini-html-webpack-template" "^0.1.7"
     acorn "^5.5.3"
     ast-types "^0.11.3"
     buble "^0.19.3"
@@ -9150,7 +9008,7 @@ react-styleguidist@^7.0.4:
     loader-utils "^1.1.0"
     lodash "^4.17.5"
     lowercase-keys "^1.0.1"
-    markdown-to-jsx "^6.4.1"
+    markdown-to-jsx "^6.6.3"
     mini-html-webpack-plugin "^0.2.3"
     minimist "^1.2.0"
     ora "^2.0.0"
@@ -9241,7 +9099,7 @@ read-pkg@^3.0.0:
     normalize-package-data "^2.3.2"
     path-type "^3.0.0"
 
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.0, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.2.9, readable-stream@^2.3.3:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.0, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.2.9, readable-stream@^2.3.3, readable-stream@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
   dependencies:
@@ -9394,8 +9252,8 @@ redux@^3.7.2:
     symbol-observable "^1.0.3"
 
 regenerate@^1.2.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
 
 regenerator-runtime@0.11.1, regenerator-runtime@^0.10.0, regenerator-runtime@^0.10.5, regenerator-runtime@^0.11.0:
   version "0.11.1"
@@ -9576,15 +9434,9 @@ replace-ext@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
 
-request-ip@~2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/request-ip/-/request-ip-2.0.2.tgz#deeae6d4af21768497db8cd05fa37143f8f1257e"
-  dependencies:
-    is_js "^0.9.0"
-
 "request@>= 2.44.0 < 3.0.0", request@^2.79.0:
-  version "2.85.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.85.0.tgz#5a03615a47c61420b3eb99b7dba204f83603e1fa"
+  version "2.87.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.6.0"
@@ -9594,7 +9446,6 @@ request-ip@~2.0.1:
     forever-agent "~0.6.1"
     form-data "~2.3.1"
     har-validator "~5.0.3"
-    hawk "~6.0.2"
     http-signature "~1.2.0"
     is-typedarray "~1.0.0"
     isstream "~0.1.2"
@@ -9604,7 +9455,6 @@ request-ip@~2.0.1:
     performance-now "^2.1.0"
     qs "~6.5.1"
     safe-buffer "^5.1.1"
-    stringstream "~0.0.5"
     tough-cookie "~2.3.3"
     tunnel-agent "^0.6.0"
     uuid "^3.1.0"
@@ -9636,7 +9486,7 @@ require-uncached@^1.0.3:
     caller-path "^0.1.0"
     resolve-from "^1.0.0"
 
-requires-port@1.0.x, requires-port@^1.0.0:
+requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
@@ -9732,28 +9582,6 @@ rnd-id@^2.0.2:
   dependencies:
     random-natural "^1.0.3"
 
-rollbar@2.3.5:
-  version "2.3.5"
-  resolved "https://registry.yarnpkg.com/rollbar/-/rollbar-2.3.5.tgz#c082bd4d06f20078955f5cc8e0fcd4ea693d4585"
-  dependencies:
-    async "~1.2.1"
-    console-polyfill "0.3.0"
-    debug "2.6.9"
-    error-stack-parser "1.3.3"
-    extend "3.0.0"
-    json-stringify-safe "~5.0.0"
-    lru-cache "~2.2.1"
-    request-ip "~2.0.1"
-    uuid "3.0.x"
-  optionalDependencies:
-    decache "^3.0.5"
-
-rollover@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rollover/-/rollover-1.0.0.tgz#d8555bd55ee09d9f0799086bb35b16d72ff9fc6f"
-  dependencies:
-    rollbar "2.3.5"
-
 run-async@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389"
@@ -10038,12 +9866,6 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-sntp@2.x.x:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
-  dependencies:
-    hoek "4.x.x"
-
 sockjs-client@1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.4.tgz#5babe386b775e4cf14e7520911452654016c8b12"
@@ -10094,10 +9916,10 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
 
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.1.tgz#7ad0f593f2281598e854df80f19aae4b92d7a11a"
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
   dependencies:
-    atob "^2.0.0"
+    atob "^2.1.1"
     decode-uri-component "^0.2.0"
     resolve-url "^0.2.1"
     source-map-url "^0.4.0"
@@ -10134,8 +9956,8 @@ source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
 sparkles@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.0.tgz#1acbbfb592436d10bbe8f785b7cc6f82815012c3"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.1.tgz#008db65edce6c50eec0c5e228e1945061dd0437c"
 
 spdx-correct@^3.0.0:
   version "3.0.0"
@@ -10228,10 +10050,6 @@ ssri@^5.2.4:
   dependencies:
     safe-buffer "^5.1.1"
 
-stackframe@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-0.3.1.tgz#33aa84f1177a5548c8935533cbfeb3420975f5a4"
-
 standalone-react-addons-pure-render-mixin@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/standalone-react-addons-pure-render-mixin/-/standalone-react-addons-pure-render-mixin-0.1.1.tgz#3c7409f4c79c40de9ac72c616cf679a994f37551"
@@ -10285,12 +10103,12 @@ stream-each@^1.1.0:
     stream-shift "^1.0.0"
 
 stream-http@^2.7.2:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.1.tgz#d0441be1a457a73a733a8a7b53570bebd9ef66a4"
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.2.tgz#4126e8c6b107004465918aa2fc35549e77402c87"
   dependencies:
     builtin-status-codes "^3.0.0"
     inherits "^2.0.1"
-    readable-stream "^2.3.3"
+    readable-stream "^2.3.6"
     to-arraybuffer "^1.0.0"
     xtend "^4.0.0"
 
@@ -10361,10 +10179,6 @@ stringify-object@^3.2.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-stringstream@~0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
-
 strip-ansi@3.0.1, strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
@@ -10462,7 +10276,7 @@ styled-flex-component@^2.2.2:
   dependencies:
     styled-is "1.1.2"
 
-styled-is@1.1.2, styled-is@1.1.3, styled-is@^1.1.2:
+styled-is@1.1.2, styled-is@1.1.3, styled-is@^1.1.2, styled-is@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/styled-is/-/styled-is-1.1.3.tgz#09df6cb5aff33c91080cdb3bf4f687eac96b5839"
 
@@ -10700,7 +10514,7 @@ throat@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
 
-through2@^2.0.0, through2@^2.0.2:
+through2@^2.0.0, through2@^2.0.2, through2@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
   dependencies:
@@ -10826,10 +10640,6 @@ tr46@~0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
 
-traverse-chain@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/traverse-chain/-/traverse-chain-0.1.0.tgz#61dbc2d53b69ff6091a12a168fd7d433107e40f1"
-
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
@@ -10862,6 +10672,14 @@ try-catch@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/try-catch/-/try-catch-2.0.0.tgz#a491141d597f8b72b46757fe1c47059341a16aed"
 
+tsg-graphql@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tsg-graphql/-/tsg-graphql-1.0.0.tgz#25e0b2cfb44ec619c8e8be75a97011d3d4941113"
+  dependencies:
+    boom "7.2.x"
+    bounce "1.2.x"
+    webconsole-cloudapi-client "1.1.x"
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
@@ -10917,8 +10735,8 @@ uglify-es@^3.3.4, uglify-es@^3.3.9:
     source-map "~0.6.1"
 
 uglify-js@3.3.x, uglify-js@^3.0.13:
-  version "3.3.24"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.24.tgz#abeae7690c602ebd006f4567387a0c0c333bdc0d"
+  version "3.3.27"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.27.tgz#eb8c3c9429969f86ff5b0a2422ffc78c3cea8cc0"
   dependencies:
     commander "~2.15.0"
     source-map "~0.6.1"
@@ -11005,12 +10823,6 @@ uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
 
-uniqid@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.1.tgz#89220ddf6b751ae52b5f72484863528596bb84c1"
-  dependencies:
-    macaddress "^0.2.8"
-
 uniqs@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
@@ -11091,8 +10903,8 @@ unzip-response@^2.0.1:
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
 
 upath@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/upath/-/upath-1.0.5.tgz#02cab9ecebe95bbec6d5fc2566325725ab6d1a73"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd"
 
 update-notifier@^2.3.0:
   version "2.5.0"
@@ -11147,14 +10959,7 @@ url-parse-lax@^1.0.0:
   dependencies:
     prepend-http "^1.0.1"
 
-url-parse@1.0.x:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"
-  dependencies:
-    querystringify "0.0.x"
-    requires-port "1.0.x"
-
-url-parse@^1.1.8:
+url-parse@^1.1.8, url-parse@~1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.0.tgz#6bfdaad60098c7fe06f623e42b22de62de0d3d75"
   dependencies:
@@ -11204,10 +11009,6 @@ uuid@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.0.tgz#6728fc0459c450d796a99c31837569bdf672d728"
 
-uuid@3.0.x:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
-
 uuid@^2.0.1, uuid@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
@@ -11345,15 +11146,7 @@ wcwidth@^1.0.0, wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
-webconsole-cloudapi-client@1.0.x:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/webconsole-cloudapi-client/-/webconsole-cloudapi-client-1.0.0.tgz#af14eaf103c71435fa65ea81e5a0562cbc3faf3f"
-  dependencies:
-    boom "7.x.x"
-    bounce "1.2.x"
-    wreck "14.x.x"
-
-webconsole-cloudapi-client@1.x.x:
+webconsole-cloudapi-client@1.1.x, webconsole-cloudapi-client@1.x.x:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/webconsole-cloudapi-client/-/webconsole-cloudapi-client-1.1.0.tgz#e55898ca41c2bd585eef16d6bf0e7a9d6732a28f"
   dependencies:
@@ -11509,8 +11302,8 @@ webpack@3.8.1:
     yargs "^8.0.2"
 
 webpack@^3.1.0:
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.11.0.tgz#77da451b1d7b4b117adaf41a1a93b5742f24d894"
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.12.0.tgz#3f9e34360370602fcf639e97939db486f4ec0d74"
   dependencies:
     acorn "^5.0.0"
     acorn-dynamic-import "^2.0.0"
@@ -11850,7 +11643,7 @@ yup@^0.24.1:
     toposort "^0.2.10"
     type-name "^2.0.1"
 
-zen-observable-ts@^0.8.9:
+zen-observable-ts@^0.8.6, zen-observable-ts@^0.8.9:
   version "0.8.9"
   resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-0.8.9.tgz#d3c97af08c0afdca37ebcadf7cc3ee96bda9bab1"
   dependencies: