diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json
index b9260826..c620540d 100644
--- a/packages/my-joy-beta/package.json
+++ b/packages/my-joy-beta/package.json
@@ -36,6 +36,7 @@
     "normalized-styled-components": "^1.0.17",
     "param-case": "^2.1.1",
     "prop-types": "^15.6.0",
+    "punycode": "^2.1.0",
     "react": "^16.2.0",
     "react-apollo": "^2.0.4",
     "react-dom": "^16.2.0",
diff --git a/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap b/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap
index 8818c9a5..bf9b286e 100644
--- a/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap
+++ b/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap
@@ -29,6 +29,13 @@ exports[`renders <Menu links /> without throwing 1`] = `
   max-width: 62.5rem;
 }
 
+.c3 {
+  display: inline-block;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
 .c4 {
   color: rgb(70,70,70);
   text-decoration: none;
@@ -40,13 +47,6 @@ exports[`renders <Menu links /> without throwing 1`] = `
   cursor: default;
 }
 
-.c3 {
-  display: inline-block;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin-right: 1.4375rem;
-}
-
 .c2 {
   list-style-type: none;
   padding: 0;
diff --git a/packages/my-joy-beta/src/containers/create-instance/cns.js b/packages/my-joy-beta/src/containers/create-instance/cns.js
index e62efb28..075d2b9d 100644
--- a/packages/my-joy-beta/src/containers/create-instance/cns.js
+++ b/packages/my-joy-beta/src/containers/create-instance/cns.js
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { compose } from 'react-apollo';
+import { compose, graphql } from 'react-apollo';
 import ReduxForm from 'declarative-redux-form';
 import { destroy } from 'redux-form';
 import { connect } from 'react-redux';
@@ -7,6 +7,7 @@ import get from 'lodash.get';
 import { Margin, Padding } from 'styled-components-spacing';
 import Flex from 'styled-flex-component';
 import { set } from 'react-redux-values';
+import punycode from 'punycode';
 import remcalc from 'remcalc';
 
 import {
@@ -19,9 +20,12 @@ import {
   FormLabel,
   Toggle,
   Divider,
-  TagList
+  TagList,
+  StatusLoader
 } from 'joyent-ui-toolkit';
 
+import getAccount from '../../graphql/get-account.gql';
+
 import {
   Hostname,
   Header,
@@ -46,7 +50,8 @@ const CNSContainer = ({
   handleEdit,
   handleToggleCnsEnabled,
   handleAddService,
-  handleRemoveService
+  handleRemoveService,
+  loading
 }) => (
   <Fragment>
     <Title icon={<CnsIcon />}>Container Name Service</Title>
@@ -69,19 +74,27 @@ const CNSContainer = ({
         <Card>
           <Padding all={4} bottom={0}>
             <Header />
-            <Flex column>
-              {hostnames
-                .filter(({ service }) => !service)
-                .map(({ value, ...hostname }) => (
-                  <Hostname key={value} value={value} {...hostname} />
-                ))}
-            </Flex>
+            {loading ? (
+              <Margin all={2}>
+                {' '}
+                <StatusLoader />
+              </Margin>
+            ) : (
+              <Flex column>
+                {hostnames
+                  .filter(({ service }) => !service)
+                  .map(({ value, ...hostname }) => (
+                    <Hostname key={value} value={value} {...hostname} />
+                  ))}
+              </Flex>
+            )}
             <Divider height={remcalc(1)} />
             <Margin top={4}>
+              <HostnamesHeader />
               {serviceNames.length ? (
-                <Margin>
+                <Margin bottom={3}>
                   <FormLabel>Existing CNS service name(s)</FormLabel>
-                  <Margin top={0.5}>
+                  <Margin top={1}>
                     <TagList>
                       {serviceNames.map((value, index) => (
                         <Tag
@@ -95,7 +108,6 @@ const CNSContainer = ({
                   </Margin>
                 </Margin>
               ) : null}
-              <HostnamesHeader />
               <ReduxForm
                 form={`${CNS_FORM}-new-service`}
                 destroyOnUnmount={false}
@@ -131,8 +143,7 @@ const CNSContainer = ({
           </Margin>
           <Margin bottom={4}>
             <P>
-              *All hostnames are indicative and will be confirmed after
-              deployment.
+              *All hostnames listed here will be confirmed after deployment.
             </P>
           </Margin>
           <Margin bottom={4}>
@@ -147,7 +158,7 @@ const CNSContainer = ({
           <Margin bottom={4}>
             <H3>{cnsEnabled ? 'CNS Enabled' : 'CNS Not Enabled'}</H3>
           </Margin>
-          {cnsEnabled ? (
+          {cnsEnabled && serviceNames.length ? (
             <Fragment>
               <FormLabel>Existing CNS service name(s)</FormLabel>
               <Margin top={0.5}>
@@ -171,7 +182,13 @@ const CNSContainer = ({
 );
 
 export default compose(
-  connect(({ form, values }, ownProps) => {
+  graphql(getAccount, {
+    props: ({ data: { loading, account: { id } = [] } }) => ({
+      loading,
+      id
+    })
+  }),
+  connect(({ form, values }, { id }) => {
     const instanceName = get(
       form,
       'create-instance-name.values.name',
@@ -179,17 +196,16 @@ export default compose(
     );
     const serviceNames = get(values, `${CNS_FORM}-services`, []);
 
-    // REPLACE WITH USER ID AND DATA CENTER
-    const userID = '10703e3c-ada6-478d-c757-e5bcad0ea74c';
+    // REPLACE WITH  DATA CENTER
     const dataCenter = 'us-east-1';
 
     const hostnames = [
       {
-        values: [`${instanceName}.inst.${userID}.${dataCenter}.triton.zone`],
+        values: [`${instanceName}.inst.${id}.${dataCenter}.triton.zone`],
         public: true
       },
       {
-        values: [`${instanceName}.inst.${userID}.${dataCenter}.cns.joyent.com`]
+        values: [`${instanceName}.inst.${id}.${dataCenter}.cns.joyent.com`]
       },
       {
         values: [],
@@ -209,7 +225,7 @@ export default compose(
 
       return serviceNames.map(name => {
         const postfix = hostname.public ? '.triton.zone' : '.cns.joyent.com';
-        const value = `${name}.svc.${userID}.${dataCenter}${postfix}`;
+        const value = `${name}.svc.${id}.${dataCenter}${postfix}`;
         hostname.values.push(value);
       });
     });
@@ -231,11 +247,17 @@ export default compose(
     handleToggleCnsEnabled: ({ target }) =>
       dispatch(set({ name: `${CNS_FORM}-enabled`, value: !cnsEnabled })),
     handleAddService: ({ name }) => {
+      const serviceName = punycode.encode(
+        name
+          .toLowerCase()
+          .split(' ')
+          .join('-')
+      );
       dispatch([
         destroy(`${CNS_FORM}-new-service`),
         set({
           name: `${CNS_FORM}-services`,
-          value: serviceNames.concat(name.toLowerCase())
+          value: serviceNames.concat(serviceName)
         })
       ]);
     },
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
index 94562064..3a084738 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -3600,13 +3600,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   border-radius: 0.6875rem;
 }
 
-.c42 {
-  background-color: rgba(241,241,241,1);
-  border-top: 0.0625rem solid rgb(216,216,216);
-  height: 4.375rem;
-  max-height: 4.375rem;
-}
-
 .c11 {
   display: inline-block;
 }
@@ -3695,7 +3688,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c47 {
+.c46 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3755,6 +3748,131 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   align-items: center;
 }
 
+.c46:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c46:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c46[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c46:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c46:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c46:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c46:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c46 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c46 svg {
+  max-height: 1.125rem;
+}
+
+.c47 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+}
+
 .c47:focus {
   outline: 0;
   text-decoration: none;
@@ -3823,7 +3941,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c48 {
+.c49 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3865,11 +3983,18 @@ 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);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
+  padding: 0.5625rem 1.125rem;
+  font-size: 0.8125rem;
+  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3878,73 +4003,91 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  float: right;
 }
 
-.c48:focus {
+.c49:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c48:hover {
+.c49:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c48:active,
-.c48:active:hover,
-.c48:active:focus {
+.c49:active,
+.c49:active:hover,
+.c49:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c48[disabled] {
+.c49[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c48:focus {
+.c49:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c48:hover {
+.c49:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c48:active,
-.c48:active:hover,
-.c48:active:focus {
+.c49:active,
+.c49:active:hover,
+.c49:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c48:focus {
+.c49:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c49:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c49:active,
+.c49:active:hover,
+.c49:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c49:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c48:hover {
+.c49:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c48:active,
-.c48:active:hover,
-.c48:active:focus {
+.c49:active,
+.c49:active:hover,
+.c49:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c48 svg + span {
+.c49 svg + span {
   margin-left: 0.75rem;
 }
 
-.c48 svg {
+.c49 svg {
   max-height: 1.125rem;
 }
 
@@ -3999,9 +4142,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4098,153 +4238,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c51 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  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;
-}
-
-.c51:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c51:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c51[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c51:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c51:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c51:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-}
-
-.c51:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
-}
-
-.c51:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c51:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c51 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c51 svg {
-  max-height: 1.125rem;
-}
-
 .c6 {
   font-size: 0.9375rem;
   font-style: normal;
@@ -4267,7 +4260,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c44 {
+.c43 {
   margin-right: auto;
   margin-left: auto;
   box-sizing: border-box;
@@ -4330,7 +4323,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   flex: 1 1 auto;
 }
 
-.c45 {
+.c44 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4370,7 +4363,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c46 {
+.c45 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4379,7 +4372,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c49 {
+.c48 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4395,7 +4388,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   height: 1.875rem;
 }
 
-.c43 {
+.c42 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4413,10 +4406,13 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  background-color: rgb(30,49,59);
+  background-color: rgba(241,241,241,1);
+  border-top: 0.0625rem solid rgb(216,216,216);
   max-height: 3.3125rem;
   min-height: 3.3125rem;
   line-height: 1.5625rem;
+  height: 4.375rem;
+  max-height: 4.375rem;
   position: fixed;
   left: 0;
   right: 0;
@@ -4976,32 +4972,32 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c44 {
+  .c43 {
     width: 46rem;
   }
 }
 
 @media only screen and (min-width:64em) {
-  .c44 {
+  .c43 {
     width: 61rem;
   }
 }
 
 @media only screen and (min-width:75em) {
-  .c44 {
+  .c43 {
     width: 76rem;
   }
 }
 
 @media only screen and (max-width:47.9375rem) {
-  .c44 {
+  .c43 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
   }
 }
 
 @media only screen and (min-width:0em) {
-  .c45 {
+  .c44 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -5010,7 +5006,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c45 {
+  .c44 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -5059,7 +5055,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c46 {
+  .c45 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -5069,7 +5065,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c49 {
+  .c48 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -5601,23 +5597,23 @@ exports[`renders <List instances selected /> without throwing 1`] = `
     </table>
   </form>
   <div
-    className="c42 c43"
+    className="c42"
   >
     <div
-      className="c44"
+      className="c43"
     >
       <div
-        className="c45"
+        className="c44"
       >
         <div
-          className="c46"
+          className="c45"
         >
           <span
             name="react-responsive-mock"
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c47 c11 c12"
+              className="c46 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -5685,7 +5681,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c48 c11 c12"
+              className="c47 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -5756,7 +5752,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c47 c11 c12"
+              className="c46 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -5820,7 +5816,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c48 c11 c12"
+              className="c47 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -5887,7 +5883,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c47 c11 c12"
+              className="c46 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -5935,7 +5931,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c48 c11 c12"
+              className="c47 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -5983,14 +5979,14 @@ exports[`renders <List instances selected /> without throwing 1`] = `
           </span>
         </div>
         <div
-          className="c49"
+          className="c48"
         >
           <span
             name="react-responsive-mock"
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c50 c11 c12"
+              className="c49 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -6038,7 +6034,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c51 c11 c12"
+              className="c50 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -6224,13 +6220,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   border-radius: 0.6875rem;
 }
 
-.c42 {
-  background-color: rgba(241,241,241,1);
-  border-top: 0.0625rem solid rgb(216,216,216);
-  height: 4.375rem;
-  max-height: 4.375rem;
-}
-
 .c11 {
   display: inline-block;
 }
@@ -6319,7 +6308,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c47 {
+.c46 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6379,6 +6368,131 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   align-items: center;
 }
 
+.c46:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c46:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c46[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c46:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c46:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c46:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c46:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c46 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c46 svg {
+  max-height: 1.125rem;
+}
+
+.c47 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+}
+
 .c47:focus {
   outline: 0;
   text-decoration: none;
@@ -6447,7 +6561,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c48 {
+.c49 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6489,11 +6603,18 @@ 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);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
+  padding: 0.5625rem 1.125rem;
+  font-size: 0.8125rem;
+  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6502,73 +6623,91 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  float: right;
 }
 
-.c48:focus {
+.c49:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c48:hover {
+.c49:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c48:active,
-.c48:active:hover,
-.c48:active:focus {
+.c49:active,
+.c49:active:hover,
+.c49:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c48[disabled] {
+.c49[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c48:focus {
+.c49:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c48:hover {
+.c49:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c48:active,
-.c48:active:hover,
-.c48:active:focus {
+.c49:active,
+.c49:active:hover,
+.c49:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c48:focus {
+.c49:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c49:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c49:active,
+.c49:active:hover,
+.c49:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c49:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c48:hover {
+.c49:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c48:active,
-.c48:active:hover,
-.c48:active:focus {
+.c49:active,
+.c49:active:hover,
+.c49:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c48 svg + span {
+.c49 svg + span {
   margin-left: 0.75rem;
 }
 
-.c48 svg {
+.c49 svg {
   max-height: 1.125rem;
 }
 
@@ -6623,9 +6762,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6722,153 +6858,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c51 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  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;
-}
-
-.c51:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c51:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c51[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c51:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c51:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c51:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-}
-
-.c51:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
-}
-
-.c51:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c51:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c51 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c51 svg {
-  max-height: 1.125rem;
-}
-
 .c6 {
   font-size: 0.9375rem;
   font-style: normal;
@@ -6891,7 +6880,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c44 {
+.c43 {
   margin-right: auto;
   margin-left: auto;
   box-sizing: border-box;
@@ -6954,7 +6943,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   flex: 1 1 auto;
 }
 
-.c45 {
+.c44 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6994,7 +6983,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c46 {
+.c45 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7003,7 +6992,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c49 {
+.c48 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7019,7 +7008,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   height: 1.875rem;
 }
 
-.c43 {
+.c42 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7037,10 +7026,13 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  background-color: rgb(30,49,59);
+  background-color: rgba(241,241,241,1);
+  border-top: 0.0625rem solid rgb(216,216,216);
   max-height: 3.3125rem;
   min-height: 3.3125rem;
   line-height: 1.5625rem;
+  height: 4.375rem;
+  max-height: 4.375rem;
   position: fixed;
   left: 0;
   right: 0;
@@ -7600,32 +7592,32 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c44 {
+  .c43 {
     width: 46rem;
   }
 }
 
 @media only screen and (min-width:64em) {
-  .c44 {
+  .c43 {
     width: 61rem;
   }
 }
 
 @media only screen and (min-width:75em) {
-  .c44 {
+  .c43 {
     width: 76rem;
   }
 }
 
 @media only screen and (max-width:47.9375rem) {
-  .c44 {
+  .c43 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
   }
 }
 
 @media only screen and (min-width:0em) {
-  .c45 {
+  .c44 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -7634,7 +7626,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c45 {
+  .c44 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -7683,7 +7675,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c46 {
+  .c45 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -7693,7 +7685,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c49 {
+  .c48 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -8225,23 +8217,23 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
     </table>
   </form>
   <div
-    className="c42 c43"
+    className="c42"
   >
     <div
-      className="c44"
+      className="c43"
     >
       <div
-        className="c45"
+        className="c44"
       >
         <div
-          className="c46"
+          className="c45"
         >
           <span
             name="react-responsive-mock"
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c47 c11 c12"
+              className="c46 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -8309,7 +8301,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c48 c11 c12"
+              className="c47 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -8380,7 +8372,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c47 c11 c12"
+              className="c46 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -8444,7 +8436,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c48 c11 c12"
+              className="c47 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -8511,7 +8503,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c47 c11 c12"
+              className="c46 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -8559,7 +8551,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c48 c11 c12"
+              className="c47 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -8607,14 +8599,14 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
           </span>
         </div>
         <div
-          className="c49"
+          className="c48"
         >
           <span
             name="react-responsive-mock"
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c50 c11 c12"
+              className="c49 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -8662,7 +8654,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c51 c11 c12"
+              className="c50 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -8848,13 +8840,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-radius: 0.6875rem;
 }
 
-.c42 {
-  background-color: rgba(241,241,241,1);
-  border-top: 0.0625rem solid rgb(216,216,216);
-  height: 4.375rem;
-  max-height: 4.375rem;
-}
-
 .c11 {
   display: inline-block;
 }
@@ -8943,7 +8928,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   max-height: 1.125rem;
 }
 
-.c49 {
+.c48 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -9003,6 +8988,131 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   align-items: center;
 }
 
+.c48:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c48:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c48:active,
+.c48:active:hover,
+.c48:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c48[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c48:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c48:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c48:active,
+.c48:active:hover,
+.c48:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c48:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c48:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c48:active,
+.c48:active:hover,
+.c48:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c48 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c48 svg {
+  max-height: 1.125rem;
+}
+
+.c49 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+}
+
 .c49:focus {
   outline: 0;
   text-decoration: none;
@@ -9071,7 +9181,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   max-height: 1.125rem;
 }
 
-.c50 {
+.c51 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -9113,11 +9223,18 @@ 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);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
+  padding: 0.5625rem 1.125rem;
+  font-size: 0.8125rem;
+  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -9126,73 +9243,91 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  float: right;
 }
 
-.c50:focus {
+.c51:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c50:hover {
+.c51:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c50:active,
-.c50:active:hover,
-.c50:active:focus {
+.c51:active,
+.c51:active:hover,
+.c51:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c50[disabled] {
+.c51[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c50:focus {
+.c51:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c50:hover {
+.c51:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c50:active,
-.c50:active:hover,
-.c50:active:focus {
+.c51:active,
+.c51:active:hover,
+.c51:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c50:focus {
+.c51:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c51:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c51:active,
+.c51:active:hover,
+.c51:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c51:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c50:hover {
+.c51:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c50:active,
-.c50:active:hover,
-.c50:active:focus {
+.c51:active,
+.c51:active:hover,
+.c51:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c50 svg + span {
+.c51 svg + span {
   margin-left: 0.75rem;
 }
 
-.c50 svg {
+.c51 svg {
   max-height: 1.125rem;
 }
 
@@ -9247,9 +9382,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -9346,7 +9478,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   max-height: 1.125rem;
 }
 
-.c53 {
+.c46 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -9388,15 +9520,9 @@ 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);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
+  padding: 0.5625rem 1.125rem;
+  font-size: 0.8125rem;
+  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -9405,91 +9531,56 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  float: right;
 }
 
-.c53:focus {
+.c46:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c53:hover {
+.c46:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c53:active,
-.c53:active:hover,
-.c53:active:focus {
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c53[disabled] {
+.c46[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c53:focus {
+.c46:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c53:hover {
+.c46:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c53:active,
-.c53:active:hover,
-.c53:active:focus {
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c53:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-}
-
-.c53:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
-}
-
-.c53:active,
-.c53:active:hover,
-.c53:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
-}
-
-.c53:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c53:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c53:active,
-.c53:active:hover,
-.c53:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c53 svg + span {
+.c46 svg + span {
   margin-left: 0.75rem;
 }
 
-.c53 svg {
+.c46 svg {
   max-height: 1.125rem;
 }
 
@@ -9535,9 +9626,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);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -9599,109 +9687,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   max-height: 1.125rem;
 }
 
-.c48 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c48:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c48:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c48:active,
-.c48:active:hover,
-.c48:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c48[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c48:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c48:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c48:active,
-.c48:active:hover,
-.c48:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c48 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c48 svg {
-  max-height: 1.125rem;
-}
-
 .c6 {
   font-size: 0.9375rem;
   font-style: normal;
@@ -9724,7 +9709,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   padding-bottom: 1.125rem;
 }
 
-.c44 {
+.c43 {
   margin-right: auto;
   margin-left: auto;
   box-sizing: border-box;
@@ -9787,7 +9772,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   flex: 1 1 auto;
 }
 
-.c45 {
+.c44 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -9827,7 +9812,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   padding-left: 0.5rem;
 }
 
-.c46 {
+.c45 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -9836,7 +9821,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   padding-left: 0.5rem;
 }
 
-.c51 {
+.c50 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -9852,7 +9837,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   height: 1.875rem;
 }
 
-.c43 {
+.c42 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9870,10 +9855,13 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  background-color: rgb(30,49,59);
+  background-color: rgba(241,241,241,1);
+  border-top: 0.0625rem solid rgb(216,216,216);
   max-height: 3.3125rem;
   min-height: 3.3125rem;
   line-height: 1.5625rem;
+  height: 4.375rem;
+  max-height: 4.375rem;
   position: fixed;
   left: 0;
   right: 0;
@@ -10433,32 +10421,32 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 @media only screen and (min-width:48em) {
-  .c44 {
+  .c43 {
     width: 46rem;
   }
 }
 
 @media only screen and (min-width:64em) {
-  .c44 {
+  .c43 {
     width: 61rem;
   }
 }
 
 @media only screen and (min-width:75em) {
-  .c44 {
+  .c43 {
     width: 76rem;
   }
 }
 
 @media only screen and (max-width:47.9375rem) {
-  .c44 {
+  .c43 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
   }
 }
 
 @media only screen and (min-width:0em) {
-  .c45 {
+  .c44 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -10467,7 +10455,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 @media only screen and (min-width:0em) {
-  .c45 {
+  .c44 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -10516,7 +10504,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 @media only screen and (min-width:0em) {
-  .c46 {
+  .c45 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -10526,7 +10514,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 @media only screen and (min-width:0em) {
-  .c51 {
+  .c50 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -11058,23 +11046,23 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
     </table>
   </form>
   <div
-    className="c42 c43"
+    className="c42"
   >
     <div
-      className="c44"
+      className="c43"
     >
       <div
-        className="c45"
+        className="c44"
       >
         <div
-          className="c46"
+          className="c45"
         >
           <span
             name="react-responsive-mock"
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c47 c11 c12"
+              className="c46 c11 c12"
               disabled={false}
               href=""
               icon={true}
@@ -11142,7 +11130,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c48 c11 c12"
+              className="c47 c11 c12"
               disabled={false}
               href=""
               icon={true}
@@ -11213,7 +11201,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c49 c11 c12"
+              className="c48 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -11277,7 +11265,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c50 c11 c12"
+              className="c49 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -11344,7 +11332,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c49 c11 c12"
+              className="c48 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -11392,7 +11380,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c50 c11 c12"
+              className="c49 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -11440,14 +11428,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           </span>
         </div>
         <div
-          className="c51"
+          className="c50"
         >
           <span
             name="react-responsive-mock"
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c52 c11 c12"
+              className="c51 c11 c12"
               disabled={true}
               href=""
               icon={true}
@@ -11495,7 +11483,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c53 c11 c12"
+              className="c52 c11 c12"
               disabled={true}
               href=""
               icon={true}
diff --git a/packages/my-joy-beta/src/graphql/get-account.gql b/packages/my-joy-beta/src/graphql/get-account.gql
new file mode 100644
index 00000000..e3a8723e
--- /dev/null
+++ b/packages/my-joy-beta/src/graphql/get-account.gql
@@ -0,0 +1,5 @@
+query Account {
+  account {
+    id
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index bd8a7659..8a7ef7c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7942,6 +7942,10 @@ punycode@^1.2.4, punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
+punycode@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.0.tgz#5f863edc89b96db09074bad7947bf09056ca4e7d"
+
 q-i@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/q-i/-/q-i-1.2.0.tgz#2cd2ab41784dc3c583e35c70a541d93c3fde5d4a"