diff --git a/packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap b/packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap
index fa9d74b7..6ac70953 100644
--- a/packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap
+++ b/packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap
@@ -463,20 +463,22 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }
 
 .c23:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c23 svg + span {
@@ -1679,20 +1681,22 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }
 
 .c23:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c23 svg + span {
@@ -2631,20 +2635,22 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 .c24:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c24:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c24:active,
 .c24:active:hover,
 .c24:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c24 svg + span {
@@ -3714,20 +3720,22 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 .c23:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c23 svg + span {
@@ -4700,20 +4708,22 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 .c23:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c23 svg + span {
@@ -5755,20 +5765,22 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 .c23:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c23:focus {
@@ -6736,20 +6748,22 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 .c27:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c27:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c27:active,
 .c27:active:hover,
 .c27:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c27:focus {
@@ -7892,20 +7906,22 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 .c23:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c23 svg + span {
diff --git a/packages/my-joy-beta/src/components/__tests__/__snapshots__/tags.spec.js.snap b/packages/my-joy-beta/src/components/__tests__/__snapshots__/tags.spec.js.snap
index 0bb23485..7e959b10 100644
--- a/packages/my-joy-beta/src/components/__tests__/__snapshots__/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/components/__tests__/__snapshots__/tags.spec.js.snap
@@ -328,20 +328,22 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 .c23:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c23 svg + span {
@@ -1348,20 +1350,22 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 .c23:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c23 svg + span {
diff --git a/packages/my-joy-beta/src/components/create-instance/firewall.js b/packages/my-joy-beta/src/components/create-instance/firewall.js
index 66ba74fa..374fd6ed 100644
--- a/packages/my-joy-beta/src/components/create-instance/firewall.js
+++ b/packages/my-joy-beta/src/components/create-instance/firewall.js
@@ -4,6 +4,7 @@ import { Margin, Padding } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
+import is from 'styled-is';
 
 import {
   H3,
@@ -27,6 +28,10 @@ const Box = styled.div`
   background-color: ${props => props.theme.white};
   border: ${remcalc(1)} solid ${props => props.theme.grey};
   min-width: 100%;
+
+  ${is('disabled')`
+    color: ${props => props.theme.greyDark}
+  `};
 `;
 
 const Wildcards = {
@@ -43,7 +48,11 @@ const parsePartial = (p, index) => {
     const value = Array.isArray(p[1]) ? p[1][1] : '';
     const name = Array.isArray(p[1]) ? p[1][0] : p[1];
 
-    return <Tag key={index} name={name} value={value} />;
+    return (
+      <Margin left={0.5}>
+        <Tag norMargin key={index} name={name} value={value} />
+      </Margin>
+    );
   }
 };
 
@@ -58,57 +67,57 @@ const Rule = ({ enabled, rule_obj }) => {
       <Padding left={3} right={3} top={2} bottom={2}>
         <Row>
           <Col xs={3}>
-            <Flex justifyStart alignCenter contentStretch>
+            <Flex justifyStart alignCenter contentStretch full>
               <Margin right={0.5}>
                 <FlexItem>
                   <b>From: </b>
                 </FlexItem>
               </Margin>
-              <FlexItem grow={1}>
+              <Flex alignCenter>
                 <TagList>{froms}</TagList>
-              </FlexItem>
+              </Flex>
             </Flex>
           </Col>
           <Col xs={3}>
-            <Flex justifyStart alignCenter contentStretch>
+            <Flex justifyStart alignCenter contentStretch full>
               <Margin right={0.5}>
                 <FlexItem>
                   <b>To: </b>
                 </FlexItem>
               </Margin>
-              <FlexItem grow={1}>
+              <Flex alignCenter>
                 <TagList>{tos}</TagList>
-              </FlexItem>
+              </Flex>
             </Flex>
           </Col>
           <Col xs={2}>
-            <Flex justifyStart alignCenter contentStretch>
+            <Flex justifyStart alignCenter contentStretch full>
               <Margin right={0.5}>
                 <FlexItem>
                   <b>Protocol: </b>
                 </FlexItem>
               </Margin>
-              <FlexItem grow={1}>{protocol.name}</FlexItem>
+              <Flex alignCenter>{protocol.name}</Flex>
             </Flex>
           </Col>
           <Col xs={2}>
-            <Flex justifyStart alignCenter contentStretch>
+            <Flex justifyStart alignCenter contentStretch full>
               <Margin right={0.5}>
                 <FlexItem>
                   <b>Ports: </b>
                 </FlexItem>
               </Margin>
-              <FlexItem grow={1}>{protocol.targets.join(';')}</FlexItem>
+              <Flex alignCenter>{protocol.targets.join(';')}</Flex>
             </Flex>
           </Col>
           <Col xs={2}>
-            <Flex justifyStart alignCenter contentStretch>
+            <Flex justifyStart alignCenter contentStretch full>
               <Margin right={0.5}>
                 <FlexItem>
                   <b>Action: </b>
                 </FlexItem>
               </Margin>
-              <FlexItem grow={1}>{capitalizeFirstLetter(action)}</FlexItem>
+              <Flex alignCenter>{capitalizeFirstLetter(action)}</Flex>
             </Flex>
           </Col>
         </Row>
@@ -148,7 +157,7 @@ export default ({
     ) : null}
     {enabled && !defaultRules.length ? (
       <Margin bottom={4}>
-        <Empty>Sorry, but we weren’t able to find any firewalls.</Empty>
+        <Empty>Sorry, but we weren’t able to find any firewall rules.</Empty>
       </Margin>
     ) : null}
     {enabled && tagRules.length && defaultRules.length ? (
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
index a7a0f752..f33ff414 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -331,20 +331,22 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 .c24:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c24:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c24:active,
 .c24:active:hover,
 .c24:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c24 svg + span {
@@ -1395,20 +1397,22 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 .c25:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c25 svg + span {
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
index c59a3363..9d30820d 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -531,20 +531,22 @@ exports[`renders <Summary /> without throwing 1`] = `
 }
 
 .c23:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c23:focus {
@@ -680,20 +682,22 @@ exports[`renders <Summary /> without throwing 1`] = `
 }
 
 .c24:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c24:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c24:active,
 .c24:active:hover,
 .c24:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c24:focus {
@@ -2513,20 +2517,22 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 }
 
 .c25:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c25 svg + span {
@@ -2640,20 +2646,22 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 }
 
 .c26:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c26:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c26:active,
 .c26:active:hover,
 .c26:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c26 svg + span {
@@ -4571,20 +4579,22 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 }
 
 .c25:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c25 svg + span {
@@ -4698,20 +4708,22 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 }
 
 .c26:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c26:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c26:active,
 .c26:active:hover,
 .c26:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c26 svg + span {
@@ -6475,20 +6487,22 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 }
 
 .c27:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c27:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c27:active,
 .c27:active:hover,
 .c27:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c27:focus {
@@ -6624,20 +6638,22 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 }
 
 .c28:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c28:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c28:active,
 .c28:active:hover,
 .c28:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c28:focus {
@@ -8509,20 +8525,22 @@ exports[`renders <Summary state /> without throwing 1`] = `
 }
 
 .c25:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c25 svg + span {
@@ -8636,20 +8654,22 @@ exports[`renders <Summary state /> without throwing 1`] = `
 }
 
 .c26:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c26:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c26:active,
 .c26:active:hover,
 .c26:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c26 svg + span {
@@ -10453,20 +10473,22 @@ exports[`renders <Summary state /> without throwing 2`] = `
 }
 
 .c25:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c25 svg + span {
@@ -10580,20 +10602,22 @@ exports[`renders <Summary state /> without throwing 2`] = `
 }
 
 .c26:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c26:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c26:active,
 .c26:active:hover,
 .c26:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c26 svg + span {
@@ -12190,20 +12214,22 @@ exports[`renders <Summary state /> without throwing 3`] = `
 }
 
 .c23:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c23:focus {
@@ -12339,20 +12365,22 @@ exports[`renders <Summary state /> without throwing 3`] = `
 }
 
 .c24:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c24:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c24:active,
 .c24:active:hover,
 .c24:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c24:focus {
diff --git a/packages/my-joy-beta/src/components/tags.js b/packages/my-joy-beta/src/components/tags.js
index 0d4811d0..84dd385a 100644
--- a/packages/my-joy-beta/src/components/tags.js
+++ b/packages/my-joy-beta/src/components/tags.js
@@ -12,8 +12,12 @@ export const EditForm = props => (
   <KeyValue {...props} method="edit" input="input" type="tag" expanded />
 );
 
-export default ({ name, value, onClick, onRemoveClick, active }) => (
-  <Margin right={1} bottom={1} key={`${name}-${value}`}>
+export default ({ norMargin, name, value, onClick, onRemoveClick, active }) => (
+  <Margin
+    right={norMargin ? 0 : 1}
+    bottom={norMargin ? 0 : 1}
+    key={`${name}-${value}`}
+  >
     <TagItem onClick={onClick} active={active} onRemoveClick={onRemoveClick}>
       {name ? `${name}: ${value}` : value}
     </TagItem>
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
index 8947b5e8..543455e4 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
@@ -736,20 +736,22 @@ Array [
 }
 
 .c24:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c24:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c24:active,
 .c24:active:hover,
 .c24:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c24 svg + span {
@@ -2639,20 +2641,22 @@ Array [
 }
 
 .c25:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c25 svg + span {
@@ -3737,20 +3741,22 @@ Array [
 }
 
 .c25:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c25 svg + span {
@@ -5088,20 +5094,22 @@ Array [
 }
 
 .c25:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c25 svg + span {
@@ -6186,20 +6194,22 @@ Array [
 }
 
 .c25:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c25:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c25:active,
 .c25:active:hover,
 .c25:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c25 svg + span {
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap
index 16121758..e179f72d 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap
@@ -734,20 +734,22 @@ Array [
 }
 
 .c23:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c23 svg + span {
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap
index e3184298..5f12370f 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap
@@ -476,20 +476,22 @@ Array [
 }
 
 .c23:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c23 svg + span {
@@ -1678,20 +1680,22 @@ Array [
 }
 
 .c23:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c23 svg + span {
@@ -3553,20 +3557,22 @@ Array [
 }
 
 .c23:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c23 svg + span {
@@ -4764,20 +4770,22 @@ Array [
 }
 
 .c24:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c24:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c24:active,
 .c24:active:hover,
 .c24:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c24 svg + span {
@@ -6117,20 +6125,22 @@ Array [
 }
 
 .c24:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c24:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c24:active,
 .c24:active:hover,
 .c24:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c24 svg + span {
@@ -7381,20 +7391,22 @@ Array [
 }
 
 .c23:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c23:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c23:active,
 .c23:active:hover,
 .c23:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c23 svg + span {
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 b27431fc..f3cdea07 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
@@ -4063,20 +4063,22 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 }
 
 .c50:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c50:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c50:active,
 .c50:active:hover,
 .c50:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c50:focus {
@@ -4211,20 +4213,22 @@ exports[`renders <List instances selected /> without throwing 1`] = `
 }
 
 .c51:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c51:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c51:active,
 .c51:active:hover,
 .c51:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c51:focus {
@@ -6497,20 +6501,22 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 }
 
 .c50:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c50:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c50:active,
 .c50:active:hover,
 .c50:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c50:focus {
@@ -6645,20 +6651,22 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
 }
 
 .c51:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c51:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c51:active,
 .c51:active:hover,
 .c51:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c51:focus {
@@ -8931,20 +8939,22 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 .c52:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c52:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c52:active,
 .c52:active:hover,
 .c52:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c52:focus {
@@ -9079,20 +9089,22 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 .c53:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c53:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c53:active,
 .c53:active:hover,
 .c53:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c53:focus {
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
index 28362d19..b67530ac 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -936,20 +936,22 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 .c35:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c35:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  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 {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c35 svg + span {
@@ -3693,20 +3695,22 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 .c38:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c38:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  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: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c38 svg + span {
@@ -3825,20 +3829,22 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 .c40:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c40:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c40:active,
 .c40:active:hover,
 .c40:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c40:focus {
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
index aa5a1a82..fe8fcbbd 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -1183,20 +1183,22 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 }
 
 .c26:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c26:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c26:active,
 .c26:active:hover,
 .c26:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c26 svg + span {
@@ -1310,20 +1312,22 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 }
 
 .c27:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c27:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c27:active,
 .c27:active:hover,
 .c27:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c27 svg + span {
@@ -3279,20 +3283,22 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 }
 
 .c26:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c26:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c26:active,
 .c26:active:hover,
 .c26:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c26 svg + span {
@@ -3406,20 +3412,22 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 }
 
 .c27:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c27:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c27:active,
 .c27:active:hover,
 .c27:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c27 svg + span {
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
index 7d82aa52..bad19e95 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -940,20 +940,22 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 .c35:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c35:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  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 {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c35 svg + span {
@@ -2832,20 +2834,22 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 .c35:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c35:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  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 {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c35 svg + span {
@@ -4492,20 +4496,22 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 .c35:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c35:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  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 {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 .c35:focus {
diff --git a/yarn.lock b/yarn.lock
index 6c5567c4..d80ae6de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10,6 +10,12 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@babel/helper-annotate-as-pure@^7.0.0-beta.37":
+  version "7.0.0-beta.38"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.38.tgz#888cf28a1b9094d670dbdb1be1ec550b40c2dd9c"
+  dependencies:
+    "@babel/types" "7.0.0-beta.38"
+
 "@babel/helper-function-name@7.0.0-beta.36":
   version "7.0.0-beta.36"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.36.tgz#366e3bc35147721b69009f803907c4d53212e88d"
@@ -69,6 +75,14 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@babel/types@7.0.0-beta.38":
+  version "7.0.0-beta.38"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.38.tgz#2ce2443f7dc6ad535a67db4940cbd34e64035a6f"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
 "@commitlint/cli@^4.2.1":
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-4.3.0.tgz#b0d45fb712a5b9c0daa48b07594b68c384fd4dc7"
@@ -1146,9 +1160,10 @@ babel-plugin-minify-type-constructors@^0.2.0:
     babel-helper-is-void-0 "^0.2.0"
 
 babel-plugin-styled-components@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.4.0.tgz#3a2207a1852770a383f0106ca85aded4f3e3488f"
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.5.0.tgz#4549f28a19fb05170aa9ee429b4de0eac2d2401d"
   dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0-beta.37"
     babel-types "^6.26.0"
     stylis "^3.0.0"
 
@@ -2117,8 +2132,8 @@ 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.30000793"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000793.tgz#3c00c66e423a7a1907c7dd96769a78b2afa8a72e"
+  version "1.0.30000794"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000794.tgz#bbe71104fa277ce4b362387d54905e8b88e52f35"
 
 caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000792:
   version "1.0.30000792"
@@ -2365,8 +2380,8 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.3.tgz#298d7e2231660f40c003c2ed3140decf3f53085f"
 
 cloudapi-gql@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/cloudapi-gql/-/cloudapi-gql-4.3.1.tgz#2a61310810400719aab7e3411813e3630cad6e2e"
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/cloudapi-gql/-/cloudapi-gql-4.4.0.tgz#285233dd48c92d7d760e74c4b46b11f54c1a8f00"
   dependencies:
     apr-map "^1.0.5"
     boom "^7.1.1"
@@ -2944,9 +2959,9 @@ css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
-css-initials@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/css-initials/-/css-initials-0.1.1.tgz#cc6dcdb70dc6038c6cf494dd4980f001b824a4ab"
+css-initials@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/css-initials/-/css-initials-0.2.0.tgz#14c225bd8656255a6baee07231ef82fa55aacaa3"
 
 css-loader@0.28.7:
   version "0.28.7"
@@ -3382,7 +3397,7 @@ doctrine@1.5.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-doctrine@^2.0.0, doctrine@^2.0.2:
+doctrine@^2.0.0, doctrine@^2.0.2, doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
   dependencies:
@@ -3548,8 +3563,8 @@ emotion@^8.0.12:
     stylis-rule-sheet "^0.0.5"
 
 encodeurl@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
 
 encoding@^0.1.11:
   version "0.1.12"
@@ -3904,8 +3919,8 @@ eslint@4.10.0:
     text-table "~0.2.0"
 
 eslint@^4.13.1, eslint@^4.15.0, eslint@^4.9.0:
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.15.0.tgz#89ab38c12713eec3d13afac14e4a89e75ef08145"
+  version "4.16.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.16.0.tgz#934ada9e98715e1d7bbfd6f6f0519ed2fab35cc1"
   dependencies:
     ajv "^5.3.0"
     babel-code-frame "^6.22.0"
@@ -3913,7 +3928,7 @@ eslint@^4.13.1, eslint@^4.15.0, eslint@^4.9.0:
     concat-stream "^1.6.0"
     cross-spawn "^5.1.0"
     debug "^3.1.0"
-    doctrine "^2.0.2"
+    doctrine "^2.1.0"
     eslint-scope "^3.7.1"
     eslint-visitor-keys "^1.0.0"
     espree "^3.5.2"
@@ -5702,8 +5717,8 @@ is-regexp@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
 
 is-resolvable@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.1.tgz#acca1cd36dbe44b974b924321555a70ba03b1cf4"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
 
 is-retry-allowed@^1.0.0:
   version "1.1.0"
@@ -6154,8 +6169,8 @@ joyent-react-scripts@^7.2.0:
     webpack-visualizer-plugin "^0.1.11"
 
 js-base64@^2.1.9:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.1.tgz#e02813181cd53002888e918935467acb2910e596"
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.2.tgz#1896da010ef8862f385d8887648e9b6dc4a7a2e9"
 
 js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
@@ -6302,11 +6317,11 @@ jss-global@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-3.0.0.tgz#e19e5c91ab2b96353c227e30aa2cbd938cdaafa2"
 
-jss-isolate@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/jss-isolate/-/jss-isolate-5.0.0.tgz#89069d58af0b086b4f989d9aff718733f0f7a8f7"
+jss-isolate@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/jss-isolate/-/jss-isolate-5.1.0.tgz#8eff1294c3659f86535852f4aeb79370743d890e"
   dependencies:
-    css-initials "^0.1.0"
+    css-initials "^0.2.0"
 
 jss-nested@^6.0.1:
   version "6.0.1"
@@ -6389,8 +6404,8 @@ lcid@^1.0.0:
     invert-kv "^1.0.0"
 
 lerna@^2.4.0:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/lerna/-/lerna-2.7.1.tgz#abd536376eca5e9f41a6d611da5b744534ef906f"
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/lerna/-/lerna-2.8.0.tgz#309a816fca5c73ea38f9f20e314a836e99b54cf0"
   dependencies:
     async "^1.5.0"
     chalk "^2.1.0"
@@ -6795,7 +6810,7 @@ markdown-table@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.1.tgz#4b3dd3a133d1518b8ef0dbc709bf2a1b4824bc8c"
 
-markdown-to-jsx@^6.2.2:
+markdown-to-jsx@^6.3.1:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.4.1.tgz#95fe617b5790fec6f4e0399a296e3a2f10fffaad"
   dependencies:
@@ -8102,8 +8117,8 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13:
     supports-color "^5.1.0"
 
 preact-compat@^3.17.0:
-  version "3.17.0"
-  resolved "https://registry.yarnpkg.com/preact-compat/-/preact-compat-3.17.0.tgz#528cfdfc301190c1a0f47567336be1f4be0266b3"
+  version "3.18.0"
+  resolved "https://registry.yarnpkg.com/preact-compat/-/preact-compat-3.18.0.tgz#ca430cc1f67193fb9feaf7c510832957b2ebe701"
   dependencies:
     immutability-helper "^2.1.2"
     preact-render-to-string "^3.6.0"
@@ -8255,8 +8270,8 @@ pump@^1.0.0:
     once "^1.3.1"
 
 pump@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.0.tgz#7946da1c8d622b098e2ceb2d3476582470829c9d"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
   dependencies:
     end-of-stream "^1.1.0"
     once "^1.3.1"
@@ -8677,8 +8692,8 @@ react-styled-flexboxgrid@^2.1.1:
     lodash.isinteger "^4.0.4"
 
 react-styleguidist@^6.0.33:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.1.0.tgz#08e097f75eae5f59c5bb93ee5301b9a507d729fd"
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.2.0.tgz#26376b37b11a19953a34fa80ea6ecb45b903ea4d"
   dependencies:
     ast-types "^0.10.1"
     buble "^0.18.0"
@@ -8708,14 +8723,14 @@ react-styleguidist@^6.0.33:
     jss-compose "^5.0.0"
     jss-default-unit "^8.0.0"
     jss-global "^3.0.0"
-    jss-isolate "5.0.0"
+    jss-isolate "^5.1.0"
     jss-nested "^6.0.1"
     leven "^2.1.0"
     listify "^1.0.0"
     loader-utils "^1.1.0"
     lodash "^4.17.4"
     lowercase-keys "^1.0.0"
-    markdown-to-jsx "^6.2.2"
+    markdown-to-jsx "^6.3.1"
     minimist "^1.2.0"
     ora "^1.3.0"
     prop-types "^15.6.0"
@@ -9672,8 +9687,8 @@ setprototypeof@1.1.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
 
 sha.js@^2.4.0, sha.js@^2.4.8:
-  version "2.4.9"
-  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
+  version "2.4.10"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.10.tgz#b1fde5cd7d11a5626638a07c604ab909cfa31f9b"
   dependencies:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
@@ -10634,15 +10649,15 @@ ua-parser-js@^0.7.9:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
 
 uglify-es@^3.2.1, uglify-es@^3.3.4:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.7.tgz#d1249af668666aba7cb1163e277455be9eb393cf"
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.8.tgz#f2c68e6cff0d0f9dc9577e4da207151c2e753b7e"
   dependencies:
     commander "~2.13.0"
     source-map "~0.6.1"
 
 uglify-js@3.3.x, uglify-js@^3.0.13:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.7.tgz#28463e7c7451f89061d2b235e30925bf5625e14d"
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.8.tgz#51e9a5db73afb53ac98603d08224edcd0be45fd8"
   dependencies:
     commander "~2.13.0"
     source-map "~0.6.1"
@@ -11140,8 +11155,8 @@ webpack-dev-server@2.9.4:
     yargs "^6.6.0"
 
 webpack-dev-server@^2.9.7:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.11.0.tgz#e9d4830ab7eb16c6f92ed68b92f6089027960e1b"
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.11.1.tgz#6f9358a002db8403f016e336816f4485384e5ec0"
   dependencies:
     ansi-html "0.0.7"
     array-includes "^3.0.3"
@@ -11166,7 +11181,7 @@ webpack-dev-server@^2.9.7:
     sockjs "0.3.19"
     sockjs-client "1.1.4"
     spdy "^3.4.1"
-    strip-ansi "^4.0.0"
+    strip-ansi "^3.0.0"
     supports-color "^5.1.0"
     webpack-dev-middleware "1.12.2"
     yargs "6.6.0"