diff --git a/packages/cloudapi-gql/src/schema/queries/users.js b/packages/cloudapi-gql/src/schema/queries/users.js
index 2d2b9878..14b48ff5 100644
--- a/packages/cloudapi-gql/src/schema/queries/users.js
+++ b/packages/cloudapi-gql/src/schema/queries/users.js
@@ -16,11 +16,13 @@ module.exports = {
     const { list, get } = api.users;
 
     return args.id
-      ? get(args).then(user => [user]).then(user =>
-          Object.assign(user, {
-            isUser: true
-          })
-        )
+      ? get(args)
+          .then(user => [user])
+          .then(user =>
+            Object.assign(user, {
+              isUser: true
+            })
+          )
       : list();
   }
 };
diff --git a/packages/cp-frontend/src/app.js b/packages/cp-frontend/src/app.js
index 1fcf0086..d309ccdf 100644
--- a/packages/cp-frontend/src/app.js
+++ b/packages/cp-frontend/src/app.js
@@ -17,9 +17,7 @@ class App extends Component {
   render() {
     return (
       <ApolloProvider client={client} store={store}>
-        <ThemeProvider theme={theme}>
-          {Router}
-        </ThemeProvider>
+        <ThemeProvider theme={theme}>{Router}</ThemeProvider>
       </ApolloProvider>
     );
   }
diff --git a/packages/cp-frontend/src/components/deployment-group/delete.js b/packages/cp-frontend/src/components/deployment-group/delete.js
index 6afa4dc2..286f9e47 100644
--- a/packages/cp-frontend/src/components/deployment-group/delete.js
+++ b/packages/cp-frontend/src/components/deployment-group/delete.js
@@ -6,7 +6,7 @@ const DeploymentGroupDelete = ({
   deploymentGroup,
   onCancelClick = () => {},
   onConfirmClick = () => {}
-}) =>
+}) => (
   <div>
     <ModalHeading>
       Deleting a deployment group: <br /> {deploymentGroup.name}
@@ -20,7 +20,8 @@ const DeploymentGroupDelete = ({
       Cancel
     </Button>
     <Button onClick={onConfirmClick}>Delete deployment group</Button>
-  </div>;
+  </div>
+);
 
 DeploymentGroupDelete.propTypes = {
   deploymentGroup: PropTypes.object.isRequired,
diff --git a/packages/cp-frontend/src/components/instances/empty.js b/packages/cp-frontend/src/components/instances/empty.js
index 580ce9e7..f1ea081a 100644
--- a/packages/cp-frontend/src/components/instances/empty.js
+++ b/packages/cp-frontend/src/components/instances/empty.js
@@ -3,9 +3,10 @@ import React from 'react';
 import { Col, Row } from 'react-styled-flexboxgrid';
 import { P } from 'joyent-ui-toolkit';
 
-export default () =>
+export default () => (
   <Row>
     <Col xs={12}>
       <P>You don't have any instances</P>
     </Col>
-  </Row>;
+  </Row>
+);
diff --git a/packages/cp-frontend/src/components/instances/list-item.js b/packages/cp-frontend/src/components/instances/list-item.js
index eb40a1ad..4e9cc92c 100644
--- a/packages/cp-frontend/src/components/instances/list-item.js
+++ b/packages/cp-frontend/src/components/instances/list-item.js
@@ -65,7 +65,16 @@ const StyledCard = Card.extend`
 
   background-color: ${props => props.theme.white};
 
-  ${isOr('stopping', 'stopped', 'offline', 'destroyed', 'failed', 'deleted', 'incomplete', 'unknown')`
+  ${isOr(
+    'stopping',
+    'stopped',
+    'offline',
+    'destroyed',
+    'failed',
+    'deleted',
+    'incomplete',
+    'unknown'
+  )`
     background-color: ${props => props.theme.background};
 
     & [name="card-options"] > button {
@@ -80,7 +89,6 @@ const InstanceCard = ({
   onStatusMouseOver = () => {},
   onMouseOut = () => {}
 }) => {
-
   const statusProps = STATUSES.reduce(
     (acc, name) =>
       Object.assign(acc, {
@@ -92,42 +100,34 @@ const InstanceCard = ({
   const label = (instance.healthy || 'UNKNOWN').toLowerCase();
   const icon = <HealthyIcon healthy={instance.healthy} />;
 
-  const handleHealthMouseOver = (evt) => {
+  const handleHealthMouseOver = evt => {
     onHealthMouseOver(evt, instance);
-  }
+  };
 
-  const handleStatusMouseOver = (evt) => {
+  const handleStatusMouseOver = evt => {
     onStatusMouseOver(evt, instance);
-  }
+  };
 
-  const handleMouseOut = (evt) => {
+  const handleMouseOut = evt => {
     onMouseOut(evt);
-  }
+  };
 
   return (
     <StyledCard collapsed={true} key={instance.uuid} {...statusProps}>
       <CardView>
-        <CardTitle>
-          {instance.name}
-        </CardTitle>
+        <CardTitle>{instance.name}</CardTitle>
         <CardDescription>
-          <div
-            onMouseOver={handleHealthMouseOver}
-            onMouseOut={handleMouseOut}
-          >
+          <div onMouseOver={handleHealthMouseOver} onMouseOut={handleMouseOut}>
             <CardInfo
               icon={icon}
-              iconPosition='left'
+              iconPosition="left"
               label={label}
-              color='dark'
+              color="dark"
             />
           </div>
         </CardDescription>
         <CardDescription>
-          <div
-            onMouseOver={handleStatusMouseOver}
-            onMouseOut={handleMouseOut}
-          >
+          <div onMouseOver={handleStatusMouseOver} onMouseOut={handleMouseOut}>
             <Label>
               <Dot {...statusProps} />
               {titleCase(instance.status)}
@@ -136,7 +136,7 @@ const InstanceCard = ({
         </CardDescription>
       </CardView>
     </StyledCard>
-  )
+  );
 };
 
 InstanceCard.propTypes = {
diff --git a/packages/cp-frontend/src/components/manifest/edit-or-create.js b/packages/cp-frontend/src/components/manifest/edit-or-create.js
index 6c3ad923..e5960ed2 100644
--- a/packages/cp-frontend/src/components/manifest/edit-or-create.js
+++ b/packages/cp-frontend/src/components/manifest/edit-or-create.js
@@ -143,31 +143,29 @@ class ManifestEditorBundle extends Component {
     const { ManifestEditor } = this.state;
     const { children, ...rest } = this.props;
 
-    return (
-      <ManifestEditor {...rest}>
-        {children}
-      </ManifestEditor>
-    );
+    return <ManifestEditor {...rest}>{children}</ManifestEditor>;
   }
 }
 
-const MEditor = ({ input, defaultValue, readOnly }) =>
+const MEditor = ({ input, defaultValue, readOnly }) => (
   <ManifestEditorBundle
     mode="yaml"
     {...input}
     value={input.value || defaultValue}
     readOnly={readOnly}
-  />;
+  />
+);
 
-const EEditor = ({ input, defaultValue, readOnly }) =>
+const EEditor = ({ input, defaultValue, readOnly }) => (
   <ManifestEditorBundle
     mode="ini"
     {...input}
     value={input.value || defaultValue}
     readOnly={readOnly}
-  />;
+  />
+);
 
-export const Name = ({ handleSubmit, onCancel, dirty }) =>
+export const Name = ({ handleSubmit, onCancel, dirty }) => (
   <form onSubmit={handleSubmit}>
     <Row>
       <Col xs={12} md={3} lg={3}>
@@ -185,7 +183,8 @@ export const Name = ({ handleSubmit, onCancel, dirty }) =>
         Next
       </Button>
     </ButtonsRow>
-  </form>;
+  </form>
+);
 
 export const Manifest = ({
   handleSubmit,
@@ -193,7 +192,7 @@ export const Manifest = ({
   dirty,
   defaultValue = '',
   loading
-}) =>
+}) => (
   <form onSubmit={handleSubmit}>
     <Field name="manifest" defaultValue={defaultValue} component={MEditor} />
     <ButtonsRow>
@@ -208,30 +207,31 @@ export const Manifest = ({
         Environment
       </Button>
     </ButtonsRow>
-  </form>;
+  </form>
+);
 
 const File = ({ id, name, value, onRemoveFile, readOnly }) => {
-  const removeButton = !readOnly
-    ? <FilenameRemove type="button" onClick={onRemoveFile} secondary>
-        Remove
-      </FilenameRemove>
-    : null;
+  const removeButton = !readOnly ? (
+    <FilenameRemove type="button" onClick={onRemoveFile} secondary>
+      Remove
+    </FilenameRemove>
+  ) : null;
 
-  const fileEditor = !readOnly
-    ? <Field
-        name={`file-value-${id}`}
-        defaultValue={value}
-        component={EEditor}
-      />
-    : <EEditor input={{ value }} readOnly />;
+  const fileEditor = !readOnly ? (
+    <Field name={`file-value-${id}`} defaultValue={value} component={EEditor} />
+  ) : (
+    <EEditor input={{ value }} readOnly />
+  );
 
-  const input = !readOnly
-    ? <FilenameInput type="text" placeholder="Filename including extension…" />
-    : <FilenameInput
-        type="text"
-        placeholder="Filename including extension…"
-        value={name}
-      />;
+  const input = !readOnly ? (
+    <FilenameInput type="text" placeholder="Filename including extension…" />
+  ) : (
+    <FilenameInput
+      type="text"
+      placeholder="Filename including extension…"
+      value={name}
+    />
+  );
 
   return (
     <FileCard>
@@ -247,15 +247,15 @@ const File = ({ id, name, value, onRemoveFile, readOnly }) => {
 };
 
 const Files = ({ files, onAddFile, onRemoveFile, readOnly }) => {
-  const footer = !readOnly
-    ? <Button type="button" onClick={onAddFile} secondary>
-        Create new .env file
-      </Button>
-    : null;
+  const footer = !readOnly ? (
+    <Button type="button" onClick={onAddFile} secondary>
+      Create new .env file
+    </Button>
+  ) : null;
 
   return (
     <div>
-      {files.map(({ id, ...rest }) =>
+      {files.map(({ id, ...rest }) => (
         <File
           key={id}
           id={id}
@@ -263,7 +263,7 @@ const Files = ({ files, onAddFile, onRemoveFile, readOnly }) => {
           readOnly={readOnly}
           {...rest}
         />
-      )}
+      ))}
       {footer}
     </div>
   );
@@ -280,30 +280,28 @@ export const Environment = ({
   readOnly = false,
   loading
 }) => {
-  const envEditor = !readOnly
-    ? <Field
-        name="environment"
-        defaultValue={defaultValue}
-        component={EEditor}
-      />
-    : <EEditor input={{ value: defaultValue }} readOnly />;
+  const envEditor = !readOnly ? (
+    <Field name="environment" defaultValue={defaultValue} component={EEditor} />
+  ) : (
+    <EEditor input={{ value: defaultValue }} readOnly />
+  );
 
   const footerDivider = !readOnly ? <EnvironmentDivider /> : null;
 
-  const footer = !readOnly
-    ? <ButtonsRow>
-        <Button type="button" onClick={onCancel} secondary>
-          Cancel
-        </Button>
-        <Button
-          disabled={!(dirty || !loading || defaultValue.length)}
-          loading={loading}
-          type="submit"
-        >
-          Continue
-        </Button>
-      </ButtonsRow>
-    : null;
+  const footer = !readOnly ? (
+    <ButtonsRow>
+      <Button type="button" onClick={onCancel} secondary>
+        Cancel
+      </Button>
+      <Button
+        disabled={!(dirty || !loading || defaultValue.length)}
+        loading={loading}
+        type="submit"
+      >
+        Continue
+      </Button>
+    </ButtonsRow>
+  ) : null;
 
   return (
     <form onSubmit={handleSubmit}>
@@ -348,18 +346,18 @@ export const Review = ({
   environmentToggles,
   ...state
 }) => {
-  const serviceList = forceArray(state.services).map(({ name, config }) =>
+  const serviceList = forceArray(state.services).map(({ name, config }) => (
     <ServiceCard key={name}>
-      <ServiceName>
-        {name}
-      </ServiceName>
+      <ServiceName>{name}</ServiceName>
       <Dl>
         <dt>
           <ImageTitle>Image:</ImageTitle> <Image>{config.image}</Image>
         </dt>
       </Dl>
-      {config.environment && config.environment.length ? <ServiceDivider /> : null}
-      {config.environment && config.environment.length ?
+      {config.environment && config.environment.length ? (
+        <ServiceDivider />
+      ) : null}
+      {config.environment && config.environment.length ? (
         <ServiceEnvironmentTitle
           expanded={environmentToggles[name]}
           onClick={() => onEnvironmentToggle(name)}
@@ -370,12 +368,14 @@ export const Review = ({
             up={environmentToggles[name]}
           />
         </ServiceEnvironmentTitle>
-      : null}
-      {config.environment && config.environment.length && environmentToggles[name]
-        ? <EnvironmentReview environment={config.environment} />
-        : null}
+      ) : null}
+      {config.environment &&
+      config.environment.length &&
+      environmentToggles[name] ? (
+        <EnvironmentReview environment={config.environment} />
+      ) : null}
     </ServiceCard>
-  );
+  ));
 
   return (
     <form onSubmit={handleSubmit}>
@@ -396,18 +396,18 @@ export const Progress = ({ stage, create, edit }) => {
   const _nameCompleted = stage !== 'name';
   const _nameActive = stage === 'name';
 
-  const _name = !create
-    ? null
-    : <ProgressbarItem>
-        <ProgressbarButton
-          zIndex="10"
-          completed={_nameCompleted}
-          active={_nameActive}
-          first
-        >
-          Name the group
-        </ProgressbarButton>
-      </ProgressbarItem>;
+  const _name = !create ? null : (
+    <ProgressbarItem>
+      <ProgressbarButton
+        zIndex="10"
+        completed={_nameCompleted}
+        active={_nameActive}
+        first
+      >
+        Name the group
+      </ProgressbarButton>
+    </ProgressbarItem>
+  );
 
   const _manifestCompleted = ['environment', 'review'].indexOf(stage) >= 0;
   const _manifestActive = create ? stage === 'manifest' : stage === 'edit';
diff --git a/packages/cp-frontend/src/components/messaging/error.js b/packages/cp-frontend/src/components/messaging/error.js
index 20b91be1..e4b76e5e 100644
--- a/packages/cp-frontend/src/components/messaging/error.js
+++ b/packages/cp-frontend/src/components/messaging/error.js
@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Message } from 'joyent-ui-toolkit';
 
-const ErrorMessage = ({ title, message = "Ooops, there's been an error" }) =>
-  <Message title={title} message={message} type="ERROR" />;
+const ErrorMessage = ({ title, message = "Ooops, there's been an error" }) => (
+  <Message title={title} message={message} type="ERROR" />
+);
 
 ErrorMessage.propTypes = {
   title: PropTypes.string,
diff --git a/packages/cp-frontend/src/components/messaging/loader.js b/packages/cp-frontend/src/components/messaging/loader.js
index 917cb8f3..7e4cd502 100644
--- a/packages/cp-frontend/src/components/messaging/loader.js
+++ b/packages/cp-frontend/src/components/messaging/loader.js
@@ -27,10 +27,9 @@ const Msg = P.extend`
   margin-bottom: 0;
 `;
 
-export default ({ msg }) =>
+export default ({ msg }) => (
   <Container>
     <Loader />
-    <Msg>
-      {msg || 'Loading...'}
-    </Msg>
-  </Container>;
+    <Msg>{msg || 'Loading...'}</Msg>
+  </Container>
+);
diff --git a/packages/cp-frontend/src/components/messaging/modal-error.js b/packages/cp-frontend/src/components/messaging/modal-error.js
index f2fbddcf..c7f5f0f9 100644
--- a/packages/cp-frontend/src/components/messaging/modal-error.js
+++ b/packages/cp-frontend/src/components/messaging/modal-error.js
@@ -7,13 +7,15 @@ const StyledHeading = styled(ModalHeading)`
   color: ${props => props.theme.red};
 `;
 
-const ModalErrorMessage = ({ title, message, onCloseClick }) =>
+const ModalErrorMessage = ({ title, message, onCloseClick }) => (
   <div>
     <StyledHeading>{title}</StyledHeading>
-    <ModalText marginBottom="3">{message}
-    </ModalText>
-    <Button onClick={onCloseClick} secondary>Close </Button>
-  </div>;
+    <ModalText marginBottom="3">{message}</ModalText>
+    <Button onClick={onCloseClick} secondary>
+      Close{' '}
+    </Button>
+  </div>
+);
 
 ModalErrorMessage.propTypes = {
   title: PropTypes.string,
diff --git a/packages/cp-frontend/src/components/messaging/warning.js b/packages/cp-frontend/src/components/messaging/warning.js
index b332ac50..44134de0 100644
--- a/packages/cp-frontend/src/components/messaging/warning.js
+++ b/packages/cp-frontend/src/components/messaging/warning.js
@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Message } from 'joyent-ui-toolkit';
 
-const WarningMessage = ({ title, message }) =>
-  <Message title={title} message={message} type="WARNING" />;
+const WarningMessage = ({ title, message }) => (
+  <Message title={title} message={message} type="WARNING" />
+);
 
 WarningMessage.propTypes = {
   title: PropTypes.string,
diff --git a/packages/cp-frontend/src/components/navigation/breadcrumb.js b/packages/cp-frontend/src/components/navigation/breadcrumb.js
index e5f2807f..4781fcab 100644
--- a/packages/cp-frontend/src/components/navigation/breadcrumb.js
+++ b/packages/cp-frontend/src/components/navigation/breadcrumb.js
@@ -24,27 +24,22 @@ const BreadcrumbContainer = styled.div`
 const getBreadcrumbItems = (...links) =>
   forceArray(links).map(({ pathname, name }, i) => {
     const item =
-      i + 1 >= links.length
-        ? name
-        : <BreadcrumbLink to={pathname}>
-            {name}
-          </BreadcrumbLink>;
+      i + 1 >= links.length ? (
+        name
+      ) : (
+        <BreadcrumbLink to={pathname}>{name}</BreadcrumbLink>
+      );
 
-    return (
-      <BreadcrumbItem key={name}>
-        {item}
-      </BreadcrumbItem>
-    );
+    return <BreadcrumbItem key={name}>{item}</BreadcrumbItem>;
   });
 
-const NavBreadcrumb = ({ links = [] }) =>
+const NavBreadcrumb = ({ links = [] }) => (
   <BreadcrumbContainer>
     <Grid>
-      <Breadcrumb>
-        {getBreadcrumbItems(...links)}
-      </Breadcrumb>
+      <Breadcrumb>{getBreadcrumbItems(...links)}</Breadcrumb>
     </Grid>
-  </BreadcrumbContainer>;
+  </BreadcrumbContainer>
+);
 
 NavBreadcrumb.propTypes = {
   links: PropTypes.arrayOf(
diff --git a/packages/cp-frontend/src/components/navigation/header.js b/packages/cp-frontend/src/components/navigation/header.js
index fdf81a7e..ef46d6d4 100644
--- a/packages/cp-frontend/src/components/navigation/header.js
+++ b/packages/cp-frontend/src/components/navigation/header.js
@@ -12,20 +12,17 @@ const StyledLogo = Img.extend`
   height: ${remcalc(25)};
 `;
 
-const NavHeader = ({ datacenter, username }) =>
+const NavHeader = ({ datacenter, username }) => (
   <Header>
     <HeaderBrand>
       <Link to="/">
         <StyledLogo src={Logo} />
       </Link>
     </HeaderBrand>
-    <HeaderItem>
-      {datacenter}
-    </HeaderItem>
-    <HeaderItem>
-      {username}
-    </HeaderItem>
-  </Header>;
+    <HeaderItem>{datacenter}</HeaderItem>
+    <HeaderItem>{username}</HeaderItem>
+  </Header>
+);
 
 NavHeader.propTypes = {
   datacenter: PropTypes.string,
diff --git a/packages/cp-frontend/src/components/navigation/menu.js b/packages/cp-frontend/src/components/navigation/menu.js
index f4e8e540..27bed5b0 100644
--- a/packages/cp-frontend/src/components/navigation/menu.js
+++ b/packages/cp-frontend/src/components/navigation/menu.js
@@ -11,20 +11,19 @@ import {
 } from 'joyent-ui-toolkit';
 
 const getMenuItems = (...links) =>
-  forceArray(links).map(({ pathname, name }) =>
+  forceArray(links).map(({ pathname, name }) => (
     <SectionListItem key={pathname}>
       <SectionListNavLink activeClassName="active" to={pathname}>
         {name}
       </SectionListNavLink>
     </SectionListItem>
-  );
+  ));
 
-const Menu = ({ links = [] }) =>
+const Menu = ({ links = [] }) => (
   <LayoutContainer plain>
-    <SectionList>
-      {getMenuItems(...links)}
-    </SectionList>
-  </LayoutContainer>;
+    <SectionList>{getMenuItems(...links)}</SectionList>
+  </LayoutContainer>
+);
 
 Menu.propTypes = {
   links: PropTypes.arrayOf(
diff --git a/packages/cp-frontend/src/components/navigation/not-found.js b/packages/cp-frontend/src/components/navigation/not-found.js
index 261e6a3c..ecb81d3a 100644
--- a/packages/cp-frontend/src/components/navigation/not-found.js
+++ b/packages/cp-frontend/src/components/navigation/not-found.js
@@ -39,6 +39,6 @@ NotFound.propTypes = {
   message: PropTypes.string,
   link: PropTypes.string,
   to: PropTypes.string
-}
+};
 
 export default NotFound;
diff --git a/packages/cp-frontend/src/components/service/delete.js b/packages/cp-frontend/src/components/service/delete.js
index ed54829a..1fc75858 100644
--- a/packages/cp-frontend/src/components/service/delete.js
+++ b/packages/cp-frontend/src/components/service/delete.js
@@ -6,7 +6,7 @@ const ServiceDelete = ({
   service,
   onCancelClick = () => {},
   onConfirmClick = () => {}
-}) =>
+}) => (
   <div>
     <ModalHeading>
       Deleting a service: <br /> {service.name}
@@ -19,7 +19,8 @@ const ServiceDelete = ({
       Cancel
     </Button>
     <Button onClick={onConfirmClick}>Delete service</Button>
-  </div>;
+  </div>
+);
 
 ServiceDelete.propTypes = {
   service: PropTypes.object.isRequired,
diff --git a/packages/cp-frontend/src/components/service/index.js b/packages/cp-frontend/src/components/service/index.js
index c0aed185..030c1f8f 100644
--- a/packages/cp-frontend/src/components/service/index.js
+++ b/packages/cp-frontend/src/components/service/index.js
@@ -1,3 +1,3 @@
 export { default as ServiceScale } from './scale';
 export { default as ServiceDelete } from './delete';
-export { default as ServiceMetrics} from './metrics';
+export { default as ServiceMetrics } from './metrics';
diff --git a/packages/cp-frontend/src/components/service/metrics.js b/packages/cp-frontend/src/components/service/metrics.js
index e9ee275f..3b3e2a6d 100644
--- a/packages/cp-frontend/src/components/service/metrics.js
+++ b/packages/cp-frontend/src/components/service/metrics.js
@@ -2,13 +2,9 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { MetricGraph } from 'joyent-ui-toolkit';
 
-const ServiceMetrics = ({
-  metricsData,
-  graphDurationSeconds
-}) => {
-
+const ServiceMetrics = ({ metricsData, graphDurationSeconds }) => {
   // metricsData should prob be an array rather than an object
-  const metricGraphs = Object.keys(metricsData).map((key) => (
+  const metricGraphs = Object.keys(metricsData).map(key => (
     // should also have a header, w metric name and number of instances (omit everything else from design for copilot)
     <MetricGraph
       key={key}
@@ -17,19 +13,15 @@ const ServiceMetrics = ({
       height={292}
       graphDurationSeconds={graphDurationSeconds}
     />
-  ))
+  ));
   // This needs layout!!!
-  return (
-    <div>
-      {metricGraphs}
-    </div>
-  )
-}
+  return <div>{metricGraphs}</div>;
+};
 
 ServiceMetrics.propTypes = {
   // metricsData should prob be an array rather than an object
   metricsData: PropTypes.object.isRequired,
   graphDurationSeconds: PropTypes.number.isRequired
-}
+};
 
 export default ServiceMetrics;
diff --git a/packages/cp-frontend/src/components/service/scale.js b/packages/cp-frontend/src/components/service/scale.js
index ce64ddfe..6abb8826 100644
--- a/packages/cp-frontend/src/components/service/scale.js
+++ b/packages/cp-frontend/src/components/service/scale.js
@@ -15,7 +15,7 @@ const ServiceScale = ({
   onCancelClick = () => {},
   invalid,
   pristine
-}) =>
+}) => (
   <form onSubmit={handleSubmit}>
     <ModalHeading>
       Scaling a service: <br />
@@ -38,7 +38,8 @@ const ServiceScale = ({
     <Button type="submit" disabled={pristine || invalid} secondary>
       Scale
     </Button>
-  </form>;
+  </form>
+);
 
 ServiceScale.propTypes = {
   service: PropTypes.object.isRequired,
diff --git a/packages/cp-frontend/src/components/services/empty.js b/packages/cp-frontend/src/components/services/empty.js
index 30d31ef0..00efc555 100644
--- a/packages/cp-frontend/src/components/services/empty.js
+++ b/packages/cp-frontend/src/components/services/empty.js
@@ -16,7 +16,7 @@ const StyledBox = styled.div`
   }
 `;
 
-export default () =>
+export default () => (
   <LayoutContainer>
     <Row>
       <Col>
@@ -56,4 +56,5 @@ export default () =>
         </Row>
       </Col>
     </Row>
-  </LayoutContainer>;
+  </LayoutContainer>
+);
diff --git a/packages/cp-frontend/src/components/services/list-item.js b/packages/cp-frontend/src/components/services/list-item.js
index dc3a0244..67bbe9d2 100644
--- a/packages/cp-frontend/src/components/services/list-item.js
+++ b/packages/cp-frontend/src/components/services/list-item.js
@@ -57,27 +57,27 @@ const ServiceListItem = ({
     : service.instances.length;
 
   const childrenItems = children.length
-    ? children.map(service =>
-      <ServiceListItem
-        key={service.id}
-        deploymentGroup={deploymentGroup}
-        service={service}
-        isChild
-      />
-    ) : null;
+    ? children.map(service => (
+        <ServiceListItem
+          key={service.id}
+          deploymentGroup={deploymentGroup}
+          service={service}
+          isChild
+        />
+      ))
+    : null;
 
-
-  const title = isChild
-    ? <CardTitle>
-        {service.name}
-      </CardTitle>
-    : <CardTitle>
-        <TitleInnerContainer>
-          <StyledAnchor to={to} secondary active={service.instancesActive}>
-            {service.name}
-          </StyledAnchor>
-        </TitleInnerContainer>
-      </CardTitle>;
+  const title = isChild ? (
+    <CardTitle>{service.name}</CardTitle>
+  ) : (
+    <CardTitle>
+      <TitleInnerContainer>
+        <StyledAnchor to={to} secondary active={service.instancesActive}>
+          {service.name}
+        </StyledAnchor>
+      </TitleInnerContainer>
+    </CardTitle>
+  );
 
   const subtitle = (
     <CardSubTitle>
@@ -86,52 +86,47 @@ const ServiceListItem = ({
     </CardSubTitle>
   );
 
-  const header = !isChild
-    ? <StyledCardHeader>
-        {title}
-        <CardDescription>
-          <CardInfo
-            icon={<InstancesIcon />}
-            iconPosition="left"
-            label={`${instancesCount} ${instancesCount > 1
-              ? 'instances'
-              : 'instance'}`}
-            color={!service.instancesActive ? 'disabled' : 'light'}
-          />
-        </CardDescription>
-        <CardOptions onClick={handleCardOptionsClick} />
-      </StyledCardHeader>
-    : null;
+  const header = !isChild ? (
+    <StyledCardHeader>
+      {title}
+      <CardDescription>
+        <CardInfo
+          icon={<InstancesIcon />}
+          iconPosition="left"
+          label={`${instancesCount} ${instancesCount > 1
+            ? 'instances'
+            : 'instance'}`}
+          color={!service.instancesActive ? 'disabled' : 'light'}
+        />
+      </CardDescription>
+      <CardOptions onClick={handleCardOptionsClick} />
+    </StyledCardHeader>
+  ) : null;
 
   let healthyInfo = null;
-  if(service.instancesActive) {
+  if (service.instancesActive) {
     const { total, healthy } = service.instancesHealthy;
     const iconHealthy = total === healthy ? 'HEALTHY' : 'NOT HEALTHY';
     const icon = <HealthyIcon healthy={iconHealthy} />;
     const label = `${healthy} of ${total} healthy`;
 
     healthyInfo = (
-      <CardInfo
-        icon={icon}
-        iconPosition='left'
-        label={label}
-        color='dark'
-      />
-    )
+      <CardInfo icon={icon} iconPosition="left" label={label} color="dark" />
+    );
   }
 
-  const view = children.length
-    ? <CardGroupView>
-        {childrenItems}
-      </CardGroupView>
-    : <CardView>
-        {isChild && title}
-        {isChild && subtitle}
-        <CardDescription>
-          <Status service={service} />
-          {healthyInfo}
-        </CardDescription>
-      </CardView>;
+  const view = children.length ? (
+    <CardGroupView>{childrenItems}</CardGroupView>
+  ) : (
+    <CardView>
+      {isChild && title}
+      {isChild && subtitle}
+      <CardDescription>
+        <Status service={service} />
+        {healthyInfo}
+      </CardDescription>
+    </CardView>
+  );
 
   return (
     <Card
diff --git a/packages/cp-frontend/src/components/services/quick-actions.js b/packages/cp-frontend/src/components/services/quick-actions.js
index d79fb678..de66ecae 100644
--- a/packages/cp-frontend/src/components/services/quick-actions.js
+++ b/packages/cp-frontend/src/components/services/quick-actions.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Tooltip, TooltipButton, TooltipDivider, TooltipList } from 'joyent-ui-toolkit';
+import {
+  Tooltip,
+  TooltipButton,
+  TooltipDivider,
+  TooltipList
+} from 'joyent-ui-toolkit';
 
 const ServicesQuickActions = ({
   show,
@@ -11,7 +16,7 @@ const ServicesQuickActions = ({
   onStopClick = () => {},
   onStartClick = () => {},
   onScaleClick = () => {},
-  onDeleteClick = () => {},
+  onDeleteClick = () => {}
 }) => {
   if (!show) {
     return null;
@@ -46,22 +51,22 @@ const ServicesQuickActions = ({
   }, null);
 
   const startService =
-    status === 'RUNNING'
-      ? null
-      : <li>
-          <TooltipButton onClick={handleStartClick} disabled={disabled}>
-            Start
-          </TooltipButton>
-        </li>;
+    status === 'RUNNING' ? null : (
+      <li>
+        <TooltipButton onClick={handleStartClick} disabled={disabled}>
+          Start
+        </TooltipButton>
+      </li>
+    );
 
   const stopService =
-    status === 'STOPPED'
-      ? null
-      : <li>
-          <TooltipButton onClick={handleStopClick} disabled={disabled}>
-            Stop
-          </TooltipButton>
-        </li>;
+    status === 'STOPPED' ? null : (
+      <li>
+        <TooltipButton onClick={handleStopClick} disabled={disabled}>
+          Stop
+        </TooltipButton>
+      </li>
+    );
 
   return (
     <Tooltip {...position} onBlur={onBlur}>
diff --git a/packages/cp-frontend/src/components/services/status.js b/packages/cp-frontend/src/components/services/status.js
index 7cff2c9c..8de95345 100644
--- a/packages/cp-frontend/src/components/services/status.js
+++ b/packages/cp-frontend/src/components/services/status.js
@@ -37,16 +37,18 @@ const ServiceStatus = ({ service }) => {
       );
     });
 
-  return service.transitionalStatus
-    ? <StyledStatusContainer>
-        <StatusLoader />
-        <StyledTransitionalStatus>
-          {service.status ? service.status.toLowerCase() : ''}
-        </StyledTransitionalStatus>
-      </StyledStatusContainer>
-    : <StyledStatusContainer>
-        {getInstanceStatuses(service.instanceStatuses)}
-      </StyledStatusContainer>;
+  return service.transitionalStatus ? (
+    <StyledStatusContainer>
+      <StatusLoader />
+      <StyledTransitionalStatus>
+        {service.status ? service.status.toLowerCase() : ''}
+      </StyledTransitionalStatus>
+    </StyledStatusContainer>
+  ) : (
+    <StyledStatusContainer>
+      {getInstanceStatuses(service.instanceStatuses)}
+    </StyledStatusContainer>
+  );
 };
 
 ServiceStatus.propTypes = {
diff --git a/packages/cp-frontend/src/containers/deployment-group/delete.js b/packages/cp-frontend/src/containers/deployment-group/delete.js
index 0d1a1b2b..0251e533 100644
--- a/packages/cp-frontend/src/containers/deployment-group/delete.js
+++ b/packages/cp-frontend/src/containers/deployment-group/delete.js
@@ -5,7 +5,7 @@ import DeploymentGroupDeleteMutation from '@graphql/DeploymentGroupDeleteMutatio
 import DeploymentGroupQuery from '@graphql/DeploymentGroup.gql';
 import { Loader, ModalErrorMessage } from '@components/messaging';
 import { DeploymentGroupDelete as DeploymentGroupDeleteComponent } from '@components/deployment-group';
-import { Modal } from 'joyent-ui-toolkit'
+import { Modal } from 'joyent-ui-toolkit';
 import { withNotFound, GqlPaths } from '@containers/navigation';
 
 export class DeploymentGroupDelete extends Component {
@@ -21,7 +21,10 @@ export class DeploymentGroupDelete extends Component {
     const { history, match, loading, error } = this.props;
 
     const handleCloseClick = evt => {
-      const closeUrl = match.url.split('/').slice(0, -2).join('/');
+      const closeUrl = match.url
+        .split('/')
+        .slice(0, -2)
+        .join('/');
       history.replace(closeUrl);
     };
 
@@ -37,24 +40,21 @@ export class DeploymentGroupDelete extends Component {
       return (
         <Modal width={460} onCloseClick={handleCloseClick}>
           <ModalErrorMessage
-            title='Ooops!'
-            message='An error occurred while loading your deployment group.'
+            title="Ooops!"
+            message="An error occurred while loading your deployment group."
             onCloseClick={handleCloseClick}
           />
         </Modal>
       );
     }
 
-    const {
-      deploymentGroup,
-      deleteDeploymentGroup
-    } = this.props;
+    const { deploymentGroup, deleteDeploymentGroup } = this.props;
 
     if (this.state.error) {
       return (
         <Modal width={460} onCloseClick={handleCloseClick}>
           <ModalErrorMessage
-            title='Ooops!'
+            title="Ooops!"
             message={`An error occurred while attempting to delete the ${deploymentGroup.name} deployment group.`}
             onCloseClick={handleCloseClick}
           />
@@ -117,7 +117,7 @@ const DeploymentGroupGql = graphql(DeploymentGroupQuery, {
 const DeploymentGroupDeleteWithData = compose(
   DeleteDeploymentGroupGql,
   DeploymentGroupGql,
-  withNotFound([ GqlPaths.DEPLOYMENT_GROUP ])
+  withNotFound([GqlPaths.DEPLOYMENT_GROUP])
 )(DeploymentGroupDelete);
 
 export default DeploymentGroupDeleteWithData;
diff --git a/packages/cp-frontend/src/containers/deployment-groups/create.js b/packages/cp-frontend/src/containers/deployment-groups/create.js
index 894f8985..2c316d9b 100644
--- a/packages/cp-frontend/src/containers/deployment-groups/create.js
+++ b/packages/cp-frontend/src/containers/deployment-groups/create.js
@@ -5,9 +5,10 @@ import { Progress } from '@components/manifest/edit-or-create';
 import { LayoutContainer } from '@components/layout';
 import { Title } from '@components/navigation';
 
-export default ({ match }) =>
+export default ({ match }) => (
   <LayoutContainer>
     <Title>Creating deployment group</Title>
     <Progress stage={match.params.stage} create />
     <ManifestEditOrCreate create />
-  </LayoutContainer>;
+  </LayoutContainer>
+);
diff --git a/packages/cp-frontend/src/containers/deployment-groups/list.js b/packages/cp-frontend/src/containers/deployment-groups/list.js
index 140e8a7c..09f53134 100644
--- a/packages/cp-frontend/src/containers/deployment-groups/list.js
+++ b/packages/cp-frontend/src/containers/deployment-groups/list.js
@@ -140,20 +140,18 @@ export const DeploymentGroupList = ({
     );
   }
 
-  const groups = forceArray(deploymentGroups).map(({ slug, name }) =>
+  const groups = forceArray(deploymentGroups).map(({ slug, name }) => (
     <Col xs={12} sm={4} md={3} lg={3} key={slug}>
       <Box>
         <StyledLink to={`${match.path}/${slug}`}>
-          <ServiceTitle>
-            {name}
-          </ServiceTitle>
+          <ServiceTitle>{name}</ServiceTitle>
         </StyledLink>
         <StyledIconButton to={`${match.url}/${slug}/delete`}>
           <BinIcon />
         </StyledIconButton>
       </Box>
     </Col>
-  );
+  ));
 
   const create = [
     <Col xs={12} sm={4} md={3} lg={3} key="~create">
@@ -165,18 +163,16 @@ export const DeploymentGroupList = ({
       </BoxCreate>
     </Col>
   ].concat(
-    forceArray(importable).map(({ slug, name }) =>
+    forceArray(importable).map(({ slug, name }) => (
       <Col xs={12} sm={4} md={3} lg={3} key={slug}>
         <BoxCreate>
           <StyledCreateLink to={`${match.path}/~import/${slug}`}>
             <Oval>&#10549;</Oval>
-            <CreateTitle>
-              {name}
-            </CreateTitle>
+            <CreateTitle>{name}</CreateTitle>
           </StyledCreateLink>
         </BoxCreate>
       </Col>
-    )
+    ))
   );
 
   return (
@@ -218,5 +214,5 @@ export default compose(
       importable: importableDeploymentGroups
     })
   }),
-  withNotFound([ GqlPaths.DEPLOYMENT_GROUP ])
+  withNotFound([GqlPaths.DEPLOYMENT_GROUP])
 )(DeploymentGroupList);
diff --git a/packages/cp-frontend/src/containers/instances/list.js b/packages/cp-frontend/src/containers/instances/list.js
index a3054995..3d42c637 100644
--- a/packages/cp-frontend/src/containers/instances/list.js
+++ b/packages/cp-frontend/src/containers/instances/list.js
@@ -20,7 +20,6 @@ export const InstanceList = ({
   instancesTooltip,
   toggleInstancesTooltip
 }) => {
-
   const _title = <Title>Instances</Title>;
 
   if (loading && !forceArray(instances).length) {
@@ -62,15 +61,12 @@ export const InstanceList = ({
   };
 
   const handleMouseOver = (evt, instance, type) => {
-
     const label = evt.currentTarget;
     const labelRect = label.getBoundingClientRect();
-    const offset = type === 'healthy'
-      ? 48 : type === 'status' ? 36 : 0;
+    const offset = type === 'healthy' ? 48 : type === 'status' ? 36 : 0;
 
     const position = {
-      left:
-        `${window.scrollX + labelRect.left + offset}px`,
+      left: `${window.scrollX + labelRect.left + offset}px`,
       top: `${window.scrollY + labelRect.bottom}px`
     };
 
@@ -78,16 +74,16 @@ export const InstanceList = ({
       instance,
       position,
       type
-    }
+    };
 
     toggleInstancesTooltip(tooltipData);
   };
 
-  const handleMouseOut = (evt) => {
+  const handleMouseOut = evt => {
     toggleInstancesTooltip({ show: false });
   };
 
-  const instanceList = instances.map((instance, index) =>
+  const instanceList = instances.map((instance, index) => (
     <InstanceListItem
       instance={instance}
       key={instance.id}
@@ -95,7 +91,7 @@ export const InstanceList = ({
       onStatusMouseOver={handleStatusMouseOver}
       onMouseOut={handleMouseOut}
     />
-  );
+  ));
 
   const _instances = !instanceList.length ? <EmptyInstances /> : instanceList;
 
@@ -105,7 +101,7 @@ export const InstanceList = ({
       {_instances}
     </LayoutContainer>
   );
-}
+};
 
 const mapStateToProps = (state, ownProps) => ({
   instancesTooltip: state.ui.instances.tooltip
@@ -131,7 +127,7 @@ const InstanceListGql = graphql(InstancesQuery, {
       }
     };
   },
-  props: ({ data: { deploymentGroup, loading, error }}) => ({
+  props: ({ data: { deploymentGroup, loading, error } }) => ({
     deploymentGroup,
     instances: sortBy(
       forceArray(
@@ -151,8 +147,5 @@ const InstanceListGql = graphql(InstancesQuery, {
 export default compose(
   UiConnect,
   InstanceListGql,
-  withNotFound([
-    GqlPaths.DEPLOYMENT_GROUP,
-    GqlPaths.SERVICES
-  ])
+  withNotFound([GqlPaths.DEPLOYMENT_GROUP, GqlPaths.SERVICES])
 )(InstanceList);
diff --git a/packages/cp-frontend/src/containers/instances/tooltip.js b/packages/cp-frontend/src/containers/instances/tooltip.js
index 9d9cca24..728a2597 100644
--- a/packages/cp-frontend/src/containers/instances/tooltip.js
+++ b/packages/cp-frontend/src/containers/instances/tooltip.js
@@ -12,37 +12,34 @@ const StyledContainer = styled.div`
 const healthMessages = {
   healthy: 'Your instance is operating as expected',
   unhealthy: 'Your instance is not operating as expected',
-  maintenance: 'You\'ve set your instance to this manually, use the Container Pilot CLI to change',
-  unknown: 'We\'ve connected to your instance but we have no health information',
-  unavailable: 'We cannot connect to your instance',
+  maintenance:
+    "You've set your instance to this manually, use the Container Pilot CLI to change",
+  unknown: "We've connected to your instance but we have no health information",
+  unavailable: 'We cannot connect to your instance'
 };
 
 const statusMessages = {
   running: 'Your instance is operating',
   provisioning: 'Your instance is downloading dependencies and compiling',
-  ready: 'Your instance finished provisioning and is ready to be run, it\'ll be running soon',
+  ready:
+    "Your instance finished provisioning and is ready to be run, it'll be running soon",
   stopping: 'Your instance is going to be stopped soon',
-  stopped: 'Your instance isn\'t doing anything, you can start it',
+  stopped: "Your instance isn't doing anything, you can start it",
   offline: 'We have no idea what this means, do you??????',
   failed: 'Your instance has crashed',
-  unknown: 'We cannot work out what status your instance is in',
+  unknown: 'We cannot work out what status your instance is in'
 };
 
-export const InstancesTooltip = ({
-  instancesTooltip
-}) => {
+export const InstancesTooltip = ({ instancesTooltip }) => {
+  if (instancesTooltip.show) {
+    const { type, instance } = instancesTooltip;
 
-  if(instancesTooltip.show) {
-    const {
-      type,
-      instance
-    } = instancesTooltip;
-
-    const message = type === 'healthy'
-      ? healthMessages[instance.healthy.toLowerCase()]
-      : type === 'status'
-      ? statusMessages[instance.status.toLowerCase()]
-      : '';
+    const message =
+      type === 'healthy'
+        ? healthMessages[instance.healthy.toLowerCase()]
+        : type === 'status'
+          ? statusMessages[instance.status.toLowerCase()]
+          : '';
 
     return (
       <StyledContainer>
@@ -50,7 +47,7 @@ export const InstancesTooltip = ({
           <TooltipLabel>{message}</TooltipLabel>
         </Tooltip>
       </StyledContainer>
-    )
+    );
   }
 
   return null;
diff --git a/packages/cp-frontend/src/containers/manifest/edit-or-create.js b/packages/cp-frontend/src/containers/manifest/edit-or-create.js
index 4b05ee7d..ac0d6c31 100644
--- a/packages/cp-frontend/src/containers/manifest/edit-or-create.js
+++ b/packages/cp-frontend/src/containers/manifest/edit-or-create.js
@@ -175,7 +175,9 @@ class DeploymentGroupEditOrCreate extends Component {
       name.replace(/^\$/, '')
     );
 
-    const vars = uniq(names).map(name => `\n${name}=`).join('');
+    const vars = uniq(names)
+      .map(name => `\n${name}=`)
+      .join('');
 
     return `# define your interpolatable variables here\n${vars}`;
   }
diff --git a/packages/cp-frontend/src/containers/manifest/index.js b/packages/cp-frontend/src/containers/manifest/index.js
index 8fefcb27..d34a8051 100644
--- a/packages/cp-frontend/src/containers/manifest/index.js
+++ b/packages/cp-frontend/src/containers/manifest/index.js
@@ -47,12 +47,12 @@ const Manifest = ({
   }
 
   const _notice =
-    deploymentGroup && deploymentGroup.imported && !manifest
-      ? <WarningMessage
-          title="Be aware"
-          message="Since this Deployment Group was imported, it doesn&#x27;t have the initial manifest."
-        />
-      : null;
+    deploymentGroup && deploymentGroup.imported && !manifest ? (
+      <WarningMessage
+        title="Be aware"
+        message="Since this Deployment Group was imported, it doesn&#x27;t have the initial manifest."
+      />
+    ) : null;
 
   return (
     <LayoutContainer>
diff --git a/packages/cp-frontend/src/containers/metrics/metrics-data-hoc.js b/packages/cp-frontend/src/containers/metrics/metrics-data-hoc.js
index 89a0f77b..73ae5e2b 100644
--- a/packages/cp-frontend/src/containers/metrics/metrics-data-hoc.js
+++ b/packages/cp-frontend/src/containers/metrics/metrics-data-hoc.js
@@ -11,25 +11,16 @@ export const MetricNames = [
 export const withServiceMetricsPolling = ({
   pollingInterval = 1000 // in milliseconds
 }) => {
-  return (WrappedComponent) => {
-
+  return WrappedComponent => {
     return class extends Component {
-
       componentDidMount() {
-
         this._poll = setInterval(() => {
-          const {
-            loading,
-            error,
-            service,
-            fetchMoreMetrics
-          } = this.props;
+          const { loading, error, service, fetchMoreMetrics } = this.props;
 
-          if(!loading && !error && service) {
+          if (!loading && !error && service) {
             const previousEnd = service.instances[0].metrics[0].end;
             fetchMoreMetrics(previousEnd);
           }
-
         }, pollingInterval); // TODO this is the polling interval - think about amount is the todo I guess...
       }
 
@@ -38,24 +29,28 @@ export const withServiceMetricsPolling = ({
       }
 
       render() {
-        return <WrappedComponent {...this.props} />
+        return <WrappedComponent {...this.props} />;
       }
-    }
-  }
-}
+    };
+  };
+};
 
 export const withServiceMetricsGql = ({
   gqlQuery,
   graphDurationSeconds,
   updateIntervalSeconds
 }) => {
-
-  const getPreviousMetrics = (previousResult, serviceId, instanceId, metricName) => {
+  const getPreviousMetrics = (
+    previousResult,
+    serviceId,
+    instanceId,
+    metricName
+  ) => {
     return previousResult.deploymentGroup.services
-      .find(s => s.id === serviceId).instances
-      .find(i => i.id === instanceId).metrics
-      .find(m => m.name === metricName).metrics;
-  }
+      .find(s => s.id === serviceId)
+      .instances.find(i => i.id === instanceId)
+      .metrics.find(m => m.name === metricName).metrics;
+  };
 
   const getNextResult = (previousResult, fetchNextResult) => {
     const deploymentGroup = fetchNextResult.deploymentGroup;
@@ -69,18 +64,18 @@ export const withServiceMetricsGql = ({
             metrics: instance.metrics.map(metric => ({
               ...metric,
               metrics: getPreviousMetrics(
-                  previousResult,
-                  service.id,
-                  instance.id,
-                  metric.name
-                ).concat(metric.metrics)
+                previousResult,
+                service.id,
+                instance.id,
+                metric.name
+              ).concat(metric.metrics)
             }))
           }))
         }))
       }
-    }
+    };
     return nextResult;
-  }
+  };
 
   return graphql(gqlQuery, {
     options(props) {
@@ -90,7 +85,10 @@ export const withServiceMetricsGql = ({
 
       // this is potentially prone to overfetching if we already have data within timeframe and we leave the page then come back to it
       const end = moment();
-      const start = moment(end).subtract(graphDurationSeconds + updateIntervalSeconds, 'seconds'); // TODO initial amount of data we wanna get - should be the same as what we display + 15 secs
+      const start = moment(end).subtract(
+        graphDurationSeconds + updateIntervalSeconds,
+        'seconds'
+      ); // TODO initial amount of data we wanna get - should be the same as what we display + 15 secs
 
       return {
         variables: {
@@ -102,27 +100,34 @@ export const withServiceMetricsGql = ({
         }
       };
     },
-    props: ({ data: { deploymentGroup, loading, error, variables, fetchMore }}) => {
-
-      const fetchMoreMetrics = (previousEnd) => {
+    props: ({
+      data: { deploymentGroup, loading, error, variables, fetchMore }
+    }) => {
+      const fetchMoreMetrics = previousEnd => {
         fetchMore({
           variables: {
             ...variables,
             start: previousEnd,
-            end: moment().utc().format()
+            end: moment()
+              .utc()
+              .format()
           },
-          updateQuery: (previousResult, { fetchMoreResult, queryVariables }) => {
+          updateQuery: (
+            previousResult,
+            { fetchMoreResult, queryVariables }
+          ) => {
             return getNextResult(previousResult, fetchMoreResult);
           }
         });
-      }
-      return ({
+      };
+      return {
         deploymentGroup,
-        service: !loading && deploymentGroup ? deploymentGroup.services[0] : null,
+        service:
+          !loading && deploymentGroup ? deploymentGroup.services[0] : null,
         loading,
         error,
         fetchMoreMetrics
-      })
+      };
     }
   });
-}
+};
diff --git a/packages/cp-frontend/src/containers/navigation/breadcrumb.js b/packages/cp-frontend/src/containers/navigation/breadcrumb.js
index c5e32330..4f67b719 100644
--- a/packages/cp-frontend/src/containers/navigation/breadcrumb.js
+++ b/packages/cp-frontend/src/containers/navigation/breadcrumb.js
@@ -9,8 +9,11 @@ import {
   serviceBySlugSelector
 } from '@root/state/selectors';
 
-export const Breadcrumb = ({ deploymentGroup, service, location: { pathname }}) => {
-
+export const Breadcrumb = ({
+  deploymentGroup,
+  service,
+  location: { pathname }
+}) => {
   const path = pathname.split('/');
 
   const links = [
@@ -41,7 +44,7 @@ Breadcrumb.propTypes = {
   deploymentGroup: PropTypes.object,
   service: PropTypes.object,
   location: PropTypes.object
-}
+};
 
 const connectBreadcrumb = connect(
   (state, ownProps) => {
@@ -59,7 +62,4 @@ const connectBreadcrumb = connect(
   dispatch => ({})
 );
 
-export default compose(
-  connectBreadcrumb,
-  withNotFound()
-)(Breadcrumb);
+export default compose(connectBreadcrumb, withNotFound())(Breadcrumb);
diff --git a/packages/cp-frontend/src/containers/navigation/header.js b/packages/cp-frontend/src/containers/navigation/header.js
index 34a7a8c6..dcc66e02 100644
--- a/packages/cp-frontend/src/containers/navigation/header.js
+++ b/packages/cp-frontend/src/containers/navigation/header.js
@@ -5,8 +5,9 @@ import get from 'lodash.get';
 import PortalQuery from '@graphql/Portal.gql';
 import { Header as HeaderComponent } from '@components/navigation';
 
-export const Header = ({ datacenter, username }) =>
-  <HeaderComponent datacenter={datacenter} username={username} />;
+export const Header = ({ datacenter, username }) => (
+  <HeaderComponent datacenter={datacenter} username={username} />
+);
 
 const HeaderWithData = graphql(PortalQuery, {
   props: ({ data: { portal = {} } }) => ({
diff --git a/packages/cp-frontend/src/containers/navigation/menu.js b/packages/cp-frontend/src/containers/navigation/menu.js
index 6e2a8f91..c816ca58 100644
--- a/packages/cp-frontend/src/containers/navigation/menu.js
+++ b/packages/cp-frontend/src/containers/navigation/menu.js
@@ -5,7 +5,6 @@ import withNotFound from './not-found-hoc';
 import { Menu as MenuComponent } from '@components/navigation';
 
 export const Menu = ({ location, match, sections }) => {
-
   if (!sections || !sections.length) {
     return null;
   }
@@ -40,7 +39,4 @@ const connectMenu = connect(
   dispatch => ({})
 );
 
-export default compose(
-  connectMenu,
-  withNotFound()
-)(Menu);
+export default compose(connectMenu, withNotFound())(Menu);
diff --git a/packages/cp-frontend/src/containers/navigation/not-found-hoc.js b/packages/cp-frontend/src/containers/navigation/not-found-hoc.js
index 7a9eea6a..0c12f945 100644
--- a/packages/cp-frontend/src/containers/navigation/not-found-hoc.js
+++ b/packages/cp-frontend/src/containers/navigation/not-found-hoc.js
@@ -4,31 +4,24 @@ import { NotFound } from '@components/navigation';
 export const GqlPaths = {
   DEPLOYMENT_GROUP: 'deploymentGroup',
   SERVICES: 'services'
-}
-
-export default (paths) => {
-  return (WrappedComponent) => {
+};
 
+export default paths => {
+  return WrappedComponent => {
     return class extends Component {
-
       componentWillReceiveProps(nextProps) {
-        
-        if(paths) {
-          const {
-            error,
-            location,
-            history
-          } = nextProps;
+        if (paths) {
+          const { error, location, history } = nextProps;
 
           if (
-            error
-            && (!location.state || !location.state.notFound)
-            && (error.graphQLErrors && error.graphQLErrors.length)
+            error &&
+            (!location.state || !location.state.notFound) &&
+            (error.graphQLErrors && error.graphQLErrors.length)
           ) {
             const graphQLError = error.graphQLErrors[0];
-            if(graphQLError.message === 'Not Found') {
+            if (graphQLError.message === 'Not Found') {
               const notFound = graphQLError.path.pop();
-              if(paths.indexOf(notFound) > -1) {
+              if (paths.indexOf(notFound) > -1) {
                 history.replace(location.pathname, { notFound });
               }
             }
@@ -37,25 +30,22 @@ export default (paths) => {
       }
 
       render() {
+        const { error, location, match } = this.props;
 
-        const {
-          error,
-          location,
-          match
-        } = this.props;
-
-        if(location.state && location.state.notFound) {
+        if (location.state && location.state.notFound) {
           const notFound = location.state.notFound;
-          if(paths && paths.indexOf(notFound) > -1) {
+          if (paths && paths.indexOf(notFound) > -1) {
             let title;
             let to;
             let link;
-            if(notFound === 'services' || notFound === 'service') {
+            if (notFound === 'services' || notFound === 'service') {
               title = 'This service doesn’t exist';
-              to = match.url.split('/').slice(0, 3).join('/');
+              to = match.url
+                .split('/')
+                .slice(0, 3)
+                .join('/');
               link = 'Back to services';
-            }
-            else if(notFound === 'deploymentGroup') {
+            } else if (notFound === 'deploymentGroup') {
               title = 'This deployment group doesn’t exist';
               to = '/deployment-group';
               link = 'Back to dashboard';
@@ -63,17 +53,17 @@ export default (paths) => {
             return (
               <NotFound
                 title={title}
-                message='Sorry, but our princess is in another castle.'
+                message="Sorry, but our princess is in another castle."
                 to={to}
                 link={link}
               />
-            )
+            );
           }
           return null;
         }
 
-        return <WrappedComponent {...this.props} />
+        return <WrappedComponent {...this.props} />;
       }
-    }
-  }
-}
+    };
+  };
+};
diff --git a/packages/cp-frontend/src/containers/service/delete.js b/packages/cp-frontend/src/containers/service/delete.js
index ed048426..3fc932df 100644
--- a/packages/cp-frontend/src/containers/service/delete.js
+++ b/packages/cp-frontend/src/containers/service/delete.js
@@ -21,7 +21,10 @@ export class ServiceDelete extends Component {
     const { loading, error, match, history } = this.props;
 
     const handleCloseClick = evt => {
-      const closeUrl = match.url.split('/').slice(0, -2).join('/');
+      const closeUrl = match.url
+        .split('/')
+        .slice(0, -2)
+        .join('/');
       history.replace(closeUrl);
     };
 
@@ -37,8 +40,8 @@ export class ServiceDelete extends Component {
       return (
         <Modal width={460} onCloseClick={handleCloseClick}>
           <ModalErrorMessage
-            title='Ooops!'
-            message='An error occurred while loading your service.'
+            title="Ooops!"
+            message="An error occurred while loading your service."
             onCloseClick={handleCloseClick}
           />
         </Modal>
@@ -51,7 +54,7 @@ export class ServiceDelete extends Component {
       return (
         <Modal width={460} onCloseClick={handleCloseClick}>
           <ModalErrorMessage
-            title='Ooops!'
+            title="Ooops!"
             message={`An error occurred while attempting to delete your ${service.name} service.`}
             onCloseClick={handleCloseClick}
           />
@@ -60,9 +63,11 @@ export class ServiceDelete extends Component {
     }
 
     const handleConfirmClick = evt => {
-      deleteServices(service.id).then(() => handleCloseClick()).catch(err => {
-        this.setState({ error: err });
-      });
+      deleteServices(service.id)
+        .then(() => handleCloseClick())
+        .catch(err => {
+          this.setState({ error: err });
+        });
     };
 
     return (
@@ -98,5 +103,5 @@ const DeleteServicesGql = graphql(ServicesDeleteMutation, {
 export default compose(
   DeleteServicesGql,
   ServiceGql,
-  withNotFound([ GqlPaths.SERVICES ])
+  withNotFound([GqlPaths.SERVICES])
 )(ServiceDelete);
diff --git a/packages/cp-frontend/src/containers/service/metrics.js b/packages/cp-frontend/src/containers/service/metrics.js
index 1dc6ef72..47662938 100644
--- a/packages/cp-frontend/src/containers/service/metrics.js
+++ b/packages/cp-frontend/src/containers/service/metrics.js
@@ -10,17 +10,16 @@ import { ServiceMetrics as ServiceMetricsComponent } from '@components/service';
 import { Button } from 'joyent-ui-toolkit';
 import { Loader, ErrorMessage } from '@components/messaging';
 
-import { withServiceMetricsPolling, withServiceMetricsGql } from '@containers/metrics';
+import {
+  withServiceMetricsPolling,
+  withServiceMetricsGql
+} from '@containers/metrics';
 
 // 'width' of graph, i.e. total duration of time it'll display and truncate data to
 // amount of data we'll need to initially fetch
 const GraphDurationSeconds = 90;
 
-const ServiceMetrics = ({
-  service,
-  loading,
-  error
-}) => {
+const ServiceMetrics = ({ service, loading, error }) => {
   if (loading || !service) {
     return (
       <LayoutContainer center>
@@ -43,8 +42,8 @@ const ServiceMetrics = ({
   // metricsData should prob be an array rather than an object
   const metricsData = service.instances.reduce((metrics, instance) => {
     // gather metrics of instances according to type
-    instance.metrics.forEach((instanceMetrics) => {
-      if(!metrics[instanceMetrics.name]) {
+    instance.metrics.forEach(instanceMetrics => {
+      if (!metrics[instanceMetrics.name]) {
         metrics[instanceMetrics.name] = [];
       }
       metrics[instanceMetrics.name].push(instanceMetrics);
@@ -69,10 +68,7 @@ export default compose(
     updateIntervalSeconds: 15
   }),
   withServiceMetricsPolling({ pollingInterval: 1000 }),
-  withNotFound([
-    GqlPaths.DEPLOYMENT_GROUP,
-    GqlPaths.SERVICES
-  ])
+  withNotFound([GqlPaths.DEPLOYMENT_GROUP, GqlPaths.SERVICES])
 )(ServiceMetrics);
 
 /*
diff --git a/packages/cp-frontend/src/containers/service/scale.js b/packages/cp-frontend/src/containers/service/scale.js
index 26a77226..08ce9312 100644
--- a/packages/cp-frontend/src/containers/service/scale.js
+++ b/packages/cp-frontend/src/containers/service/scale.js
@@ -22,7 +22,10 @@ export class ServiceScale extends Component {
     const { loading, error, match, history } = this.props;
 
     const handleCloseClick = evt => {
-      const closeUrl = match.url.split('/').slice(0, -2).join('/');
+      const closeUrl = match.url
+        .split('/')
+        .slice(0, -2)
+        .join('/');
       history.replace(closeUrl);
     };
 
@@ -38,8 +41,8 @@ export class ServiceScale extends Component {
       return (
         <Modal width={460} onCloseClick={handleCloseClick}>
           <ModalErrorMessage
-            title='Ooops!'
-            message='An error occurred while loading your service.'
+            title="Ooops!"
+            message="An error occurred while loading your service."
             onCloseClick={handleCloseClick}
           />
         </Modal>
@@ -52,7 +55,7 @@ export class ServiceScale extends Component {
       return (
         <Modal width={460} onCloseClick={handleCloseClick}>
           <ModalErrorMessage
-            title='Ooops!'
+            title="Ooops!"
             message={`An error occurred while attempting to scale your ${service.name} service.`}
             onCloseClick={handleCloseClick}
           />
@@ -70,9 +73,11 @@ export class ServiceScale extends Component {
     };
 
     const handleSubmitClick = values => {
-      scale(service.id, values.replicas).then(handleCloseClick).catch(err => {
-        this.setState({ error: err });
-      });
+      scale(service.id, values.replicas)
+        .then(handleCloseClick)
+        .catch(err => {
+          this.setState({ error: err });
+        });
     };
 
     if (!service) {
@@ -126,5 +131,5 @@ const ServiceScaleGql = graphql(ServiceScaleMutation, {
 export default compose(
   ServiceScaleGql,
   ServiceGql,
-  withNotFound([ GqlPaths.SERVICES ])
+  withNotFound([GqlPaths.SERVICES])
 )(ServiceScale);
diff --git a/packages/cp-frontend/src/containers/services/list.js b/packages/cp-frontend/src/containers/services/list.js
index c135bd26..0c20b339 100644
--- a/packages/cp-frontend/src/containers/services/list.js
+++ b/packages/cp-frontend/src/containers/services/list.js
@@ -34,7 +34,7 @@ export class ServiceList extends Component {
       services,
       loading,
       error,
-      toggleServicesQuickActions,
+      toggleServicesQuickActions
     } = this.props;
 
     if (loading && !forceArray(services).length) {
@@ -73,8 +73,9 @@ export class ServiceList extends Component {
       const buttonRect = button.getBoundingClientRect();
 
       const position = {
-        left:
-          `${buttonRect.left + window.scrollX + (buttonRect.right - buttonRect.left) / 2}px`,
+        left: `${buttonRect.left +
+          window.scrollX +
+          (buttonRect.right - buttonRect.left) / 2}px`,
         top: `${buttonRect.bottom + window.scrollY}px`
       };
 
@@ -120,9 +121,7 @@ export class ServiceList extends Component {
     return (
       <LayoutContainer>
         {renderedError}
-        <StyledContainer>
-          {serviceList}
-        </StyledContainer>
+        <StyledContainer>{serviceList}</StyledContainer>
       </LayoutContainer>
     );
   }
@@ -134,7 +133,7 @@ ServiceList.propTypes = {
   loading: PropTypes.bool,
   error: PropTypes.bool,
   toggleServicesQuickActions: PropTypes.func
-}
+};
 
 const mapStateToProps = (state, ownProps) => ({});
 
@@ -153,7 +152,7 @@ const ServicesGql = graphql(ServicesQuery, {
       }
     };
   },
-  props: ({ data: { deploymentGroup, loading, error }}) => ({
+  props: ({ data: { deploymentGroup, loading, error } }) => ({
     deploymentGroup,
     services: deploymentGroup
       ? processServices(deploymentGroup.services, null)
@@ -166,7 +165,7 @@ const ServicesGql = graphql(ServicesQuery, {
 const ServiceListWithData = compose(
   ServicesGql,
   UiConnect,
-  withNotFound([ GqlPaths.DEPLOYMENT_GROUP ])
+  withNotFound([GqlPaths.DEPLOYMENT_GROUP])
 )(ServiceList);
 
 export default ServiceListWithData;
diff --git a/packages/cp-frontend/src/containers/services/menu.js b/packages/cp-frontend/src/containers/services/menu.js
index aa7de230..3c4bc255 100644
--- a/packages/cp-frontend/src/containers/services/menu.js
+++ b/packages/cp-frontend/src/containers/services/menu.js
@@ -20,11 +20,8 @@ const PaddedRow = Row.extend`
   margin-bottom: ${remcalc(18)}
 `;
 
-export const ServicesMenu = ({
-  location: { pathname },
-  history: { push }
-}) => {
 
+export const ServicesMenu = ({ location: { pathname }, history: { push } }) => {
   const toggleValue = pathname.split('-').pop();
 
   const handleToggle = evt => {
diff --git a/packages/cp-frontend/src/containers/services/quick-actions.js b/packages/cp-frontend/src/containers/services/quick-actions.js
index dfbc34c8..02b88f67 100644
--- a/packages/cp-frontend/src/containers/services/quick-actions.js
+++ b/packages/cp-frontend/src/containers/services/quick-actions.js
@@ -17,13 +17,12 @@ const StyledContainer = styled.div`
 `;
 
 export class ServicesQuickActions extends Component {
-
   constructor(props) {
     super(props);
 
     this.state = {
       errors: {}
-    }
+    };
   }
 
   render() {
@@ -53,20 +52,20 @@ export class ServicesQuickActions extends Component {
             ? 'An error occurred while attempting to restart your service.'
             : '';
 
-       errorMessage = (
+      errorMessage = (
         <LayoutContainer>
           <ErrorMessage title="Ooops!" message={message} />
         </LayoutContainer>
       );
     }
 
-    if(servicesQuickActions.show) {
+    if (servicesQuickActions.show) {
       const handleTooltipBlur = evt => {
         toggleServicesQuickActions({ show: false });
       };
 
       const handleRestartClick = (evt, service) => {
-        this.setState({errors: {}});
+        this.setState({ errors: {} });
         toggleServicesQuickActions({ show: false });
         restartServices(service.id).catch(err => {
           this.setState({ errors: { restart: err } });
@@ -74,7 +73,7 @@ export class ServicesQuickActions extends Component {
       };
 
       const handleStopClick = (evt, service) => {
-        this.setState({errors: {}});
+        this.setState({ errors: {} });
         toggleServicesQuickActions({ show: false });
         stopServices(service.id).catch(err => {
           this.setState({ errors: { stop: err } });
@@ -82,7 +81,7 @@ export class ServicesQuickActions extends Component {
       };
 
       const handleStartClick = (evt, service) => {
-        this.setState({errors: {}});
+        this.setState({ errors: {} });
         toggleServicesQuickActions({ show: false });
         startServices(service.id).catch(err => {
           this.setState({ errors: { start: err } });
@@ -90,13 +89,13 @@ export class ServicesQuickActions extends Component {
       };
 
       const handleScaleClick = (evt, service) => {
-        this.setState({errors: {}});
+        this.setState({ errors: {} });
         toggleServicesQuickActions({ show: false });
         push(`${url}/${service.slug}/scale`);
       };
 
       const handleDeleteClick = (evt, service) => {
-        this.setState({errors: {}});
+        this.setState({ errors: {} });
         toggleServicesQuickActions({ show: false });
         push(`${url}/${service.slug}/delete`);
       };
@@ -115,16 +114,16 @@ export class ServicesQuickActions extends Component {
             onDeleteClick={handleDeleteClick}
           />
         </StyledContainer>
-      )
+      );
     }
 
-    if(quickActions || errorMessage) {
+    if (quickActions || errorMessage) {
       return (
         <div>
           {errorMessage}
           {quickActions}
         </div>
-      )
+      );
     }
 
     return null;
diff --git a/packages/cp-frontend/src/containers/services/topology.js b/packages/cp-frontend/src/containers/services/topology.js
index f40d6951..abc3b87e 100644
--- a/packages/cp-frontend/src/containers/services/topology.js
+++ b/packages/cp-frontend/src/containers/services/topology.js
@@ -47,7 +47,7 @@ export class ServicesTopology extends Component {
       services,
       loading,
       error,
-      toggleServicesQuickActions,
+      toggleServicesQuickActions
     } = this.props;
 
     if (loading && !forceArray(services).length) {
@@ -85,18 +85,27 @@ export class ServicesTopology extends Component {
       const container = this._refs.container;
       const containerRect = container.getBoundingClientRect();
       const position = {
-        top: `${containerRect.top + window.scrollY + tooltipData.position.top}px`,
-        left: `${containerRect.left + window.scrollX + tooltipData.position.left}px`
-      }
+        top: `${containerRect.top +
+          window.scrollY +
+          tooltipData.position.top}px`,
+        left: `${containerRect.left +
+          window.scrollX +
+          tooltipData.position.left}px`
+      };
       const data = {
         ...tooltipData,
         position
-      }
+      };
       toggleServicesQuickActions(data);
     };
 
     const handleNodeTitleClick = (evt, { service }) => {
-      push(`${url.split('/').slice(0, 3).join('/')}/services/${service.slug}`);
+      push(
+        `${url
+          .split('/')
+          .slice(0, 3)
+          .join('/')}/services/${service.slug}`
+      );
     };
 
     let renderedError = null;
@@ -173,7 +182,7 @@ const ServicesGql = graphql(ServicesQuery, {
 const ServicesTopologyWithData = compose(
   ServicesGql,
   UiConnect,
-  withNotFound([ GqlPaths.DEPLOYMENT_GROUP ])
+  withNotFound([GqlPaths.DEPLOYMENT_GROUP])
 )(ServicesTopology);
 
 export default ServicesTopologyWithData;
diff --git a/packages/cp-frontend/src/graphql/ServiceMetrics.gql b/packages/cp-frontend/src/graphql/ServiceMetrics.gql
index 6c6cb232..c54f47e0 100644
--- a/packages/cp-frontend/src/graphql/ServiceMetrics.gql
+++ b/packages/cp-frontend/src/graphql/ServiceMetrics.gql
@@ -1,8 +1,8 @@
 query Instances(
-  $deploymentGroupSlug: String!,
-  $serviceSlug: String!,
-  $metricNames: [MetricName]!,
-  $start: String!,
+  $deploymentGroupSlug: String!
+  $serviceSlug: String!
+  $metricNames: [MetricName]!
+  $start: String!
   $end: String!
 ) {
   deploymentGroup(slug: $deploymentGroupSlug) {
diff --git a/packages/cp-frontend/src/router.js b/packages/cp-frontend/src/router.js
index 7e781717..a523a413 100644
--- a/packages/cp-frontend/src/router.js
+++ b/packages/cp-frontend/src/router.js
@@ -25,10 +25,7 @@ import {
   ServiceMetrics
 } from '@containers/service';
 
-import {
-  InstanceList,
-  InstancesTooltip
-} from '@containers/instances';
+import { InstanceList, InstancesTooltip } from '@containers/instances';
 
 import { DeploymentGroupDelete } from '@containers/deployment-group';
 
@@ -43,23 +40,27 @@ const Container = styled.div`
 
 const rootRedirect = p => <Redirect to="/deployment-groups" />;
 
-const servicesListRedirect = p =>
+const servicesListRedirect = p => (
   <Redirect
     to={`/deployment-groups/${p.match.params.deploymentGroup}/services-list`}
-  />;
+  />
+);
 
-const servicesTopologyRedirect = p =>
+const servicesTopologyRedirect = p => (
   <Redirect
-    to={`/deployment-groups/${p.match.params.deploymentGroup}/services-topology`}
-  />;
+    to={`/deployment-groups/${p.match.params
+      .deploymentGroup}/services-topology`}
+  />
+);
 
-const serviceRedirect = p =>
+const serviceRedirect = p => (
   <Redirect
     to={`/deployment-groups/${p.match.params.deploymentGroup}/services/${p.match
       .params.service}/instances`}
-  />;
+  />
+);
 
-const App = p =>
+const App = p => (
   <div>
     <Switch>
       <Route
@@ -222,7 +223,8 @@ const App = p =>
         component={servicesTopologyRedirect}
       />
     </Switch>
-  </div>;
+  </div>
+);
 
 const Router = (
   <BrowserRouter>
diff --git a/packages/cp-frontend/src/state/reducers/ui.js b/packages/cp-frontend/src/state/reducers/ui.js
index 06ac7d46..632944dc 100644
--- a/packages/cp-frontend/src/state/reducers/ui.js
+++ b/packages/cp-frontend/src/state/reducers/ui.js
@@ -1,5 +1,8 @@
 import { handleActions } from 'redux-actions';
-import { toggleServicesQuickActions, toggleInstancesTooltip } from '@state/actions';
+import {
+  toggleServicesQuickActions,
+  toggleInstancesTooltip
+} from '@state/actions';
 
 export const _toggleServicesQuickActions = (state, action) => {
   const { position, service, show } = action.payload;
diff --git a/packages/cp-frontend/src/state/selectors.js b/packages/cp-frontend/src/state/selectors.js
index 23a2d3de..c57d7974 100644
--- a/packages/cp-frontend/src/state/selectors.js
+++ b/packages/cp-frontend/src/state/selectors.js
@@ -104,10 +104,10 @@ const getInstancesHealthy = instances => {
   return instances.reduce(
     (healthy, instance) => ({
       total: healthy.total + 1,
-      healthy: instance.healthy === 'HEALTHY' ?
-        healthy.healthy + 1 : healthy.healthy
+      healthy:
+        instance.healthy === 'HEALTHY' ? healthy.healthy + 1 : healthy.healthy
     }),
-    {total: 0, healthy: 0}
+    { total: 0, healthy: 0 }
   );
 };
 
@@ -174,6 +174,8 @@ const processServicesForTopology = services => {
   }));
 };
 
+/* ,
+  instancesByServiceId */
 export {
   deploymentGroupBySlug as deploymentGroupBySlugSelector,
   serviceBySlug as serviceBySlugSelector,
@@ -182,6 +184,5 @@ export {
   getInstancesHealthy,
   getService,
   processServices,
-  processServicesForTopology /* ,
-  instancesByServiceId */
+  processServicesForTopology
 };
diff --git a/packages/cp-frontend/src/state/store.js b/packages/cp-frontend/src/state/store.js
index 6e7b9b35..817c1663 100644
--- a/packages/cp-frontend/src/state/store.js
+++ b/packages/cp-frontend/src/state/store.js
@@ -30,8 +30,11 @@ export const client = new ApolloClient({
             ? o.timestamp
             : o.name && o.instance
               ? `${o.name}-${o.instance}`
-                : o.name ? o.name : o.time && o.value
-                  ? `${o.time}-${o.value}` : 'apollo-cache-key-not-defined';
+              : o.name
+                ? o.name
+                : o.time && o.value
+                  ? `${o.time}-${o.value}`
+                  : 'apollo-cache-key-not-defined';
     return `${o.__typename}:${id}`;
   },
   networkInterface: createNetworkInterface({
diff --git a/packages/cp-frontend/test/unit/components/deployment-group/delete.js b/packages/cp-frontend/test/unit/components/deployment-group/delete.js
index 9be55462..f6376d51 100644
--- a/packages/cp-frontend/test/unit/components/deployment-group/delete.js
+++ b/packages/cp-frontend/test/unit/components/deployment-group/delete.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
@@ -12,9 +11,7 @@ import { deploymentGroup } from '../../mocks';
 
 it('renders <DeploymentGroupDelete /> without throwing', () => {
   const tree = renderer
-    .create(
-      <DeploymentGroupDelete deploymentGroup={deploymentGroup} />
-    )
+    .create(<DeploymentGroupDelete deploymentGroup={deploymentGroup} />)
     .toJSON();
   expect(tree).toMatchSnapshot();
 });
diff --git a/packages/cp-frontend/test/unit/components/instances/empty.js b/packages/cp-frontend/test/unit/components/instances/empty.js
index abc79ae8..f3a9f023 100644
--- a/packages/cp-frontend/test/unit/components/instances/empty.js
+++ b/packages/cp-frontend/test/unit/components/instances/empty.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
@@ -10,10 +9,6 @@ import 'jest-styled-components';
 import EmtpyInstances from '@components/instances/empty.js';
 
 it('renders <EmtpyInstances /> without throwing', () => {
-  const tree = renderer
-    .create(
-      <EmtpyInstances />
-    )
-    .toJSON();
+  const tree = renderer.create(<EmtpyInstances />).toJSON();
   expect(tree).toMatchSnapshot();
 });
diff --git a/packages/cp-frontend/test/unit/components/instances/list-item.js b/packages/cp-frontend/test/unit/components/instances/list-item.js
index 70faf1e1..14929098 100644
--- a/packages/cp-frontend/test/unit/components/instances/list-item.js
+++ b/packages/cp-frontend/test/unit/components/instances/list-item.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
@@ -11,10 +10,6 @@ import InstanceCard from '@components/instances/list-item.js';
 import { instance } from '../../mocks';
 
 it('renders <InstanceCard /> without throwing', () => {
-  const tree = renderer
-    .create(
-      <InstanceCard instance={instance} />
-    )
-    .toJSON();
+  const tree = renderer.create(<InstanceCard instance={instance} />).toJSON();
   expect(tree).toMatchSnapshot();
 });
diff --git a/packages/cp-frontend/test/unit/components/layout/container.js b/packages/cp-frontend/test/unit/components/layout/container.js
index 1af1a623..2883f3ee 100644
--- a/packages/cp-frontend/test/unit/components/layout/container.js
+++ b/packages/cp-frontend/test/unit/components/layout/container.js
@@ -9,10 +9,6 @@ import 'jest-styled-components';
 import Container from '@components/layout/container';
 
 it('renders <Container /> without throwing', () => {
-  const tree = renderer
-    .create(
-      <Container />
-    )
-    .toJSON();
+  const tree = renderer.create(<Container />).toJSON();
   expect(tree).toMatchSnapshot();
 });
diff --git a/packages/cp-frontend/test/unit/components/manifest/edit-or-create.js b/packages/cp-frontend/test/unit/components/manifest/edit-or-create.js
index 4cfa6fc8..5f4392b7 100644
--- a/packages/cp-frontend/test/unit/components/manifest/edit-or-create.js
+++ b/packages/cp-frontend/test/unit/components/manifest/edit-or-create.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
diff --git a/packages/cp-frontend/test/unit/components/messaging/error.js b/packages/cp-frontend/test/unit/components/messaging/error.js
index fd33db9b..fbc498a5 100644
--- a/packages/cp-frontend/test/unit/components/messaging/error.js
+++ b/packages/cp-frontend/test/unit/components/messaging/error.js
@@ -9,10 +9,6 @@ import 'jest-styled-components';
 import Error from '@components/messaging/error';
 
 it('renders <Error /> without throwing', () => {
-  const tree = renderer
-    .create(
-      <Error />
-    )
-    .toJSON();
+  const tree = renderer.create(<Error />).toJSON();
   expect(tree).toMatchSnapshot();
 });
diff --git a/packages/cp-frontend/test/unit/components/messaging/loader.js b/packages/cp-frontend/test/unit/components/messaging/loader.js
index beb6fae7..e32492d5 100644
--- a/packages/cp-frontend/test/unit/components/messaging/loader.js
+++ b/packages/cp-frontend/test/unit/components/messaging/loader.js
@@ -9,10 +9,6 @@ import 'jest-styled-components';
 import Loader from '@components/messaging/loader';
 
 it('renders <Loader /> without throwing', () => {
-  const tree = renderer
-    .create(
-      <Loader />
-    )
-    .toJSON();
+  const tree = renderer.create(<Loader />).toJSON();
   expect(tree).toMatchSnapshot();
 });
diff --git a/packages/cp-frontend/test/unit/components/messaging/modal-error.js b/packages/cp-frontend/test/unit/components/messaging/modal-error.js
index 87662409..4d6d2388 100644
--- a/packages/cp-frontend/test/unit/components/messaging/modal-error.js
+++ b/packages/cp-frontend/test/unit/components/messaging/modal-error.js
@@ -11,7 +11,7 @@ import ModalError from '@components/messaging/modal-error';
 it('renders <ModalError /> without throwing', () => {
   const tree = renderer
     .create(
-      <ModalError message='Modal error message' onCloseClick={() => {}}/>
+      <ModalError message="Modal error message" onCloseClick={() => {}} />
     )
     .toJSON();
   expect(tree).toMatchSnapshot();
diff --git a/packages/cp-frontend/test/unit/components/messaging/warning.js b/packages/cp-frontend/test/unit/components/messaging/warning.js
index 83c46ac0..eb7e7728 100644
--- a/packages/cp-frontend/test/unit/components/messaging/warning.js
+++ b/packages/cp-frontend/test/unit/components/messaging/warning.js
@@ -9,10 +9,6 @@ import 'jest-styled-components';
 import Warning from '@components/messaging/warning';
 
 it('renders <Warning /> without throwing', () => {
-  const tree = renderer
-    .create(
-      <Warning message='Warning message'/>
-    )
-    .toJSON();
+  const tree = renderer.create(<Warning message="Warning message" />).toJSON();
   expect(tree).toMatchSnapshot();
 });
diff --git a/packages/cp-frontend/test/unit/components/navigation/title.js b/packages/cp-frontend/test/unit/components/navigation/title.js
index 43a0d58e..a4256733 100644
--- a/packages/cp-frontend/test/unit/components/navigation/title.js
+++ b/packages/cp-frontend/test/unit/components/navigation/title.js
@@ -9,10 +9,6 @@ import 'jest-styled-components';
 import Title from '@components/navigation/title';
 
 it('renders <Title /> without throwing', () => {
-  const tree = renderer
-    .create(
-      <Title />
-    )
-    .toJSON();
+  const tree = renderer.create(<Title />).toJSON();
   expect(tree).toMatchSnapshot();
 });
diff --git a/packages/cp-frontend/test/unit/components/service/delete.js b/packages/cp-frontend/test/unit/components/service/delete.js
index fa91e810..e0d2fb81 100644
--- a/packages/cp-frontend/test/unit/components/service/delete.js
+++ b/packages/cp-frontend/test/unit/components/service/delete.js
@@ -10,10 +10,6 @@ import { service } from '../../mocks';
 import Delete from '@components/service/delete';
 
 it('renders <Delete /> without throwing', () => {
-  const tree = renderer
-    .create(
-      <Delete service={service} />
-    )
-    .toJSON();
+  const tree = renderer.create(<Delete service={service} />).toJSON();
   expect(tree).toMatchSnapshot();
 });
diff --git a/packages/cp-frontend/test/unit/components/services/empty.js b/packages/cp-frontend/test/unit/components/services/empty.js
index 1d0e072f..b949a4c7 100644
--- a/packages/cp-frontend/test/unit/components/services/empty.js
+++ b/packages/cp-frontend/test/unit/components/services/empty.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
diff --git a/packages/cp-frontend/test/unit/components/services/list-item.js b/packages/cp-frontend/test/unit/components/services/list-item.js
index 41a9861d..e5f84ddf 100644
--- a/packages/cp-frontend/test/unit/components/services/list-item.js
+++ b/packages/cp-frontend/test/unit/components/services/list-item.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
@@ -23,9 +22,7 @@ it('renders <ServiceListItem /> without throwing', () => {
 
 it('renders child <ServiceListItem /> without throwing', () => {
   const tree = renderer
-    .create(
-      <ServiceListItem service={service} isChild />
-    )
+    .create(<ServiceListItem service={service} isChild />)
     .toJSON();
   expect(tree).toMatchSnapshot();
 });
diff --git a/packages/cp-frontend/test/unit/components/services/quick-actions.js b/packages/cp-frontend/test/unit/components/services/quick-actions.js
index 416794bd..b80acd89 100644
--- a/packages/cp-frontend/test/unit/components/services/quick-actions.js
+++ b/packages/cp-frontend/test/unit/components/services/quick-actions.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
diff --git a/packages/cp-frontend/test/unit/components/services/status.js b/packages/cp-frontend/test/unit/components/services/status.js
index 8850cae2..d880033c 100644
--- a/packages/cp-frontend/test/unit/components/services/status.js
+++ b/packages/cp-frontend/test/unit/components/services/status.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
@@ -12,9 +11,7 @@ import { service } from '../../mocks';
 
 xit('renders <ServiceStatus /> without throwing', () => {
   const tree = renderer
-    .create(
-      <ServiceStatus instanceStatuses={service.instanceStatuses} />
-    )
+    .create(<ServiceStatus instanceStatuses={service.instanceStatuses} />)
     .toJSON();
   expect(tree).toMatchSnapshot();
 });
diff --git a/packages/cp-frontend/test/unit/containers/deployment-group/delete.js b/packages/cp-frontend/test/unit/containers/deployment-group/delete.js
index 8801bed0..ad30db92 100644
--- a/packages/cp-frontend/test/unit/containers/deployment-group/delete.js
+++ b/packages/cp-frontend/test/unit/containers/deployment-group/delete.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
diff --git a/packages/cp-frontend/test/unit/containers/deployment-groups/create.js b/packages/cp-frontend/test/unit/containers/deployment-groups/create.js
index 322f37e4..ccae0499 100644
--- a/packages/cp-frontend/test/unit/containers/deployment-groups/create.js
+++ b/packages/cp-frontend/test/unit/containers/deployment-groups/create.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
@@ -17,12 +16,12 @@ it('renders <DeploymentGroupCreate /> without throwing', () => {
         stage: ''
       }
     }
-  }
+  };
   const tree = renderer
     .create(
       <Store>
         <Router>
-          <DeploymentGroupCreate { ...props } />
+          <DeploymentGroupCreate {...props} />
         </Router>
       </Store>
     )
diff --git a/packages/cp-frontend/test/unit/containers/deployment-groups/import.js b/packages/cp-frontend/test/unit/containers/deployment-groups/import.js
index d1515a53..30409fa2 100644
--- a/packages/cp-frontend/test/unit/containers/deployment-groups/import.js
+++ b/packages/cp-frontend/test/unit/containers/deployment-groups/import.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
diff --git a/packages/cp-frontend/test/unit/containers/deployment-groups/list.js b/packages/cp-frontend/test/unit/containers/deployment-groups/list.js
index df3869d8..39247bc2 100644
--- a/packages/cp-frontend/test/unit/containers/deployment-groups/list.js
+++ b/packages/cp-frontend/test/unit/containers/deployment-groups/list.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
diff --git a/packages/cp-frontend/test/unit/containers/instances/list.js b/packages/cp-frontend/test/unit/containers/instances/list.js
index efc1ccce..2c5feb9c 100644
--- a/packages/cp-frontend/test/unit/containers/instances/list.js
+++ b/packages/cp-frontend/test/unit/containers/instances/list.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
diff --git a/packages/cp-frontend/test/unit/containers/instances/tooltip.js b/packages/cp-frontend/test/unit/containers/instances/tooltip.js
index 7a597a9b..323d7475 100644
--- a/packages/cp-frontend/test/unit/containers/instances/tooltip.js
+++ b/packages/cp-frontend/test/unit/containers/instances/tooltip.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
diff --git a/packages/cp-frontend/test/unit/containers/manifest/edit-or-create.js b/packages/cp-frontend/test/unit/containers/manifest/edit-or-create.js
index 927cab0d..967b0d00 100644
--- a/packages/cp-frontend/test/unit/containers/manifest/edit-or-create.js
+++ b/packages/cp-frontend/test/unit/containers/manifest/edit-or-create.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
diff --git a/packages/cp-frontend/test/unit/containers/navigation/breadcrumb.js b/packages/cp-frontend/test/unit/containers/navigation/breadcrumb.js
index c76c1a52..b822b640 100644
--- a/packages/cp-frontend/test/unit/containers/navigation/breadcrumb.js
+++ b/packages/cp-frontend/test/unit/containers/navigation/breadcrumb.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
@@ -15,12 +14,12 @@ it('renders <Breadcrumb /> without throwing', () => {
     location: {
       pathname: ''
     }
-  }
+  };
   const tree = renderer
     .create(
       <Store>
         <Router>
-          <Breadcrumb { ...props } />
+          <Breadcrumb {...props} />
         </Router>
       </Store>
     )
diff --git a/packages/cp-frontend/test/unit/containers/navigation/header.js b/packages/cp-frontend/test/unit/containers/navigation/header.js
index 8426c0d4..14be8717 100644
--- a/packages/cp-frontend/test/unit/containers/navigation/header.js
+++ b/packages/cp-frontend/test/unit/containers/navigation/header.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
diff --git a/packages/cp-frontend/test/unit/containers/navigation/menu.js b/packages/cp-frontend/test/unit/containers/navigation/menu.js
index 381499e9..0fa74e85 100644
--- a/packages/cp-frontend/test/unit/containers/navigation/menu.js
+++ b/packages/cp-frontend/test/unit/containers/navigation/menu.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
diff --git a/packages/cp-frontend/test/unit/containers/navigation/not-found-hoc.js b/packages/cp-frontend/test/unit/containers/navigation/not-found-hoc.js
index 5a51aa5d..b9db719c 100644
--- a/packages/cp-frontend/test/unit/containers/navigation/not-found-hoc.js
+++ b/packages/cp-frontend/test/unit/containers/navigation/not-found-hoc.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
diff --git a/packages/cp-frontend/test/unit/containers/service/delete.js b/packages/cp-frontend/test/unit/containers/service/delete.js
index 73b01fe9..ca2b48c4 100644
--- a/packages/cp-frontend/test/unit/containers/service/delete.js
+++ b/packages/cp-frontend/test/unit/containers/service/delete.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
diff --git a/packages/cp-frontend/test/unit/containers/service/scale.js b/packages/cp-frontend/test/unit/containers/service/scale.js
index 069f60ff..3a29ff2e 100644
--- a/packages/cp-frontend/test/unit/containers/service/scale.js
+++ b/packages/cp-frontend/test/unit/containers/service/scale.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
diff --git a/packages/cp-frontend/test/unit/containers/services/list.js b/packages/cp-frontend/test/unit/containers/services/list.js
index d51a26c6..22175c88 100644
--- a/packages/cp-frontend/test/unit/containers/services/list.js
+++ b/packages/cp-frontend/test/unit/containers/services/list.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
@@ -15,10 +14,7 @@ it('renders <ServiceList /> without throwing', () => {
     .create(
       <Store>
         <Router>
-          <ServiceList
-            deploymentGroup={deploymentGroup}
-            services={services}
-          />
+          <ServiceList deploymentGroup={deploymentGroup} services={services} />
         </Router>
       </Store>
     )
diff --git a/packages/cp-frontend/test/unit/containers/services/menu.js b/packages/cp-frontend/test/unit/containers/services/menu.js
index 5fcca50d..8fc1bec9 100644
--- a/packages/cp-frontend/test/unit/containers/services/menu.js
+++ b/packages/cp-frontend/test/unit/containers/services/menu.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
@@ -18,12 +17,12 @@ it('renders <ServicesMenu /> without throwing', () => {
     history: {
       push: () => {}
     }
-  }
+  };
   const tree = renderer
     .create(
       <Store>
         <Router>
-          <ServicesMenu { ...props } />
+          <ServicesMenu {...props} />
         </Router>
       </Store>
     )
diff --git a/packages/cp-frontend/test/unit/containers/services/quick-actions.js b/packages/cp-frontend/test/unit/containers/services/quick-actions.js
index 08968d9c..592e19af 100644
--- a/packages/cp-frontend/test/unit/containers/services/quick-actions.js
+++ b/packages/cp-frontend/test/unit/containers/services/quick-actions.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
diff --git a/packages/cp-frontend/test/unit/containers/services/topology.js b/packages/cp-frontend/test/unit/containers/services/topology.js
index fbad64ea..573fa304 100644
--- a/packages/cp-frontend/test/unit/containers/services/topology.js
+++ b/packages/cp-frontend/test/unit/containers/services/topology.js
@@ -1,4 +1,3 @@
-
 /**
  * @jest-environment jsdom
  */
@@ -15,9 +14,7 @@ it('renders <ServicesTopology /> without throwing', () => {
     .create(
       <Store>
         <Router>
-          <ServicesTopology
-            services={services}
-          />
+          <ServicesTopology services={services} />
         </Router>
       </Store>
     )
diff --git a/packages/cp-frontend/test/unit/mocks/data.js b/packages/cp-frontend/test/unit/mocks/data.js
index 918ae1c1..9949ebdc 100644
--- a/packages/cp-frontend/test/unit/mocks/data.js
+++ b/packages/cp-frontend/test/unit/mocks/data.js
@@ -1,37 +1,31 @@
 export const instance = {
-  "id": "309ecd9f-ac03-474b-aff7-4bd2e743296c",
-  "name": "wordpress_01",
-  "serviceId": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
-  "deploymentGroupId": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-  "machineId": "011f7479-2d45-442d-99bf-7f6216954cc8",
-  "status": "RUNNING",
-  "healthy": "HEALTHY"
+  id: '309ecd9f-ac03-474b-aff7-4bd2e743296c',
+  name: 'wordpress_01',
+  serviceId: 'be227788-74f1-4e5b-a85f-b5c71cbae8d8',
+  deploymentGroupId: 'e0ea0c02-55cc-45fe-8064-3e5176a59401',
+  machineId: '011f7479-2d45-442d-99bf-7f6216954cc8',
+  status: 'RUNNING',
+  healthy: 'HEALTHY'
 };
 
 export const service = {
-  "id": "081a792c-47e0-4439-924b-2efa9788ae9e",
-  "slug": "nginx",
-  "name": "Nginx",
-  "deploymentGroupId": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-  "connections": ["be227788-74f1-4e5b-a85f-b5c71cbae8d8"],
-  "instances": [instance],
-  "instanceStatuses": [{ status: "RUNNING", count: 1 }]
+  id: '081a792c-47e0-4439-924b-2efa9788ae9e',
+  slug: 'nginx',
+  name: 'Nginx',
+  deploymentGroupId: 'e0ea0c02-55cc-45fe-8064-3e5176a59401',
+  connections: ['be227788-74f1-4e5b-a85f-b5c71cbae8d8'],
+  instances: [instance],
+  instanceStatuses: [{ status: 'RUNNING', count: 1 }]
 };
 
 export const deploymentGroup = {
-  "id": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-  "slug": "wordpress-blog-example",
-  "name": "Wordpress Blog Example"
+  id: 'e0ea0c02-55cc-45fe-8064-3e5176a59401',
+  slug: 'wordpress-blog-example',
+  name: 'Wordpress Blog Example'
 };
 
-export const services = [
-  service
-];
+export const services = [service];
 
-export const instances = [
-  instance
-];
+export const instances = [instance];
 
-export const deploymentGroups = [
-  deploymentGroup
-]
+export const deploymentGroups = [deploymentGroup];
diff --git a/packages/cp-frontend/test/unit/mocks/router.js b/packages/cp-frontend/test/unit/mocks/router.js
index 2b0013ab..47dbba36 100644
--- a/packages/cp-frontend/test/unit/mocks/router.js
+++ b/packages/cp-frontend/test/unit/mocks/router.js
@@ -1,7 +1,4 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
-export default ({ children }) =>
-  <MemoryRouter>
-    {children}
-  </MemoryRouter>;
+export default ({ children }) => <MemoryRouter>{children}</MemoryRouter>;
diff --git a/packages/cp-frontend/test/unit/mocks/store.js b/packages/cp-frontend/test/unit/mocks/store.js
index 181065b6..6026ecbc 100644
--- a/packages/cp-frontend/test/unit/mocks/store.js
+++ b/packages/cp-frontend/test/unit/mocks/store.js
@@ -2,7 +2,8 @@ import React from 'react';
 import { client, store } from '@state/store';
 import { ApolloProvider } from 'react-apollo';
 
-export default ({ children }) =>
+export default ({ children }) => (
   <ApolloProvider client={client} store={store}>
     {children}
-  </ApolloProvider>;
+  </ApolloProvider>
+);
diff --git a/packages/cp-frontend/test/unit/mocks/theme.js b/packages/cp-frontend/test/unit/mocks/theme.js
index 7cad5ab3..5b1a2a45 100644
--- a/packages/cp-frontend/test/unit/mocks/theme.js
+++ b/packages/cp-frontend/test/unit/mocks/theme.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { theme } from 'joyent-ui-toolkit';
 
-export default ({ children }) =>
-  <ThemeProvider theme={theme}>
-    {children}
-  </ThemeProvider>;
+export default ({ children }) => (
+  <ThemeProvider theme={theme}>{children}</ThemeProvider>
+);
diff --git a/packages/cp-frontend/test/unit/state/reducers/ui.js b/packages/cp-frontend/test/unit/state/reducers/ui.js
index 36b9726a..0a06001a 100644
--- a/packages/cp-frontend/test/unit/state/reducers/ui.js
+++ b/packages/cp-frontend/test/unit/state/reducers/ui.js
@@ -5,7 +5,6 @@ import {
 import state from '@state/state';
 
 describe('ui reducer', () => {
-
   it('toggleServicesQuickActions shows correctly', () => {
     const uiState = state.ui;
     const expectedUiState = {
@@ -23,17 +22,19 @@ describe('ui reducer', () => {
           }
         }
       }
-    }
-    const action = { payload: {
-      show: true,
-      position: {
-        top: 10,
-        left: 10
-      },
-      service: {
-        id: 'service-id'
+    };
+    const action = {
+      payload: {
+        show: true,
+        position: {
+          top: 10,
+          left: 10
+        },
+        service: {
+          id: 'service-id'
+        }
       }
-    }};
+    };
     const result = _toggleServicesQuickActions(uiState, action);
     expect(result).toEqual(expectedUiState);
   });
@@ -48,8 +49,8 @@ describe('ui reducer', () => {
           show: false
         }
       }
-    }
-    const action = { payload: { show: false }};
+    };
+    const action = { payload: { show: false } };
     const result = _toggleServicesQuickActions(uiState, action);
     expect(result).toEqual(expectedUiState);
   });
@@ -72,18 +73,20 @@ describe('ui reducer', () => {
           type: 'healthy'
         }
       }
-    }
-    const action = { payload: {
-      show: true,
-      position: {
-        top: 10,
-        left: 10
-      },
-      instance: {
-        id: 'instance-id'
-      },
-      type: 'healthy'
-    }};
+    };
+    const action = {
+      payload: {
+        show: true,
+        position: {
+          top: 10,
+          left: 10
+        },
+        instance: {
+          id: 'instance-id'
+        },
+        type: 'healthy'
+      }
+    };
     const result = _toggleInstancesTooltip(uiState, action);
     expect(result).toEqual(expectedUiState);
   });
@@ -98,9 +101,9 @@ describe('ui reducer', () => {
           show: false
         }
       }
-    }
-    const action = { payload: { show: false }};
+    };
+    const action = { payload: { show: false } };
     const result = _toggleInstancesTooltip(uiState, action);
     expect(result).toEqual(expectedUiState);
   });
-})
+});
diff --git a/packages/cp-frontend/test/unit/state/selectors.js b/packages/cp-frontend/test/unit/state/selectors.js
index 31f9c2a2..4ad03098 100644
--- a/packages/cp-frontend/test/unit/state/selectors.js
+++ b/packages/cp-frontend/test/unit/state/selectors.js
@@ -10,48 +10,45 @@ import {
 } from '@state/selectors';
 
 describe('Redux selectors and Apollo helpers', () => {
-
   describe('getInstanceStatuses', () => {
-
     it('gathers instance statuses correctly', () => {
-        const service = {
-          instances: [
-            { status: 'RUNNING' },
-            { status: 'RUNNING' },
-            { status: 'READY' },
-            { status: 'RUNNING' },
-            { status: 'INCOMPLETE' },
-            { status: 'READY' },
-            { status: 'OFFLINE' },
-            { status: 'STOPPED' },
-            { status: 'STOPPED' },
-            { status: 'RUNNING' }
-          ]
-        };
-        const expectedResult = [
-          { status: 'RUNNING', count: 4 },
-          { status: 'READY', count: 2 },
-          { status: 'INCOMPLETE', count: 1 },
-          { status: 'OFFLINE', count: 1 },
-          { status: 'STOPPED', count: 2 }
-        ];
-        const result = getInstanceStatuses(service);
-        expect(result).toEqual(expectedResult);
+      const service = {
+        instances: [
+          { status: 'RUNNING' },
+          { status: 'RUNNING' },
+          { status: 'READY' },
+          { status: 'RUNNING' },
+          { status: 'INCOMPLETE' },
+          { status: 'READY' },
+          { status: 'OFFLINE' },
+          { status: 'STOPPED' },
+          { status: 'STOPPED' },
+          { status: 'RUNNING' }
+        ]
+      };
+      const expectedResult = [
+        { status: 'RUNNING', count: 4 },
+        { status: 'READY', count: 2 },
+        { status: 'INCOMPLETE', count: 1 },
+        { status: 'OFFLINE', count: 1 },
+        { status: 'STOPPED', count: 2 }
+      ];
+      const result = getInstanceStatuses(service);
+      expect(result).toEqual(expectedResult);
     });
 
     it('does not throw a hissy fit if there are no instances', () => {
-        const service = {
-          instances: []
-        };
-        const expectedResult = [];
-        const result = getInstanceStatuses(service);
-        expect(result).toEqual(expectedResult);
+      const service = {
+        instances: []
+      };
+      const expectedResult = [];
+      const result = getInstanceStatuses(service);
+      expect(result).toEqual(expectedResult);
     });
   });
 
   describe('getInstancesActive', () => {
-
-    it('returns true if all instances\' status is active', () => {
+    it("returns true if all instances' status is active", () => {
       const statuses = [
         { status: 'RUNNING' },
         { status: 'READY' },
@@ -63,7 +60,7 @@ describe('Redux selectors and Apollo helpers', () => {
       expect(result).toEqual(expectedResult);
     });
 
-    it('returns false if no instances\' status is active', () => {
+    it("returns false if no instances' status is active", () => {
       const statuses = [
         { status: 'STOPPING' },
         { status: 'FAILED' },
@@ -75,7 +72,7 @@ describe('Redux selectors and Apollo helpers', () => {
       expect(result).toEqual(expectedResult);
     });
 
-    it('returns true if some instances\' status is active', () => {
+    it("returns true if some instances' status is active", () => {
       const statuses = [
         { status: 'STOPPING' },
         { status: 'FAILED' },
@@ -89,7 +86,6 @@ describe('Redux selectors and Apollo helpers', () => {
   });
 
   describe('getInstancesHealthy', () => {
-
     it('returns the number of healthy instances correctly', () => {
       const instances = [
         { healthy: 'HEALTHY' },
@@ -106,39 +102,31 @@ describe('Redux selectors and Apollo helpers', () => {
   });
 
   describe('getService', () => {
-
     it('returns the service decorated with details for display correctly', () => {
-
       const result = getService(nginxService, 0);
       expect(result).toEqual(nginxExpectedResult);
     });
 
     it('returns the consul service decorated with details for display correctly', () => {
-
       const result = getService(consulService, 1);
       expect(result).toEqual(consulExpectedResult);
     });
   });
 
   describe('processServices', () => {
-
     it('returns the services decorated with details for display correctly', () => {
-      const services = [
-        nginxService,
-        consulService
-      ];
-      const expectedResult = [
-        nginxExpectedResult,
-        consulExpectedResult
-      ];
+      const services = [nginxService, consulService];
+      const expectedResult = [nginxExpectedResult, consulExpectedResult];
       const result = processServices(services);
       expect(result).toEqual(expectedResult);
     });
 
     it('removes deleted services', () => {
-      const services = [{
-        status: 'DELETED'
-      }];
+      const services = [
+        {
+          status: 'DELETED'
+        }
+      ];
       const expectedResult = [];
       const result = processServices(services);
       expect(result).toEqual(expectedResult);
@@ -146,16 +134,12 @@ describe('Redux selectors and Apollo helpers', () => {
   });
 
   describe('processServicesForTopology', () => {
-
     it('returns the services decorated with details for display correctly', () => {
       const services = [
         {
           ...nginxService,
           id: 'nginx-service-0',
-          connections: [
-            'consul-service-0',
-            'consul-service-1'
-          ]
+          connections: ['consul-service-0', 'consul-service-1']
         },
         {
           ...nginxService,
@@ -164,9 +148,7 @@ describe('Redux selectors and Apollo helpers', () => {
         {
           ...consulService,
           id: 'consul-service-0',
-          connections: [
-            'consul-service-1'
-          ]
+          connections: ['consul-service-1']
         },
         {
           ...consulService,
@@ -177,10 +159,7 @@ describe('Redux selectors and Apollo helpers', () => {
         {
           ...nginxExpectedResult,
           id: 'nginx-service-0',
-          connections: [
-            'consul-service-0',
-            'consul-service-1'
-          ],
+          connections: ['consul-service-0', 'consul-service-1'],
           connected: true,
           index: 0
         },
@@ -193,9 +172,7 @@ describe('Redux selectors and Apollo helpers', () => {
         {
           ...consulExpectedResult,
           id: 'consul-service-0',
-          connections: [
-            'consul-service-1'
-          ],
+          connections: ['consul-service-1'],
           connected: true,
           index: 2
         },
diff --git a/packages/cp-gql-mock-server/package.json b/packages/cp-gql-mock-server/package.json
index fe4d171f..79d18044 100644
--- a/packages/cp-gql-mock-server/package.json
+++ b/packages/cp-gql-mock-server/package.json
@@ -48,12 +48,8 @@
     "tap-xunit": "^1.7.0"
   },
   "ava": {
-    "files": [
-      "test/*.js"
-    ],
-    "source": [
-      "src/*.js"
-    ],
+    "files": ["test/*.js"],
+    "source": ["src/*.js"],
     "failFast": true
   }
 }
diff --git a/packages/cp-gql-mock-server/src/complex-data.json b/packages/cp-gql-mock-server/src/complex-data.json
index f8237074..4512b16e 100644
--- a/packages/cp-gql-mock-server/src/complex-data.json
+++ b/packages/cp-gql-mock-server/src/complex-data.json
@@ -268,8 +268,10 @@
     },
     {
       "id": "1ad6dd4e-15bd-4ea5-a0db-bf071d7958c4",
-      "slug": "extra service reported by containerpilot: redbaloonservice-https",
-      "name": "Extra service reported by ContainerPilot: RedBaloonService-HTTPS",
+      "slug":
+        "extra service reported by containerpilot: redbaloonservice-https",
+      "name":
+        "Extra service reported by ContainerPilot: RedBaloonService-HTTPS",
       "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f",
       "status": "ACTIVE"
     },
@@ -578,7 +580,8 @@
       "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f",
       "serviceId": "31663285-2b58-4f92-b6f5-3ef34591c3a3",
       "machineId": "c9a49cff-4438-460f-bc46-610bfecbddca",
-      "name": "instance-Extra service reported by ContainerPilot: CartService-HTTPS-0"
+      "name":
+        "instance-Extra service reported by ContainerPilot: CartService-HTTPS-0"
     },
     {
       "id": "instance-31663285-2b58-4f92-b6f5-3ef34591c3a3-1",
@@ -587,7 +590,8 @@
       "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f",
       "serviceId": "31663285-2b58-4f92-b6f5-3ef34591c3a3",
       "machineId": "4252ddb5-e9b4-4d1e-aa53-6e1bdcdeab30",
-      "name": "instance-Extra service reported by ContainerPilot: CartService-HTTPS-1"
+      "name":
+        "instance-Extra service reported by ContainerPilot: CartService-HTTPS-1"
     },
     {
       "id": "instance-31663285-2b58-4f92-b6f5-3ef34591c3a3-2",
@@ -596,7 +600,8 @@
       "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f",
       "serviceId": "31663285-2b58-4f92-b6f5-3ef34591c3a3",
       "machineId": "783c5eb2-2145-4fd2-a22f-274bec3b2ffc",
-      "name": "instance-Extra service reported by ContainerPilot: CartService-HTTPS-2"
+      "name":
+        "instance-Extra service reported by ContainerPilot: CartService-HTTPS-2"
     },
     {
       "id": "instance-31663285-2b58-4f92-b6f5-3ef34591c3a3-3",
@@ -605,7 +610,8 @@
       "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f",
       "serviceId": "31663285-2b58-4f92-b6f5-3ef34591c3a3",
       "machineId": "f8a54a11-93f4-4b0a-9c80-be6542393448",
-      "name": "instance-Extra service reported by ContainerPilot: CartService-HTTPS-3"
+      "name":
+        "instance-Extra service reported by ContainerPilot: CartService-HTTPS-3"
     },
     {
       "id": "instance-3b954132-49fc-405c-9d91-c59b8953d7b8-0",
@@ -1747,7 +1753,8 @@
       "healthy": "UNKNOWN",
       "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f",
       "serviceId": "1ad6dd4e-15bd-4ea5-a0db-bf071d7958c4",
-      "name": "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-0",
+      "name":
+        "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-0",
       "machineId": "20f5bf63-c7d7-4b80-bbe0-63dd744f1b72"
     },
     {
@@ -1756,7 +1763,8 @@
       "healthy": "UNKNOWN",
       "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f",
       "serviceId": "1ad6dd4e-15bd-4ea5-a0db-bf071d7958c4",
-      "name": "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-1",
+      "name":
+        "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-1",
       "machineId": "bf10d972-17e0-4267-908e-4a8184d7c164"
     },
     {
@@ -1765,7 +1773,8 @@
       "healthy": "UNKNOWN",
       "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f",
       "serviceId": "1ad6dd4e-15bd-4ea5-a0db-bf071d7958c4",
-      "name": "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-2",
+      "name":
+        "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-2",
       "machineId": "d7204a39-5005-4925-a2d5-02afbb2457db"
     },
     {
@@ -1774,7 +1783,8 @@
       "healthy": "UNKNOWN",
       "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f",
       "serviceId": "1ad6dd4e-15bd-4ea5-a0db-bf071d7958c4",
-      "name": "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-3",
+      "name":
+        "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-3",
       "machineId": "80dac6f7-e459-4f42-b824-5abdd6f13d41"
     },
     {
@@ -1783,7 +1793,8 @@
       "healthy": "UNKNOWN",
       "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f",
       "serviceId": "1ad6dd4e-15bd-4ea5-a0db-bf071d7958c4",
-      "name": "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-4",
+      "name":
+        "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-4",
       "machineId": "dbb819d5-9df2-48e1-8412-7cd48ca4c186"
     },
     {
diff --git a/packages/cp-gql-mock-server/src/metric-data.json b/packages/cp-gql-mock-server/src/metric-data.json
index 62aae529..fe6f6e81 100644
--- a/packages/cp-gql-mock-server/src/metric-data.json
+++ b/packages/cp-gql-mock-server/src/metric-data.json
@@ -53,4 +53,4 @@
       }
     ]
   }
-]
\ No newline at end of file
+]
diff --git a/packages/cp-gql-mock-server/src/metric-datasets-0.json b/packages/cp-gql-mock-server/src/metric-datasets-0.json
index 6d7b6ab4..39922faf 100644
--- a/packages/cp-gql-mock-server/src/metric-datasets-0.json
+++ b/packages/cp-gql-mock-server/src/metric-datasets-0.json
@@ -34466,4 +34466,4 @@
       }
     ]
   }
-]
\ No newline at end of file
+]
diff --git a/packages/cp-gql-mock-server/src/metric-datasets-1.json b/packages/cp-gql-mock-server/src/metric-datasets-1.json
index 3da18481..70c0873c 100644
--- a/packages/cp-gql-mock-server/src/metric-datasets-1.json
+++ b/packages/cp-gql-mock-server/src/metric-datasets-1.json
@@ -34490,4 +34490,4 @@
       }
     ]
   }
-]
\ No newline at end of file
+]
diff --git a/packages/cp-gql-mock-server/src/metric-datasets-2.json b/packages/cp-gql-mock-server/src/metric-datasets-2.json
index 9d58676d..c57e0ffe 100644
--- a/packages/cp-gql-mock-server/src/metric-datasets-2.json
+++ b/packages/cp-gql-mock-server/src/metric-datasets-2.json
@@ -22993,4 +22993,4 @@
       }
     ]
   }
-]
\ No newline at end of file
+]
diff --git a/packages/cp-gql-mock-server/src/resolvers.js b/packages/cp-gql-mock-server/src/resolvers.js
index f27f8c1b..3e8dbd8f 100644
--- a/packages/cp-gql-mock-server/src/resolvers.js
+++ b/packages/cp-gql-mock-server/src/resolvers.js
@@ -48,17 +48,11 @@ const cleanQuery = (q = {}) => JSON.parse(JSON.stringify(q));
 let metricDataIndex = 0;
 
 const getMetrics = query => {
-  const {
-    names,
-    start,
-    end,
-    instanceId
-  } = query;
+  const { names, start, end, instanceId } = query;
 
   const metrics = names.reduce((metrics, name) => {
-
     // pick one of the three metric data jsons, so there's variety
-    const index = metricDataIndex%metricData.length;
+    const index = metricDataIndex % metricData.length;
     metricDataIndex++;
 
     const md = metricData[index].find(md => md.name === name);
@@ -69,17 +63,20 @@ const getMetrics = query => {
 
     // how many records do we need?
     const duration = e.diff(s); // duration for which we need data
-    const records = Math.floor(duration/15000); // new metric record every 15 secs
+    const records = Math.floor(duration / 15000); // new metric record every 15 secs
 
     const requiredMetrics = [];
     let i = 0;
     const time = moment(s);
     // start at a random point within the dataset for variety
     const randomIndex = Math.round(Math.random() * m.length);
-    while(i < records) {
-      const index = (randomIndex + i)%m.length; // loop if not enough data
+    while (i < records) {
+      const index = (randomIndex + i) % m.length; // loop if not enough data
       const requiredMetric = m[index];
-      requiredMetric.time = time.add(15, 'seconds').utc().format(); // we should have a new record every 15 secs
+      requiredMetric.time = time
+        .add(15, 'seconds')
+        .utc()
+        .format(); // we should have a new record every 15 secs
       requiredMetrics.push(requiredMetric);
       i++;
     }
@@ -90,13 +87,13 @@ const getMetrics = query => {
       start: s.utc().format(),
       end: time.utc().format(), // this will be used by the frontend for the next fetch
       metrics: requiredMetrics
-    }
+    };
     metrics.push(requiredMetricData);
     return metrics;
-    }, []);
+  }, []);
 
   return Promise.resolve(metrics);
-}
+};
 
 const getInstances = query => {
   const metricsResolver = ({ id }) => query =>
@@ -175,13 +172,12 @@ const getServices = query => {
       return ret;
     });
 
-  return Promise.resolve(services)
-    .then((services) => {
-      if(!services || !services.length) {
-        throw Boom.notFound();
-      }
-      return services;
-    });
+  return Promise.resolve(services).then(services => {
+    if (!services || !services.length) {
+      throw Boom.notFound();
+    }
+    return services;
+  });
 };
 
 const getDeploymentGroups = query => {
@@ -199,8 +195,8 @@ const getDeploymentGroups = query => {
 
   return Promise.resolve(
     deploymentGroups.filter(find(cleanQuery(query))).map(addNestedResolvers)
-  ).then((deploymentGroups) => {
-    if(!deploymentGroups || !deploymentGroups.length) {
+  ).then(deploymentGroups => {
+    if (!deploymentGroups || !deploymentGroups.length) {
       throw Boom.notFound();
     }
     return deploymentGroups;
@@ -406,11 +402,16 @@ const updateServiceAndInstancesStatus = (
   instancesStatus
 ) => {
   return Promise.all([
-    getServices({ id: serviceId })/* ,
+    getServices({
+      id: serviceId
+    }) /* ,
     getServices({ parentId: serviceId }) */
   ])
     .then(services => {
-      return services.reduce((services, service) => services.concat(service), [])
+      return services.reduce(
+        (services, service) => services.concat(service),
+        []
+      );
     })
     .then(services => {
       updateServiceStatus(services, serviceStatus);
@@ -431,7 +432,9 @@ const updateServiceAndInstancesStatus = (
     })
     .then(() =>
       Promise.all([
-        getUnfilteredServices({ id: serviceId })/* ,
+        getUnfilteredServices({
+          id: serviceId
+        }) /* ,
         getUnfilteredServices({ parentId: serviceId }) */
       ])
     )
@@ -536,12 +539,7 @@ const parseEnvVars = (str = '') =>
 const findEnvInterpolation = (str = '') =>
   uniq(str.match(INTERPOLATE_REGEX).map(name => name.replace(/^\$/, '')));
 
-const config = ({
-  environment = '',
-  files = [],
-  raw = '',
-  _plain = false
-}) => {
+const config = ({ environment = '', files = [], raw = '', _plain = false }) => {
   const interpolatableNames = findEnvInterpolation(raw);
   const interpolatableEnv = parseEnvVars(environment);
 
@@ -588,11 +586,10 @@ const config = ({
         config: Object.assign(service.config, {
           id: hasha(JSON.stringify(service.config)),
           environment: Object.keys(service.config.environment).map(name => ({
-              name,
-              id: hasha(JSON.stringify(service.config.environment[name])),
-              value: service.config.environment[name]
-            })
-          )
+            name,
+            id: hasha(JSON.stringify(service.config.environment[name])),
+            value: service.config.environment[name]
+          }))
         })
       })
     );
diff --git a/packages/cp-gql-schema/schema.gql b/packages/cp-gql-schema/schema.gql
index e5a05ce5..4bfdfda5 100644
--- a/packages/cp-gql-schema/schema.gql
+++ b/packages/cp-gql-schema/schema.gql
@@ -203,7 +203,6 @@ type Datacenter {
   region: String!
 }
 
-
 # we probably wont use some of these queries or arguments
 # but this way we expose the entire db through gql
 type Query {
@@ -265,7 +264,13 @@ type Query {
   ): [Service]
   importableDeploymentGroups: [DeploymentGroup]
   # start and end should be .toISOString() date strings
-  metrics(deploymentGroupId: ID!, names: [MetricName]!, instances: [ID]!, start: String!, end: String!): [InstanceMetric]
+  metrics(
+    deploymentGroupId: ID!
+    names: [MetricName]!
+    instances: [ID]!
+    start: String!
+    end: String!
+  ): [InstanceMetric]
 }
 
 type Mutation {
diff --git a/packages/normalized-styled-components/src/index.js b/packages/normalized-styled-components/src/index.js
index 0cd671fe..6fd45b8d 100644
--- a/packages/normalized-styled-components/src/index.js
+++ b/packages/normalized-styled-components/src/index.js
@@ -152,17 +152,17 @@ export const Button = styled.button`
   appearance: button;
 
   &::-moz-focus-inner,
-  &[type="button"]::-moz-focus-inner,
-  &[type="reset"]::-moz-focus-inner,
-  &[type="submit"]::-moz-focus-inner {
+  &[type='button']::-moz-focus-inner,
+  &[type='reset']::-moz-focus-inner,
+  &[type='submit']::-moz-focus-inner {
     border-style: none;
     padding: 0;
   }
 
   &:-moz-focusring,
-  &[type="button"]:-moz-focusring,
-  &[type="reset"]:-moz-focusring,
-  &[type="submit"]:-moz-focusring {
+  &[type='button']:-moz-focusring,
+  &[type='reset']:-moz-focusring,
+  &[type='submit']:-moz-focusring {
     outline: ${remcalc(1)} dotted ButtonText;
   }
 `;
@@ -174,24 +174,24 @@ export const Input = styled.input`
   margin: 0;
   overflow: visible;
 
-  &[type="checkbox"],
-  &[type="radio"] {
+  &[type='checkbox'],
+  &[type='radio'] {
     box-sizing: border-box;
     padding: 0;
   }
 
-  &[type="number"]::-webkit-inner-spin-button,
-  &[type="number"]::-webkit-outer-spin-button {
+  &[type='number']::-webkit-inner-spin-button,
+  &[type='number']::-webkit-outer-spin-button {
     height: auto;
   }
 
-  &[type="search"] {
+  &[type='search'] {
     appearance: textfield;
     outline-offset: ${remcalc(-2)};
   }
 
-  &[type="search"]::-webkit-search-cancel-button,
-  &[type="search"]::-webkit-search-decoration {
+  &[type='search']::-webkit-search-cancel-button,
+  &[type='search']::-webkit-search-decoration {
     appearance: none;
   }
 
diff --git a/packages/ui-toolkit/src/anchor/index.js b/packages/ui-toolkit/src/anchor/index.js
index e58e220c..09868c51 100644
--- a/packages/ui-toolkit/src/anchor/index.js
+++ b/packages/ui-toolkit/src/anchor/index.js
@@ -36,11 +36,7 @@ const Anchor = ({ children, ...rest }) => {
   const Views = [() => (to ? StyledLink : null), () => StyledAnchor];
   const View = Views.reduce((sel, view) => (sel ? sel : view()), null);
 
-  return (
-    <View {...rest}>
-      {children}
-    </View>
-  );
+  return <View {...rest}>{children}</View>;
 };
 
 Anchor.propTypes = {
diff --git a/packages/ui-toolkit/src/base/global.js b/packages/ui-toolkit/src/base/global.js
index a375f954..934e122c 100644
--- a/packages/ui-toolkit/src/base/global.js
+++ b/packages/ui-toolkit/src/base/global.js
@@ -21,6 +21,6 @@ export default css`
     margin: 0;
     padding: 0;
     background: ${theme.background};
-    font-family: 'Libre Franklin'
+    font-family: 'Libre Franklin';
   }
 `;
diff --git a/packages/ui-toolkit/src/basealign/index.js b/packages/ui-toolkit/src/basealign/index.js
index 013e2922..01c19cce 100644
--- a/packages/ui-toolkit/src/basealign/index.js
+++ b/packages/ui-toolkit/src/basealign/index.js
@@ -18,4 +18,6 @@ export default Component =>
     ? Component.extend`
         ${alignsFromProps};
       `
-    : styled(Component)`${alignsFromProps}`;
+    : styled(Component)`
+        ${alignsFromProps};
+      `;
diff --git a/packages/ui-toolkit/src/baseline/index.js b/packages/ui-toolkit/src/baseline/index.js
index c0db86c2..9f40f9b9 100644
--- a/packages/ui-toolkit/src/baseline/index.js
+++ b/packages/ui-toolkit/src/baseline/index.js
@@ -33,4 +33,6 @@ export default Component =>
     ? Component.extend`
         ${unitsFromProps};
       `
-    : styled(Component)`${unitsFromProps}`;
+    : styled(Component)`
+        ${unitsFromProps};
+      `;
diff --git a/packages/ui-toolkit/src/boxes/index.js b/packages/ui-toolkit/src/boxes/index.js
index ec9a52cb..f0f27dfa 100644
--- a/packages/ui-toolkit/src/boxes/index.js
+++ b/packages/ui-toolkit/src/boxes/index.js
@@ -11,9 +11,9 @@ export const tooltipShadow = `0 ${remcalc(2)} ${remcalc(6)} ${remcalc(
 export const modalShadow = `0 0 ${remcalc(6)} ${remcalc(1)} rgba(0, 0, 0, 0.1)`;
 
 export const border = {
-  checked: css`${remcalc(1)} solid ${props => props.theme.primary}`,
-  unchecked: css`${remcalc(1)} solid ${props => props.theme.grey}`,
-  confirmed: css`${remcalc(1)} solid ${props => props.theme.grey}`,
-  error: css`${remcalc(1)} solid ${props => props.theme.red}`,
-  secondary: css`${remcalc(1)} solid ${props => props.theme.secondaryActive}`,
+  checked: css`${remcalc(1)} solid ${props => props.theme.primary};`,
+  unchecked: css`${remcalc(1)} solid ${props => props.theme.grey};`,
+  confirmed: css`${remcalc(1)} solid ${props => props.theme.grey};`,
+  error: css`${remcalc(1)} solid ${props => props.theme.red};`,
+  secondary: css`${remcalc(1)} solid ${props => props.theme.secondaryActive};`
 };
diff --git a/packages/ui-toolkit/src/breadcrumb/index.js b/packages/ui-toolkit/src/breadcrumb/index.js
index 4412acaa..ae4ce6d9 100644
--- a/packages/ui-toolkit/src/breadcrumb/index.js
+++ b/packages/ui-toolkit/src/breadcrumb/index.js
@@ -4,9 +4,10 @@ import { Row } from 'react-styled-flexboxgrid';
 /**
  * @example ./usage.md
  */
-export default ({ children, ...rest }) =>
+export default ({ children, ...rest }) => (
   <Row name="breadcrum" {...rest}>
     {children}
-  </Row>;
+  </Row>
+);
 
 export { default as Item } from './item';
diff --git a/packages/ui-toolkit/src/breadcrumb/item.js b/packages/ui-toolkit/src/breadcrumb/item.js
index 4c474d0d..3902fe42 100644
--- a/packages/ui-toolkit/src/breadcrumb/item.js
+++ b/packages/ui-toolkit/src/breadcrumb/item.js
@@ -21,10 +21,11 @@ const Arrow = styled.div`
   margin: ${remcalc(3)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)};
 `;
 
-export default ({ children, ...rest }) =>
+export default ({ children, ...rest }) => (
   <div>
     <Name name="breadcrum-item" {...rest}>
       {children}
     </Name>
     <Arrow />
-  </div>;
+  </div>
+);
diff --git a/packages/ui-toolkit/src/breakpoints/index.js b/packages/ui-toolkit/src/breakpoints/index.js
index b9d4fede..4bedfdda 100644
--- a/packages/ui-toolkit/src/breakpoints/index.js
+++ b/packages/ui-toolkit/src/breakpoints/index.js
@@ -41,7 +41,7 @@ const screens = {
 
 const breakpoint = label => (...args) => css`
   @media ${screens[label]} {
-    ${css(...args)}
+    ${css(...args)};
   }
 `;
 
diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js
index 1f413794..dc5639dc 100644
--- a/packages/ui-toolkit/src/button/index.js
+++ b/packages/ui-toolkit/src/button/index.js
@@ -180,15 +180,13 @@ const Button = props => {
 
   const View = Views.reduce((sel, view) => (sel ? sel : view()), null);
 
-  const children = loading
-    ? <StatusLoader secondary={!secondary} tertiary={tertiary} />
-    : props.children;
-
-  return (
-    <View {...props}>
-      {children}
-    </View>
+  const children = loading ? (
+    <StatusLoader secondary={!secondary} tertiary={tertiary} />
+  ) : (
+    props.children
   );
+
+  return <View {...props}>{children}</View>;
 };
 
 Button.propTypes = {
diff --git a/packages/ui-toolkit/src/card/card.js b/packages/ui-toolkit/src/card/card.js
index a978a501..e731c522 100644
--- a/packages/ui-toolkit/src/card/card.js
+++ b/packages/ui-toolkit/src/card/card.js
@@ -77,11 +77,7 @@ const Card = ({
     );
   };
 
-  return (
-    <Subscriber channel="card">
-      {render}
-    </Subscriber>
-  );
+  return <Subscriber channel="card">{render}</Subscriber>;
 };
 
 Card.propTypes = {
diff --git a/packages/ui-toolkit/src/card/description.js b/packages/ui-toolkit/src/card/description.js
index f8ebd53c..88c9f651 100644
--- a/packages/ui-toolkit/src/card/description.js
+++ b/packages/ui-toolkit/src/card/description.js
@@ -25,23 +25,18 @@ const InnerDescription = styled.div`
 `;
 
 const Description = ({ children, ...rest }) => {
-  const render = ({ collapsed = false }) =>
+  const render = ({ collapsed = false }) => (
     <StyledTitle
       collapsed={collapsed}
       name="card-description"
       xs={collapsed ? 6 : 12}
       {...rest}
     >
-      <InnerDescription collapsed={collapsed}>
-        {children}
-      </InnerDescription>
-    </StyledTitle>;
-
-  return (
-    <Subscriber channel="card">
-      {render}
-    </Subscriber>
+      <InnerDescription collapsed={collapsed}>{children}</InnerDescription>
+    </StyledTitle>
   );
+
+  return <Subscriber channel="card">{render}</Subscriber>;
 };
 
 Description.propTypes = {
diff --git a/packages/ui-toolkit/src/card/group-view.js b/packages/ui-toolkit/src/card/group-view.js
index a7ede584..9f30e71c 100644
--- a/packages/ui-toolkit/src/card/group-view.js
+++ b/packages/ui-toolkit/src/card/group-view.js
@@ -9,9 +9,8 @@ const StyledView = View.extend`
   background-color: ${props => props.grey};
 `;
 
-const GroupView = ({ children, ...rest }) =>
-  <StyledView {...rest}>
-    {children}
-  </StyledView>;
+const GroupView = ({ children, ...rest }) => (
+  <StyledView {...rest}>{children}</StyledView>
+);
 
 export default Baseline(GroupView);
diff --git a/packages/ui-toolkit/src/card/header.js b/packages/ui-toolkit/src/card/header.js
index 8f2b6e3a..3c8336fe 100644
--- a/packages/ui-toolkit/src/card/header.js
+++ b/packages/ui-toolkit/src/card/header.js
@@ -47,11 +47,7 @@ const Header = ({ children, ...rest }) => {
     );
   };
 
-  return (
-    <Subscriber channel="card">
-      {render}
-    </Subscriber>
-  );
+  return <Subscriber channel="card">{render}</Subscriber>;
 };
 
 Header.propTypes = {
diff --git a/packages/ui-toolkit/src/card/meta.js b/packages/ui-toolkit/src/card/meta.js
index 6bb66c21..633e3049 100644
--- a/packages/ui-toolkit/src/card/meta.js
+++ b/packages/ui-toolkit/src/card/meta.js
@@ -35,24 +35,20 @@ const Meta = ({ children, ...rest }) => {
         headed={headed}
         {...rest}
       >
-        <InnerRow collapsed={collapsed}>
-          {children}
-        </InnerRow>
+        <InnerRow collapsed={collapsed}>{children}</InnerRow>
       </Col>
     );
 
-    return fromHeader
-      ? <View collapsed fromHeader>
-          {meta}
-        </View>
-      : meta;
+    return fromHeader ? (
+      <View collapsed fromHeader>
+        {meta}
+      </View>
+    ) : (
+      meta
+    );
   };
 
-  return (
-    <Subscriber channel="card">
-      {render}
-    </Subscriber>
-  );
+  return <Subscriber channel="card">{render}</Subscriber>;
 };
 
 Meta.propTypes = {
diff --git a/packages/ui-toolkit/src/card/options.js b/packages/ui-toolkit/src/card/options.js
index 86a9863f..10be1134 100644
--- a/packages/ui-toolkit/src/card/options.js
+++ b/packages/ui-toolkit/src/card/options.js
@@ -66,7 +66,7 @@ const StyledButton = Button.extend`
     &:active:focus {
       background-color: ${props => props.theme.grey};
     }
-  `}
+  `};
 `;
 
 const StyledContainer = styled.div`
@@ -92,11 +92,7 @@ const StyledCircle = styled.div`
 `;
 
 const Options = ({ children, ...rest }) => {
-  const render = ({
-    fromHeader = false,
-    collapsed = false,
-    active = true
-  }) =>
+  const render = ({ fromHeader = false, collapsed = false, active = true }) => (
     <StyledNav active={active} fromHeader={fromHeader} name="card-options">
       <StyledButton
         secondary={!fromHeader}
@@ -111,13 +107,10 @@ const Options = ({ children, ...rest }) => {
           <StyledCircle active={active} secondary={!fromHeader} />
         </StyledContainer>
       </StyledButton>
-    </StyledNav>;
-
-  return (
-    <Subscriber channel="card">
-      {render}
-    </Subscriber>
+    </StyledNav>
   );
+
+  return <Subscriber channel="card">{render}</Subscriber>;
 };
 
 Options.propTypes = {
diff --git a/packages/ui-toolkit/src/card/outlet.js b/packages/ui-toolkit/src/card/outlet.js
index 26af3bcc..79fec22a 100644
--- a/packages/ui-toolkit/src/card/outlet.js
+++ b/packages/ui-toolkit/src/card/outlet.js
@@ -26,7 +26,7 @@ const StyledCol = Col.extend`
 `;
 
 const Outlet = ({ children, ...rest }) => {
-  const render = ({ active = true, collapsed = false }) =>
+  const render = ({ active = true, collapsed = false }) => (
     <StyledCol
       name="card-outlet"
       active={active}
@@ -35,13 +35,10 @@ const Outlet = ({ children, ...rest }) => {
       {...rest}
     >
       {children}
-    </StyledCol>;
-
-  return (
-    <Subscriber channel="card">
-      {render}
-    </Subscriber>
+    </StyledCol>
   );
+
+  return <Subscriber channel="card">{render}</Subscriber>;
 };
 
 Outlet.propTypes = {
diff --git a/packages/ui-toolkit/src/card/subtitle.js b/packages/ui-toolkit/src/card/subtitle.js
index 963db1a1..f4457555 100644
--- a/packages/ui-toolkit/src/card/subtitle.js
+++ b/packages/ui-toolkit/src/card/subtitle.js
@@ -43,11 +43,7 @@ const StyledTitle = Title.extend`
 `;
 
 const Subtitle = ({ children, ...props }) => {
-  const render = ({
-    active = true,
-    fromHeader = false,
-    collapsed = false
-  }) =>
+  const render = ({ active = true, fromHeader = false, collapsed = false }) => (
     <StyledTitle
       name="card-subtitle"
       fromHeader={fromHeader}
@@ -58,13 +54,10 @@ const Subtitle = ({ children, ...props }) => {
       <Span fromHeader={fromHeader} collapsed={collapsed}>
         {children}
       </Span>
-    </StyledTitle>;
-
-  return (
-    <Subscriber channel="card">
-      {render}
-    </Subscriber>
+    </StyledTitle>
   );
+
+  return <Subscriber channel="card">{render}</Subscriber>;
 };
 
 Subtitle.propTypes = {
diff --git a/packages/ui-toolkit/src/card/title.js b/packages/ui-toolkit/src/card/title.js
index 49e35a37..7dec5a1f 100644
--- a/packages/ui-toolkit/src/card/title.js
+++ b/packages/ui-toolkit/src/card/title.js
@@ -50,17 +50,9 @@ const Span = styled.span`
 `;
 
 const Title = ({ children, ...rest }) => {
-  const _children = isString(children)
-    ? <Span>
-        {children}
-      </Span>
-    : children;
+  const _children = isString(children) ? <Span>{children}</Span> : children;
 
-  const render = ({
-    collapsed = false,
-    active = true,
-    fromHeader = false
-  }) =>
+  const render = ({ collapsed = false, active = true, fromHeader = false }) => (
     <Container
       collapsed={collapsed}
       fromHeader={fromHeader}
@@ -68,16 +60,13 @@ const Title = ({ children, ...rest }) => {
       name="card-title"
       xs={collapsed ? 6 : 12}
       {...rest}
-      name='container'
+      name="container"
     >
       {_children}
-    </Container>;
-
-  return (
-    <Subscriber channel="card">
-      {render}
-    </Subscriber>
+    </Container>
   );
+
+  return <Subscriber channel="card">{render}</Subscriber>;
 };
 
 Title.propTypes = {
diff --git a/packages/ui-toolkit/src/card/view.js b/packages/ui-toolkit/src/card/view.js
index 566dc247..4838ce1f 100644
--- a/packages/ui-toolkit/src/card/view.js
+++ b/packages/ui-toolkit/src/card/view.js
@@ -36,18 +36,14 @@ const View = ({ children, ...rest }) => {
 
     const hide = newValue.headed && !newValue.fromHeader && newValue.collapsed;
 
-    return hide
-      ? null
-      : <StyledView name="card-view" {...newValue}>
-          {children}
-        </StyledView>;
+    return hide ? null : (
+      <StyledView name="card-view" {...newValue}>
+        {children}
+      </StyledView>
+    );
   };
 
-  return (
-    <Subscriber channel="card">
-      {render}
-    </Subscriber>
-  );
+  return <Subscriber channel="card">{render}</Subscriber>;
 };
 
 View.propTypes = {
diff --git a/packages/ui-toolkit/src/chevron/index.js b/packages/ui-toolkit/src/chevron/index.js
index fc82ef75..5b1a20e4 100644
--- a/packages/ui-toolkit/src/chevron/index.js
+++ b/packages/ui-toolkit/src/chevron/index.js
@@ -20,8 +20,7 @@ export default P.extend`
     transform: rotate(180deg);
   `};
 
-
   &:before {
-    content: "\\003e";
+    content: '\\003e';
   }
 `;
diff --git a/packages/ui-toolkit/src/close-button/index.js b/packages/ui-toolkit/src/close-button/index.js
index 22321fae..63d3b561 100644
--- a/packages/ui-toolkit/src/close-button/index.js
+++ b/packages/ui-toolkit/src/close-button/index.js
@@ -25,9 +25,10 @@ const StyledCloseButton = Button.extend`
 /**
  * @example ./usage.md
  */
-const CloseButton = props =>
+const CloseButton = props => (
   <StyledCloseButton {...props}>
     <CloseIcon />
-  </StyledCloseButton>;
+  </StyledCloseButton>
+);
 
 export default CloseButton;
diff --git a/packages/ui-toolkit/src/dropdown/index.js b/packages/ui-toolkit/src/dropdown/index.js
index dcbddbf0..b8822782 100644
--- a/packages/ui-toolkit/src/dropdown/index.js
+++ b/packages/ui-toolkit/src/dropdown/index.js
@@ -22,7 +22,8 @@ const StyledSelectList = styled(Tooltip)`
     padding: 0;
     list-style-type: none;
   }
-  ul:after, ul:before {
+  ul:after,
+  ul:before {
     left: 97%;
   }
 `;
@@ -32,7 +33,7 @@ const StyledSelect = styled(Select)`
     option {
       display: none;
     }
-  `}
+  `};
 `;
 
 const StyledArrowIcon = styled(ArrowIcon)`
@@ -101,17 +102,17 @@ class Dropdown extends Component {
           <option disabled value={placeholder}>
             {placeholder}
           </option>
-          {data.map((val, index) =>
+          {data.map((val, index) => (
             <option value={val} key={index}>
               {val}
             </option>
-          )}
+          ))}
         </StyledSelect>
         <StyledArrowIcon onClick={this.toggleDropdown} />
-        {this.state.isDroppedDown &&
+        {this.state.isDroppedDown && (
           <StyledSelectList>
             <ul>
-              {data.map((val, index) =>
+              {data.map((val, index) => (
                 <li>
                   <DropdownItem
                     key={index}
@@ -121,9 +122,10 @@ class Dropdown extends Component {
                     {val}
                   </DropdownItem>
                 </li>
-              )}
+              ))}
             </ul>
-          </StyledSelectList>}
+          </StyledSelectList>
+        )}
       </Container>
     );
   }
diff --git a/packages/ui-toolkit/src/form/base/input.js b/packages/ui-toolkit/src/form/base/input.js
index 330e53aa..0e502b15 100644
--- a/packages/ui-toolkit/src/form/base/input.js
+++ b/packages/ui-toolkit/src/form/base/input.js
@@ -86,11 +86,7 @@ const BaseInput = Component => props => {
     );
   };
 
-  return (
-    <Subscriber channel="input-group">
-      {render}
-    </Subscriber>
-  );
+  return <Subscriber channel="input-group">{render}</Subscriber>;
 };
 
 BaseInput.propTypes = {
diff --git a/packages/ui-toolkit/src/form/base/toggle.js b/packages/ui-toolkit/src/form/base/toggle.js
index 170288fe..cde28564 100644
--- a/packages/ui-toolkit/src/form/base/toggle.js
+++ b/packages/ui-toolkit/src/form/base/toggle.js
@@ -137,12 +137,14 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
         </InnerContainer>
       );
 
-      const el = OuterContainer
-        ? <OuterContainer>
-            {toggle}
-            {children}
-          </OuterContainer>
-        : toggle;
+      const el = OuterContainer ? (
+        <OuterContainer>
+          {toggle}
+          {children}
+        </OuterContainer>
+      ) : (
+        toggle
+      );
 
       return (
         <Broadcast channel="input-group" value={newValue}>
@@ -151,11 +153,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
       );
     };
 
-    return (
-      <Subscriber channel="input-group">
-        {render}
-      </Subscriber>
-    );
+    return <Subscriber channel="input-group">{render}</Subscriber>;
   });
 
 export default ToggleBase;
diff --git a/packages/ui-toolkit/src/form/checkbox.js b/packages/ui-toolkit/src/form/checkbox.js
index 7d247ac7..93417f87 100644
--- a/packages/ui-toolkit/src/form/checkbox.js
+++ b/packages/ui-toolkit/src/form/checkbox.js
@@ -14,7 +14,6 @@ const Checkbox = Baseline(
 /**
  * @example ./usage-checkbox.md
  */
-export default ({ children, ...rest }) =>
-  <Checkbox {...rest}>
-    {children}
-  </Checkbox>;
+export default ({ children, ...rest }) => (
+  <Checkbox {...rest}>{children}</Checkbox>
+);
diff --git a/packages/ui-toolkit/src/form/group.js b/packages/ui-toolkit/src/form/group.js
index 46c16416..dd1fb197 100644
--- a/packages/ui-toolkit/src/form/group.js
+++ b/packages/ui-toolkit/src/form/group.js
@@ -25,9 +25,7 @@ class FormGroup extends Component {
     return (
       <Fieldset className={className} style={style}>
         <Broadcast channel="input-group" value={value}>
-          <div>
-            {children}
-          </div>
+          <div>{children}</div>
         </Broadcast>
       </Fieldset>
     );
diff --git a/packages/ui-toolkit/src/form/input.js b/packages/ui-toolkit/src/form/input.js
index 77de64f7..2a872aa4 100644
--- a/packages/ui-toolkit/src/form/input.js
+++ b/packages/ui-toolkit/src/form/input.js
@@ -7,7 +7,4 @@ const Input = Baseline(BaseInput(Stylable('input')));
 /**
  * @example ./usage-input.md
  */
-export default ({ children, ...rest }) =>
-  <Input {...rest}>
-    {children}
-  </Input>;
+export default ({ children, ...rest }) => <Input {...rest}>{children}</Input>;
diff --git a/packages/ui-toolkit/src/form/meta.js b/packages/ui-toolkit/src/form/meta.js
index 7e4fbbb9..563c8adc 100644
--- a/packages/ui-toolkit/src/form/meta.js
+++ b/packages/ui-toolkit/src/form/meta.js
@@ -63,11 +63,7 @@ const Meta = props => {
     );
   };
 
-  return (
-    <Subscriber channel="input-group">
-      {render}
-    </Subscriber>
-  );
+  return <Subscriber channel="input-group">{render}</Subscriber>;
 };
 
 Meta.propTypes = {
diff --git a/packages/ui-toolkit/src/form/number-input.js b/packages/ui-toolkit/src/form/number-input.js
index 83bf0160..e0cf55a1 100644
--- a/packages/ui-toolkit/src/form/number-input.js
+++ b/packages/ui-toolkit/src/form/number-input.js
@@ -48,11 +48,7 @@ const NumberInput = BaseInput(props => {
     );
   };
 
-  return (
-    <Subscriber channel="input-group">
-      {render}
-    </Subscriber>
-  );
+  return <Subscriber channel="input-group">{render}</Subscriber>;
 });
 
 NumberInput.propTypes = {
diff --git a/packages/ui-toolkit/src/form/radio.js b/packages/ui-toolkit/src/form/radio.js
index 6967805e..084c33be 100644
--- a/packages/ui-toolkit/src/form/radio.js
+++ b/packages/ui-toolkit/src/form/radio.js
@@ -16,11 +16,9 @@ const Ul = styled.ul`
   padding: 0;
 `;
 
-const RadioItem = BaseInput(({ children, id, ...rest }) =>
-  <Li {...rest}>
-    {children}
-  </Li>
-);
+const RadioItem = BaseInput(({ children, id, ...rest }) => (
+  <Li {...rest}>{children}</Li>
+));
 
 const Radio = Baseline(
   BaseToggle({
@@ -32,9 +30,6 @@ const Radio = Baseline(
 /**
  * @example ./usage-radio.md
  */
-export default ({ children, ...rest }) =>
-  <Radio {...rest}>
-    {children}
-  </Radio>;
+export default ({ children, ...rest }) => <Radio {...rest}>{children}</Radio>;
 
 export const RadioList = Baseline(Ul);
diff --git a/packages/ui-toolkit/src/form/select.js b/packages/ui-toolkit/src/form/select.js
index 08a197b8..88ecd50a 100644
--- a/packages/ui-toolkit/src/form/select.js
+++ b/packages/ui-toolkit/src/form/select.js
@@ -7,7 +7,4 @@ const Select = Baseline(BaseInput(Stylable('select')));
 /**
  * @example ./usage-select.md
  */
-export default ({ children, ...rest }) =>
-  <Select {...rest}>
-    {children}
-  </Select>;
+export default ({ children, ...rest }) => <Select {...rest}>{children}</Select>;
diff --git a/packages/ui-toolkit/src/form/toggle.js b/packages/ui-toolkit/src/form/toggle.js
index 832b0327..6977cd5e 100644
--- a/packages/ui-toolkit/src/form/toggle.js
+++ b/packages/ui-toolkit/src/form/toggle.js
@@ -120,20 +120,15 @@ const BaseToggle = BaseInput(({ children, ...rest }) => {
     );
   };
 
-  return (
-    <Subscriber channel="input-group">
-      {render}
-    </Subscriber>
-  );
+  return <Subscriber channel="input-group">{render}</Subscriber>;
 });
 
 /**
  * @example ./usage-toggle.md
  */
-const Toggle = ({ children, ...rest }) =>
-  <BaseToggle {...rest}>
-    {children}
-  </BaseToggle>;
+const Toggle = ({ children, ...rest }) => (
+  <BaseToggle {...rest}>{children}</BaseToggle>
+);
 
 export default Baseline(Toggle);
 
diff --git a/packages/ui-toolkit/src/header/brand.js b/packages/ui-toolkit/src/header/brand.js
index 11614c80..ba021f38 100644
--- a/packages/ui-toolkit/src/header/brand.js
+++ b/packages/ui-toolkit/src/header/brand.js
@@ -19,9 +19,8 @@ const Box = styled.div`
   padding: ${remcalc(15)} 0;
 `;
 
-export default ({ children, ...rest }) =>
+export default ({ children, ...rest }) => (
   <Box {...rest}>
-    <Brand>
-      {children}
-    </Brand>
-  </Box>;
+    <Brand>{children}</Brand>
+  </Box>
+);
diff --git a/packages/ui-toolkit/src/header/index.js b/packages/ui-toolkit/src/header/index.js
index acd58f78..f666c058 100644
--- a/packages/ui-toolkit/src/header/index.js
+++ b/packages/ui-toolkit/src/header/index.js
@@ -20,10 +20,7 @@ const Header = styled.div`
 /**
  * @example ./usage.md
  */
-export default ({ children, ...rest }) =>
-  <Header {...rest}>
-    {children}
-  </Header>;
+export default ({ children, ...rest }) => <Header {...rest}>{children}</Header>;
 
 export { default as Brand } from './brand';
 export { default as Item } from './item';
diff --git a/packages/ui-toolkit/src/header/item.js b/packages/ui-toolkit/src/header/item.js
index 97709f65..5c25c2b9 100644
--- a/packages/ui-toolkit/src/header/item.js
+++ b/packages/ui-toolkit/src/header/item.js
@@ -23,9 +23,8 @@ const Box = styled.div`
   max-width: ${remcalc(100)};
 `;
 
-export default ({ children, ...rest }) =>
+export default ({ children, ...rest }) => (
   <Box {...rest}>
-    <Text>
-      {children}
-    </Text>
-  </Box>;
+    <Text>{children}</Text>
+  </Box>
+);
diff --git a/packages/ui-toolkit/src/icon-button/index.js b/packages/ui-toolkit/src/icon-button/index.js
index 620668ca..b07a0e37 100644
--- a/packages/ui-toolkit/src/icon-button/index.js
+++ b/packages/ui-toolkit/src/icon-button/index.js
@@ -99,7 +99,7 @@ const StyledAnchor = A.extend`
 
 const StyledLink = styled(Link)`
   display: inline-block;
-  ${style}
+  ${style};
 `;
 
 /**
@@ -116,11 +116,7 @@ const IconButton = props => {
 
   const View = Views.reduce((sel, view) => (sel ? sel : view()), null);
 
-  return (
-    <View {...props}>
-      {children}
-    </View>
-  );
+  return <View {...props}>{children}</View>;
 };
 
 IconButton.propTypes = {
diff --git a/packages/ui-toolkit/src/icons/healthy.js b/packages/ui-toolkit/src/icons/healthy.js
index 4ba6a62a..4ba2709b 100644
--- a/packages/ui-toolkit/src/icons/healthy.js
+++ b/packages/ui-toolkit/src/icons/healthy.js
@@ -6,8 +6,10 @@ import styled from 'styled-components';
 import HealthyIcon from './svg/icon_healthy.svg';
 
 const StyledHealthyIcon = styled(HealthyIcon)`
-  fill: ${props => !props.healthy || props.healthy === 'HEALTHY'
-    ? props.theme.green : props.theme.orange};
+  fill: ${props =>
+    !props.healthy || props.healthy === 'HEALTHY'
+      ? props.theme.green
+      : props.theme.orange};
 `;
 
 export default Baseline(StyledHealthyIcon);
diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js
index 6ee24ad8..e5473179 100644
--- a/packages/ui-toolkit/src/index.js
+++ b/packages/ui-toolkit/src/index.js
@@ -17,7 +17,13 @@ export { default as Chevron } from './chevron';
 export { default as CloseButton } from './close-button';
 export { default as Divider } from './divider';
 export { default as IconButton } from './icon-button';
-export { Tooltip, TooltipButton, TooltipDivider, TooltipList, TooltipLabel } from './tooltip';
+export {
+  Tooltip,
+  TooltipButton,
+  TooltipDivider,
+  TooltipList,
+  TooltipLabel
+} from './tooltip';
 export { Dropdown } from './dropdown';
 export { default as StatusLoader } from './status-loader';
 export { default as Message } from './message';
@@ -108,6 +114,4 @@ export {
   BinIcon
 } from './icons';
 
-export {
-  MetricGraph
-} from './metrics';
+export { MetricGraph } from './metrics';
diff --git a/packages/ui-toolkit/src/message/index.js b/packages/ui-toolkit/src/message/index.js
index 38380cf5..3d5bc23f 100644
--- a/packages/ui-toolkit/src/message/index.js
+++ b/packages/ui-toolkit/src/message/index.js
@@ -50,24 +50,18 @@ const StyledClose = styled(CloseButton)`
 `;
 
 const Message = ({ title, message, onCloseClick, type = 'MESSAGE' }) => {
-  const renderTitle = title
-    ? <StyledTitle>
-        {title}
-      </StyledTitle>
-    : null;
+  const renderTitle = title ? <StyledTitle>{title}</StyledTitle> : null;
 
-  const renderClose = onCloseClick
-    ? <StyledClose onClick={onCloseClick} />
-    : null;
+  const renderClose = onCloseClick ? (
+    <StyledClose onClick={onCloseClick} />
+  ) : null;
 
   return (
     <StyledContainer>
       <StyledColor type={type} />
       <StyledMessageContainer>
         {renderTitle}
-        <StyledMessage>
-          {message}
-        </StyledMessage>
+        <StyledMessage>{message}</StyledMessage>
       </StyledMessageContainer>
       {renderClose}
     </StyledContainer>
diff --git a/packages/ui-toolkit/src/metrics/graph.js b/packages/ui-toolkit/src/metrics/graph.js
index c53839c8..3518f8c3 100644
--- a/packages/ui-toolkit/src/metrics/graph.js
+++ b/packages/ui-toolkit/src/metrics/graph.js
@@ -17,62 +17,60 @@ const chartColors = [
 
 // TODO DISPLAY TIMES SHOULD NOT BE UTC
 class MetricGraph extends Component {
-
   componentDidMount() {
-
-    const {
-      xMin,
-      xMax,
-      datasets
-    } = this.processProps(this.props);
+    const { xMin, xMax, datasets } = this.processProps(this.props);
 
     const config = {
-        type: 'line',
-        data: { datasets },
-        options: {
-            responsive: false, // this needs to be played with
-            legend: {
-              display: false
-            },
-            tooltip: {
-              display: false // this config doesn't seem to work???
-            },
-            scales: {
-                xAxes: [{
-                    display: true, // config for mini should be false
-                    type: 'time',
-                    distribution: 'linear',
-                    time: {
-                      unit: 'minute', // this also needs to be played with
-                      min: xMin,
-                      max: xMax
-                    }
-                }],
-                yAxes: [{
-                    display: true // needs min / max and measurement
-                }]
+      type: 'line',
+      data: { datasets },
+      options: {
+        responsive: false, // this needs to be played with
+        legend: {
+          display: false
+        },
+        tooltip: {
+          display: false // this config doesn't seem to work???
+        },
+        scales: {
+          xAxes: [
+            {
+              display: true, // config for mini should be false
+              type: 'time',
+              distribution: 'linear',
+              time: {
+                unit: 'minute', // this also needs to be played with
+                min: xMin,
+                max: xMax
+              }
             }
+          ],
+          yAxes: [
+            {
+              display: true // needs min / max and measurement
+            }
+          ]
         }
+      }
     };
 
     const ctx = this._refs.chart.getContext('2d');
-    this._chart =  new Chart(ctx, config);
+    this._chart = new Chart(ctx, config);
   }
 
   processProps(props) {
-
-    const {
-      metricsData,
-      graphDurationSeconds
-    } = props;
+    const { metricsData, graphDurationSeconds } = props;
 
     const xMax = metricsData[0].end;
-    const xMin = moment.utc(xMax).subtract(graphDurationSeconds, 'seconds').utc().format();
+    const xMin = moment
+      .utc(xMax)
+      .subtract(graphDurationSeconds, 'seconds')
+      .utc()
+      .format();
 
     const datasets = metricsData.map((data, i) => ({
-        fill: false,
-        borderColor: chartColors[i],
-        data: this.truncateAndConvertMetrics(data.metrics, xMin, xMax)
+      fill: false,
+      borderColor: chartColors[i],
+      data: this.truncateAndConvertMetrics(data.metrics, xMin, xMax)
     }));
 
     return {
@@ -83,34 +81,29 @@ class MetricGraph extends Component {
   }
 
   truncateAndConvertMetrics(metrics, xMin, xMax) {
-
     const xMinMoment = moment.utc(xMin);
 
     return metrics.reduce((metrics, metric) => {
       const diff = moment.utc(metric.time).diff(xMinMoment);
-      if(diff > -10000) { // diff comparison is less than zero - otherwise no data for beginning of chart - bug or charjs weirdness?
+      if (diff > -10000) {
+        // diff comparison is less than zero - otherwise no data for beginning of chart - bug or charjs weirdness?
         metrics.push({
           x: metric.time,
           y: metric.value // value should be converted here to a readable format
-        })
+        });
       }
       return metrics;
     }, []);
   }
 
   componentWillReceiveProps(nextProps) {
+    const { xMin, xMax, datasets } = this.processProps(nextProps);
 
-      const {
-        xMin,
-        xMax,
-        datasets
-      } = this.processProps(nextProps);
-
-      this._chart.data.datasets = datasets;
-      // these need to be set, but don't seem to truncate the data that's displayed
-      this._chart.options.scales.xAxes[0].time.max = xMax;
-      this._chart.options.scales.xAxes[0].time.min = xMin;
-      this._chart.update(0);
+    this._chart.data.datasets = datasets;
+    // these need to be set, but don't seem to truncate the data that's displayed
+    this._chart.options.scales.xAxes[0].time.max = xMax;
+    this._chart.options.scales.xAxes[0].time.min = xMin;
+    this._chart.update(0);
   }
 
   // should not rerender ever, we update only the canvas via chartjs
@@ -127,19 +120,9 @@ class MetricGraph extends Component {
   }
 
   render() {
+    const { width, height } = this.props;
 
-    const {
-      width,
-      height
-    } = this.props;
-
-    return (
-      <canvas
-        ref={this.ref('chart')}
-        width={width}
-        height={height}
-      />
-    );
+    return <canvas ref={this.ref('chart')} width={width} height={height} />;
   }
 }
 
diff --git a/packages/ui-toolkit/src/metrics/index.js b/packages/ui-toolkit/src/metrics/index.js
index e5d40d1d..8f9c2e7a 100644
--- a/packages/ui-toolkit/src/metrics/index.js
+++ b/packages/ui-toolkit/src/metrics/index.js
@@ -1 +1 @@
-export { default as MetricGraph } from './graph'; 
+export { default as MetricGraph } from './graph';
diff --git a/packages/ui-toolkit/src/modal/index.js b/packages/ui-toolkit/src/modal/index.js
index 891db4b3..1a5074ee 100644
--- a/packages/ui-toolkit/src/modal/index.js
+++ b/packages/ui-toolkit/src/modal/index.js
@@ -71,7 +71,7 @@ export default Modal;
 
 export const ModalHeading = styled(H2)`
   line-height: 1.25;
-	color: ${props => props.theme.secondary};
+  color: ${props => props.theme.secondary};
   margin: 0 0 ${remcalc(12)} 0;
 `;
 
diff --git a/packages/ui-toolkit/src/paper-effect/index.js b/packages/ui-toolkit/src/paper-effect/index.js
index 83fffdc1..2d19305f 100644
--- a/packages/ui-toolkit/src/paper-effect/index.js
+++ b/packages/ui-toolkit/src/paper-effect/index.js
@@ -3,8 +3,8 @@ import remcalc from 'remcalc';
 
 export default css`
   margin-bottom: ${remcalc(16)};
-  box-shadow:
-    0 ${remcalc(8)} 0 ${remcalc(-5)} ${props => props.theme.background},
+  box-shadow: 0 ${remcalc(8)} 0 ${remcalc(-5)}
+      ${props => props.theme.background},
     0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${props => props.theme.grey},
     0 ${remcalc(16)} 0 ${remcalc(-10)} ${props => props.theme.background},
     0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${props => props.theme.grey};
diff --git a/packages/ui-toolkit/src/progress-bar/button.js b/packages/ui-toolkit/src/progress-bar/button.js
index c3de3ec2..7defbc58 100644
--- a/packages/ui-toolkit/src/progress-bar/button.js
+++ b/packages/ui-toolkit/src/progress-bar/button.js
@@ -111,9 +111,7 @@ const ProgressbarButton = ({
   return (
     <StyledContainer {...state} {...rest}>
       <Indicator {...state} />
-      <StyledButton {...state}>
-        {children}
-      </StyledButton>
+      <StyledButton {...state}>{children}</StyledButton>
       <StyledArrow {...state} />
     </StyledContainer>
   );
diff --git a/packages/ui-toolkit/src/progress-bar/index.js b/packages/ui-toolkit/src/progress-bar/index.js
index a854bd8e..66bd38ff 100644
--- a/packages/ui-toolkit/src/progress-bar/index.js
+++ b/packages/ui-toolkit/src/progress-bar/index.js
@@ -10,10 +10,9 @@ const StyledList = styled.ul`
 /**
  * @example ./usage.md
  */
-export default ({ children, ...rest }) =>
-  <StyledList {...rest}>
-    {children}
-  </StyledList>;
+export default ({ children, ...rest }) => (
+  <StyledList {...rest}>{children}</StyledList>
+);
 
 export { default as ProgressbarItem } from './item';
 export { default as ProgressbarButton } from './button';
diff --git a/packages/ui-toolkit/src/progress-bar/item.js b/packages/ui-toolkit/src/progress-bar/item.js
index 03e8fd11..8530794c 100644
--- a/packages/ui-toolkit/src/progress-bar/item.js
+++ b/packages/ui-toolkit/src/progress-bar/item.js
@@ -7,9 +7,8 @@ const StyledItem = styled.li`
   background-color: ${props => props.theme.white};
 `;
 
-const ProgressbarItem = ({ children, ...props }) =>
-  <StyledItem {...props}>
-    {children}
-  </StyledItem>;
+const ProgressbarItem = ({ children, ...props }) => (
+  <StyledItem {...props}>{children}</StyledItem>
+);
 
 export default Baseline(ProgressbarItem);
diff --git a/packages/ui-toolkit/src/section-list/index.js b/packages/ui-toolkit/src/section-list/index.js
index 2a3227e8..eb052d39 100644
--- a/packages/ui-toolkit/src/section-list/index.js
+++ b/packages/ui-toolkit/src/section-list/index.js
@@ -12,10 +12,9 @@ const UnorderedList = styled.ul`
 /**
  * @example ./usage.md
  */
-const SectionList = ({ children, ...rest }) =>
-  <UnorderedList {...rest}>
-    {children}
-  </UnorderedList>;
+const SectionList = ({ children, ...rest }) => (
+  <UnorderedList {...rest}>{children}</UnorderedList>
+);
 
 export default Baseline(SectionList);
 
diff --git a/packages/ui-toolkit/src/section-list/item.js b/packages/ui-toolkit/src/section-list/item.js
index de41fdb6..df6ce181 100644
--- a/packages/ui-toolkit/src/section-list/item.js
+++ b/packages/ui-toolkit/src/section-list/item.js
@@ -17,10 +17,7 @@ const Li = styled.li`
   margin-right: ${remcalc(23)};
 `;
 
-const Item = ({ children, ...rest }) =>
-  <Li {...rest}>
-    {children}
-  </Li>;
+const Item = ({ children, ...rest }) => <Li {...rest}>{children}</Li>;
 
 export default Baseline(Item);
 
diff --git a/packages/ui-toolkit/src/status-loader/index.js b/packages/ui-toolkit/src/status-loader/index.js
index c736a640..fe97920e 100644
--- a/packages/ui-toolkit/src/status-loader/index.js
+++ b/packages/ui-toolkit/src/status-loader/index.js
@@ -39,7 +39,7 @@ const StyledThirdRect = StyledFirstRect.extend`
   animation-delay: 1s;
 `;
 
-export default ({ secondary, tertiary }) =>
+export default ({ secondary, tertiary }) => (
   <svg width="28" height="10">
     <StyledFirstRect
       tertiary={tertiary}
@@ -65,4 +65,5 @@ export default ({ secondary, tertiary }) =>
       width="6"
       height="6"
     />
-  </svg>;
+  </svg>
+);
diff --git a/packages/ui-toolkit/src/styleguide/wrapper.js b/packages/ui-toolkit/src/styleguide/wrapper.js
index bec3a7bb..2d20c917 100644
--- a/packages/ui-toolkit/src/styleguide/wrapper.js
+++ b/packages/ui-toolkit/src/styleguide/wrapper.js
@@ -18,9 +18,7 @@ export default class Wrapper extends Component {
   render() {
     return (
       <ThemeProvider theme={theme}>
-        <StyledBase>
-          {this.props.children}
-        </StyledBase>
+        <StyledBase>{this.props.children}</StyledBase>
       </ThemeProvider>
     );
   }
diff --git a/packages/ui-toolkit/src/theme/colors.js b/packages/ui-toolkit/src/theme/colors.js
index 3182deef..ed6b64d8 100644
--- a/packages/ui-toolkit/src/theme/colors.js
+++ b/packages/ui-toolkit/src/theme/colors.js
@@ -55,7 +55,7 @@ const borderColor = hex =>
     ])
     .toHexString();
 
-const Color = ({ name, hex }) =>
+const Color = ({ name, hex }) => (
   <Box border={borderColor(hex)}>
     <Preview hex={hex} />
     <InnerBox background={hex} text={mostReadable(hex)}>
@@ -74,7 +74,8 @@ const Color = ({ name, hex }) =>
         <code>{hex.toUpperCase()}</code>
       </Paragraph>
     </InnerBox>
-  </Box>;
+  </Box>
+);
 
 export default () => {
   const colors = Object.keys(theme)
@@ -85,15 +86,11 @@ export default () => {
 
       return _a >= _b ? -1 : 1;
     })
-    .map(name =>
+    .map(name => (
       <Col key={name} xs={4}>
         <Color name={name} hex={theme[name]} />
       </Col>
-    );
+    ));
 
-  return (
-    <Row>
-      {colors}
-    </Row>
-  );
+  return <Row>{colors}</Row>;
 };
diff --git a/packages/ui-toolkit/src/tooltip/button.js b/packages/ui-toolkit/src/tooltip/button.js
index 881d787d..a7940c2e 100644
--- a/packages/ui-toolkit/src/tooltip/button.js
+++ b/packages/ui-toolkit/src/tooltip/button.js
@@ -41,10 +41,9 @@ const StyledButton = styled(Button)`
 
   ${is('disabled')`
     color: ${props => props.theme.grey};
-  `}
+  `};
 `;
 
-const TooltipButton = props =>
-    <StyledButton {...props} />;
+const TooltipButton = props => <StyledButton {...props} />;
 
 export default TooltipButton;
diff --git a/packages/ui-toolkit/src/tooltip/tooltip.js b/packages/ui-toolkit/src/tooltip/tooltip.js
index 79b75f8c..fd3231cd 100644
--- a/packages/ui-toolkit/src/tooltip/tooltip.js
+++ b/packages/ui-toolkit/src/tooltip/tooltip.js
@@ -93,26 +93,21 @@ class Tooltip extends Component {
       ...rest
     } = this.props;
 
-    if(typeof top === 'number') {
-      top = `${top}px`
+    if (typeof top === 'number') {
+      top = `${top}px`;
     }
-    if(typeof left === 'number') {
-      left = `${left}px`
+    if (typeof left === 'number') {
+      left = `${left}px`;
     }
-    if(typeof bottom === 'number') {
-      bottom = `${bottom}px`
+    if (typeof bottom === 'number') {
+      bottom = `${bottom}px`;
     }
-    if(typeof right === 'number') {
-      right = `${right}px`
+    if (typeof right === 'number') {
+      right = `${right}px`;
     }
 
     return (
-      <StyledContainer
-        top={top}
-        left={left}
-        bottom={bottom}
-        right={right}
-      >
+      <StyledContainer top={top} left={left} bottom={bottom} right={right}>
         <StyledInnerContainer secondary={secondary}>
           {children}
         </StyledInnerContainer>
diff --git a/packages/ui-toolkit/src/topology/index.js b/packages/ui-toolkit/src/topology/index.js
index 8faea772..acd69e75 100644
--- a/packages/ui-toolkit/src/topology/index.js
+++ b/packages/ui-toolkit/src/topology/index.js
@@ -370,7 +370,7 @@ class Topology extends React.Component {
       this.setDragInfo(false);
     };
 
-    const renderedNode = (n, index) =>
+    const renderedNode = (n, index) => (
       <TopologyNode
         key={index}
         data={n}
@@ -378,13 +378,16 @@ class Topology extends React.Component {
         onDragStart={onDragStart}
         onNodeTitleClick={onNodeTitleClick}
         onQuickActions={onQuickActionsClick}
-      />;
+      />
+    );
 
-    const renderedLink = (l, index) =>
-      <TopologyLink key={index} data={l} index={index} />;
+    const renderedLink = (l, index) => (
+      <TopologyLink key={index} data={l} index={index} />
+    );
 
-    const renderedLinkArrow = (l, index) =>
-      <TopologyLinkArrow key={index} data={l} index={index} />;
+    const renderedLinkArrow = (l, index) => (
+      <TopologyLinkArrow key={index} data={l} index={index} />
+    );
 
     const renderedNodes =
       this.dragInfo && this.dragInfo.dragging
@@ -437,21 +440,11 @@ class Topology extends React.Component {
         onTouchCancel={onDragEnd}
         id="topology-svg"
       >
-        <g>
-          {renderedNodes}
-        </g>
-        <g>
-          {renderedLinks}
-        </g>
-        <g>
-          {renderedLinkArrows}
-        </g>
-        <g>
-          {dragNode}
-        </g>
-        <g>
-          {dragLinkArrow}
-        </g>
+        <g>{renderedNodes}</g>
+        <g>{renderedLinks}</g>
+        <g>{renderedLinkArrows}</g>
+        <g>{dragNode}</g>
+        <g>{dragLinkArrow}</g>
       </StyledSvg>
     );
   }
diff --git a/packages/ui-toolkit/src/topology/node/button.js b/packages/ui-toolkit/src/topology/node/button.js
index bf5b91cc..ff73356c 100644
--- a/packages/ui-toolkit/src/topology/node/button.js
+++ b/packages/ui-toolkit/src/topology/node/button.js
@@ -12,7 +12,7 @@ const NodeButton = ({ onButtonClick, index, isConsul, instancesActive }) => {
   const buttonCircleY =
     (height - buttonCircleRadius * 4 - buttonCircleSpacing * 2) / 2;
 
-  const buttonCircles = [1, 2, 3].map((item, index) =>
+  const buttonCircles = [1, 2, 3].map((item, index) => (
     <GraphButtonCircle
       cx={width / 2}
       cy={
@@ -23,7 +23,7 @@ const NodeButton = ({ onButtonClick, index, isConsul, instancesActive }) => {
       consul={isConsul}
       active={instancesActive}
     />
-  );
+  ));
 
   return (
     <g transform={`translate(${x}, ${y})`}>
diff --git a/packages/ui-toolkit/src/topology/node/content.js b/packages/ui-toolkit/src/topology/node/content.js
index edad6f62..9d444792 100644
--- a/packages/ui-toolkit/src/topology/node/content.js
+++ b/packages/ui-toolkit/src/topology/node/content.js
@@ -20,15 +20,15 @@ const GraphNodeContent = ({
       }
     : Constants.infoPosition;
 
-  const nodeSubtitle = child
-    ? <GraphSubtitle
-        {...Constants.subtitlePosition}
-        consul={data.isConsul}
-        active={data.instancesActive}
-      >
-        {data.name}
-      </GraphSubtitle>
-    : null;
+  const nodeSubtitle = child ? (
+    <GraphSubtitle
+      {...Constants.subtitlePosition}
+      consul={data.isConsul}
+      active={data.instancesActive}
+    >
+      {data.name}
+    </GraphSubtitle>
+  ) : null;
 
   const nodeInfo = <GraphNodeInfo data={data} pos={nodeInfoPos} />;
 
diff --git a/packages/ui-toolkit/src/topology/node/index.js b/packages/ui-toolkit/src/topology/node/index.js
index 6483bfb9..449d495f 100644
--- a/packages/ui-toolkit/src/topology/node/index.js
+++ b/packages/ui-toolkit/src/topology/node/index.js
@@ -62,29 +62,31 @@ const GraphNode = ({
       }
     : {};
 
-  const nodeContent = children
-    ? children.reduce(
-        (acc, d, i) => {
-          acc.children.push(
-            <GraphNodeContent key={i} child data={d} index={i} y={acc.y} />
-          );
-          acc.y += getContentRect(d, true).height;
-          return acc;
-        },
-        { y: Constants.contentRect.y, children: [] }
-      ).children
-    : <GraphNodeContent data={data} />;
+  const nodeContent = children ? (
+    children.reduce(
+      (acc, d, i) => {
+        acc.children.push(
+          <GraphNodeContent key={i} child data={d} index={i} y={acc.y} />
+        );
+        acc.y += getContentRect(d, true).height;
+        return acc;
+      },
+      { y: Constants.contentRect.y, children: [] }
+    ).children
+  ) : (
+    <GraphNodeContent data={data} />
+  );
 
-  const nodeShadow = instancesActive
-    ? <GraphShadowRect
-        x={0}
-        y={3}
-        width={width}
-        height={height}
-        consul={isConsul}
-        active={instancesActive}
-      />
-    : null;
+  const nodeShadow = instancesActive ? (
+    <GraphShadowRect
+      x={0}
+      y={3}
+      width={width}
+      height={height}
+      consul={isConsul}
+      active={instancesActive}
+    />
+  ) : null;
 
   return (
     <g transform={`translate(${x}, ${y})`}>
diff --git a/packages/ui-toolkit/src/topology/node/info.js b/packages/ui-toolkit/src/topology/node/info.js
index e2bba284..795c3b61 100644
--- a/packages/ui-toolkit/src/topology/node/info.js
+++ b/packages/ui-toolkit/src/topology/node/info.js
@@ -45,33 +45,31 @@ const GraphNodeInfo = ({ data, pos }) => {
 
   const { x, y } = pos;
 
-  const statuses = transitionalStatus
-    ? <GraphText consul={isConsul} active={instancesActive}>
-        {status.toLowerCase()}
-      </GraphText>
-    : instanceStatuses.map((instanceStatus, index) =>
-        <GraphText key={index} consul={isConsul} active={instancesActive}>
-          {`${instanceStatus.count}
+  const statuses = transitionalStatus ? (
+    <GraphText consul={isConsul} active={instancesActive}>
+      {status.toLowerCase()}
+    </GraphText>
+  ) : (
+    instanceStatuses.map((instanceStatus, index) => (
+      <GraphText key={index} consul={isConsul} active={instancesActive}>
+        {`${instanceStatus.count}
             ${instanceStatus.status.toLowerCase()}`}
-        </GraphText>
-      );
+      </GraphText>
+    ))
+  );
 
   const healthy = instancesHealthy ? <HealthyIcon /> : <UnhealthyIcon />;
 
   return (
     <g transform={`translate(${x}, ${y})`}>
-      <g transform={`translate(0, 0)`}>
-        {healthy}
-      </g>
+      <g transform={`translate(0, 0)`}>{healthy}</g>
       <g transform={'translate(30, 4.5)'}>
         <StyledInstancesIcon consul={isConsul} active={instancesActive} />
       </g>
       <GraphText x={54} y={14} consul={isConsul} active={instancesActive}>
         {`${instances.length} inst.`}
       </GraphText>
-      <g transform={'translate(54, 36)'}>
-        {statuses}
-      </g>
+      <g transform={'translate(54, 36)'}>{statuses}</g>
       {/* <g transform={'translate(82, 0)'}>
         <StyledDataCentresIcon connected={connected} />
       </g>
diff --git a/packages/ui-toolkit/src/topology/node/metrics.js b/packages/ui-toolkit/src/topology/node/metrics.js
index 25f497d9..9ad7bad2 100644
--- a/packages/ui-toolkit/src/topology/node/metrics.js
+++ b/packages/ui-toolkit/src/topology/node/metrics.js
@@ -8,7 +8,7 @@ const GraphNodeMetrics = ({ connected, metrics, pos }) => {
   const { x, y } = pos;
 
   const metricSpacing = 18;
-  const metricsText = metrics.map((metric, index) =>
+  const metricsText = metrics.map((metric, index) => (
     <GraphText
       key={index}
       x={0}
@@ -17,13 +17,9 @@ const GraphNodeMetrics = ({ connected, metrics, pos }) => {
     >
       {`${metric.name}: ${metric.value}`}
     </GraphText>
-  );
+  ));
 
-  return (
-    <g transform={`translate(${x}, ${y})`}>
-      {metricsText}
-    </g>
-  );
+  return <g transform={`translate(${x}, ${y})`}>{metricsText}</g>;
 };
 
 GraphNodeMetrics.propTypes = {
diff --git a/packages/ui-toolkit/src/topology/node/title.js b/packages/ui-toolkit/src/topology/node/title.js
index c0b6c8fc..25115b93 100644
--- a/packages/ui-toolkit/src/topology/node/title.js
+++ b/packages/ui-toolkit/src/topology/node/title.js
@@ -4,7 +4,7 @@ import Baseline from '../../baseline';
 import Constants from '../constants';
 import { GraphTitle } from './shapes';
 
-const GraphNodeTitle = ({ data, onNodeTitleClick }) =>
+const GraphNodeTitle = ({ data, onNodeTitleClick }) => (
   <g>
     <GraphTitle
       x={Constants.paddingLeft}
@@ -20,7 +20,8 @@ const GraphNodeTitle = ({ data, onNodeTitleClick }) =>
       <GraphHealthyCircle cx={9} cy={9} r={9} />
       <HeartIcon />
     </g> */}
-  </g>;
+  </g>
+);
 
 GraphNodeTitle.propTypes = {
   data: PropTypes.object.isRequired,