feat(my-joy-beta): navigation and tagoxony

2017-09-20 10:30:53 +01:00 · 2017-09-20 10:30:53 +01:00 · bdb364b63d
parent 3e0e7b2e5e
commit bdb364b63d
151 changed files with 4611 additions and 2983 deletions
--- a/.travis.yml
+++ b/.travis.yml
@ -2,4 +2,14 @@ language: node_js
 node_js:
  - '8'
 script:
-  - echo 0
+  - npm run test-ci
+# addons:
+#   chrome: stable
+# before_install:
+#   - # start your web application and listen on `127.0.0.1`
+#   - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &
+# script:
+#   - npm run test-ci
+  # - eslint-gh-status-reporter
+  # - stylelint-gh-status-reporter
+  # - lighthouse-gh-status-reporter --chrome-port=9222 --chrome-hostname=localhost
--- a/package.json
+++ b/package.json
@ -51,6 +51,7 @@
    "eslint-config-prettier": "^2.3.0",
    "eslint-config-react-app": "^2.0.0",
    "eslint-config-xo-space": "^0.16.0",
+    "eslint-gh-status-reporter": "^1.0.7",
    "eslint-plugin-flowtype": "^2.35.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
@ -61,12 +62,14 @@
    "husky": "^0.14.3",
    "lerna": "^2.1.2",
    "license-to-fail": "^2.2.0",
+    "lighthouse-gh-status-reporter": "^1.0.12",
    "lodash.uniq": "^4.5.0",
    "prettier": "1.6.1",
    "quality-docs": "^3.3.0",
    "read-pkg": "^2.0.0",
    "redrun": "^5.9.17",
    "staged-git-files": "0.0.4",
+    "stylelint-gh-status-reporter": "^1.0.7",
    "yargs": "^8.0.2"
  },
  "workspaces": [
--- a/packages/cloudapi-gql/package.json
+++ b/packages/cloudapi-gql/package.json
@ -20,6 +20,8 @@
    "express-graphql": "^0.6.11",
    "got": "^7.1.0",
    "graphql": "^0.11.2",
+    "graphql-tools": "^1.2.2",
+    "minimist": "^1.2.0",
    "smartdc-auth": "^2.5.5",
    "triton": "^5.3.1"
  },
--- a/packages/cloudapi-gql/src/endpoint.js
+++ b/packages/cloudapi-gql/src/endpoint.js
@ -1,12 +1,11 @@
-const { GraphQLSchema } = require('graphql');
-const graphqlHTTP = require('express-graphql');
+// const argv = require('minimist')(process.argv.slice(2));
+// const { makeExecutableSchema, addMockFunctionsToSchema } = require('graphql-tools');
+
 const { query, mutation } = require('./schema');

-module.exports = graphqlHTTP(() => ({
-  schema: new GraphQLSchema({
-    query,
-    mutation
-  }),
-  graphiql: true,
-  pretty: true
-}));
+// console.log(new GraphQLSchema({
+//   query,
+//   mutation
+// }));
+//
+//
--- a/packages/cloudapi-gql/src/index.js
+++ b/packages/cloudapi-gql/src/index.js
@ -1,12 +1,29 @@
 const express = require('express');
+const graphqlHTTP = require('express-graphql');
 const cors = require('cors');

+const schema = require('./schema');
+
 const app = express();

 app.use(cors());
 app.options('*', cors());

-app.use('/graphql', require('./endpoint'));
+app.post(
+  '/graphql',
+  graphqlHTTP({
+    schema,
+    graphiql: false
+  })
+);
+
+app.get(
+  '/graphql',
+  graphqlHTTP({
+    schema,
+    graphiql: true
+  })
+);

 const server = app.listen(4000, err => {
  if (err) {
--- a/packages/cloudapi-gql/src/schema/index.js
+++ b/packages/cloudapi-gql/src/schema/index.js
@ -1,2 +1,9 @@
-exports.query = require('./queries');
-exports.mutation = require('./mutations');
+const { GraphQLSchema } = require('graphql');
+
+const query = require('./queries');
+const mutation = require('./mutations');
+
+module.exports = new GraphQLSchema({
+  query,
+  mutation
+});
--- a/packages/cloudapi-gql/src/schema/mutations/machines.js
+++ b/packages/cloudapi-gql/src/schema/mutations/machines.js
@ -189,10 +189,10 @@ module.exports.auditMachine = {
      type: new GraphQLNonNull(GraphQLID),
      description: 'The machine id'
    }
-  },
-  resolve: (root, args) => {
-    return api.machines.destroy(args.id);
  }
+  // resolve: (root, args) => {
+  //   return api.machines.destroy(args.id);
+  // }
 };

 module.exports.setMachineFirewall = {
--- a/packages/cloudapi-gql/src/schema/queries/firewall-rules.js
+++ b/packages/cloudapi-gql/src/schema/queries/firewall-rules.js
@ -14,7 +14,6 @@ module.exports = {
  },
  resolve(root, args) {
    const { list, get } = api.firewallRules;
-
    return args.id ? get(args.id).then(rule => [rule]) : list();
  }
 };
--- a/packages/cloudapi-gql/src/schema/types/firewall-rule.js
+++ b/packages/cloudapi-gql/src/schema/types/firewall-rule.js
@ -49,20 +49,22 @@ module.exports = new GraphQLObjectType({
      }
    },
    rule: {
-      type: FirewallRuleSyntaxType,
+      type: GraphQLString, //FirewallRuleSyntaxType,
      description: 'Firewall rule',
      resolve: ({ rule }) => {
-        const regex = /from (.*?) to (.*?) (allow|deny) (.*?) port (\d*)/i;
-        const tokens = rule.match(regex);
-
-        return {
-          from: tokens[1],
-          to: tokens[2],
-          action: tokens[3],
-          protocol: tokens[4],
-          port: tokens[5],
-          text: rule
-        };
+        return rule;
+        // console.log(rule);
+        // const regex = /from (.*?) to (.*?) (allow|deny) (.*?) port (\d*)/i;
+        // const tokens = rule.match(regex);
+        //
+        // return {
+        //   from: tokens[1],
+        //   to: tokens[2],
+        //   action: tokens[3],
+        //   protocol: tokens[4],
+        //   port: tokens[5],
+        //   text: rule
+        // };
      }
    },
    global: {
--- a/packages/cloudapi-gql/src/schema/types/machine.js
+++ b/packages/cloudapi-gql/src/schema/types/machine.js
@ -92,8 +92,14 @@ module.exports = new GraphQLObjectType({
      description: 'The IP addresses this instance has'
    },
    networks: {
-      type: new GraphQLList(GraphQLString),
-      description: 'The network UUIDs of the nics this instance has'
+      type: new GraphQLList(require('./network')),
+      description: 'The networks of the nics this instance has',
+      resolve: (root, args) => {
+        const { networks } = root;
+        const { get } = api.networks;
+
+        return Promise.all(networks.map(id => get(id)));
+      }
    },
    primaryIp: {
      type: GraphQLString,
@ -110,8 +116,8 @@ module.exports = new GraphQLObjectType({
      // Circular dependency
      type: new GraphQLList(require('./firewall-rule')),
      description: 'List of FirewallRules affecting this machine',
-      resolve: root => {
-        return api.firewallRules.listByMachine(root.id);
+      resolve: ({ id }) => {
+        return api.firewallRules.listByMachine({ id });
      }
    },
    computeNode: {
@ -131,15 +137,10 @@ module.exports = new GraphQLObjectType({
          description: 'Filter on the name of the snapshot'
        }
      },
-      resolve: (root, args) => {
-        const { snapshot: { list, get } } = api.machines;
+      resolve: ({ id }, args) => {
+        const { list, get } = api.machines.snapshots;

-        return args.id
-          ? list(root)
-          : get({
-              id: root.id,
-              name: args.name
-            });
+        return args.name ? get({ name: args.name, id: root.id }) : list({ id });
      }
    }
  })
--- a/packages/joyent-boilerplate/.stylelintrc
+++ b/packages/joyent-boilerplate/.stylelintrc
@ -1,8 +1,3 @@
 {
-  "processors": ["stylelint-processor-styled-components"],
-  "extends": [
-    "stylelint-config-standard",
-    "stylelint-config-styled-components"
-  ],
-  "syntax": "scss"
+  "extends": ["stylelint-config-joyent-portal"]
 }
--- a/packages/joyent-boilerplate/package.json
+++ b/packages/joyent-boilerplate/package.json
@ -20,7 +20,7 @@
    "graphql-tag": "^2.4.2",
    "jest-cli": "^21.0.1",
    "joyent-ui-toolkit": "^2.0.0",
-    "normalized-styled-components": "^1.0.9",
+    "normalized-styled-components": "^1.0.14",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-apollo": "^1.4.15",
@ -33,12 +33,12 @@
    "redux-form": "^7.0.3",
    "remcalc": "^1.0.8",
    "styled-components": "^2.1.2",
-    "styled-is": "^1.0.11"
+    "styled-is": "^1.0.14"
  },
  "devDependencies": {
    "babel-plugin-inline-react-svg": "^0.4.0",
    "babel-plugin-styled-components": "^1.2.0",
-    "babel-preset-joyent-portal": "^2.0.0",
+    "babel-preset-joyent-portal": "^3.0.1",
    "eslint": "^4.5.0",
    "eslint-config-joyent-portal": "3.0.0",
    "jest": "^21.0.1",
@ -50,13 +50,10 @@
    "jest-snapshot": "^21.0.0",
    "jest-styled-components": "^4.4.1",
    "jest-transform-graphql": "^2.1.0",
-    "joyent-react-scripts": "^1.0.2",
+    "joyent-react-scripts": "^2.0.2",
    "react-test-renderer": "^15.6.1",
    "redrun": "^5.9.17",
    "stylelint": "^8.1.1",
-    "stylelint-config-primer": "^2.0.1",
-    "stylelint-config-standard": "^17.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^0.4.0"
+    "stylelint-config-joyent-portal": "^2.0.0"
  }
 }
--- a/packages/joyent-boilerplate/src/app.js
+++ b/packages/joyent-boilerplate/src/app.js
@ -1,26 +1,15 @@
-import React, { Component } from 'react';
-import { ThemeProvider, injectGlobal } from 'styled-components';
-import { theme, global } from 'joyent-ui-toolkit';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { theme, RootContainer } from 'joyent-ui-toolkit';
 import { ApolloProvider } from 'react-apollo';

 import { client, store } from '@state/store';
 import Router from '@root/router';

-class App extends Component {
-  componentWillMount() {
-    // eslint-disable-next-line no-unused-expressions
-    injectGlobal`
-      ${global}
-    `;
-  }
-
-  render() {
-    return (
-      <ApolloProvider client={client} store={store}>
-        <ThemeProvider theme={theme}>{Router}</ThemeProvider>
-      </ApolloProvider>
-    );
-  }
-}
-
-export default App;
+export default () => (
+  <RootContainer>
+    <ApolloProvider client={client} store={store}>
+      <ThemeProvider theme={theme}>{Router}</ThemeProvider>
+    </ApolloProvider>
+  </RootContainer>
+);
--- a/packages/joyent-boilerplate/src/components/layout/tests/snapshots/container.spec.js.snap
+++ b/packages/joyent-boilerplate/src/components/layout/tests/snapshots/container.spec.js.snap
@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders <Container /> without throwing 1`] = `
-.c0 {
-  margin-right: auto;
-  margin-left: auto;
-  padding-top: 1.1875rem;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  display: block;
-  -webkit-flex-flow: column;
-  -ms-flex-flow: column;
-  flex-flow: column;
-}
-
-@media only screen and (min-width:48em) {
-  .c0 {
-    width: 46rem;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c0 {
-    width: 61rem;
-  }
-}
-
-@media only screen and (min-width:75em) {
-  .c0 {
-    width: 76rem;
-  }
-}
-
-<div
-  className="c0"
-/>
-`;
--- a/packages/joyent-boilerplate/src/components/layout/tests/container.spec.js
+++ b/packages/joyent-boilerplate/src/components/layout/tests/container.spec.js
@ -1,14 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import React from 'react';
-import renderer from 'react-test-renderer';
-import 'jest-styled-components';
-
-import Container from '../container';
-
-it('renders <Container /> without throwing', () => {
-  const tree = renderer.create(<Container />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
--- a/packages/joyent-boilerplate/src/components/layout/index.js
+++ b/packages/joyent-boilerplate/src/components/layout/index.js
@ -1 +0,0 @@
-export { default as LayoutContainer } from './container';
--- a/packages/joyent-boilerplate/src/components/navigation/not-found.js
+++ b/packages/joyent-boilerplate/src/components/navigation/not-found.js
@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
-import { H1, P, Button } from 'joyent-ui-toolkit';
-import { LayoutContainer } from '@components/layout';
+import { H1, P, Button, ViewContainer } from 'joyent-ui-toolkit';

 const StyledContainer = styled.div`
  margin-top: ${remcalc(60)};
@ -25,13 +24,13 @@ const NotFound = ({
  link = 'Back home',
  to = '/'
 }) => (
-  <LayoutContainer>
+  <ViewContainer>
    <StyledContainer>
      <StyledTitle>{title}</StyledTitle>
      <StyledP>{message}</StyledP>
      <Button to={to}>{link}</Button>
    </StyledContainer>
-  </LayoutContainer>
+  </ViewContainer>
 );

 NotFound.propTypes = {
--- a/packages/joyent-boilerplate/src/containers/home/index.js
+++ b/packages/joyent-boilerplate/src/containers/home/index.js
@ -1,6 +1,6 @@
 import React from 'react';
-import { LayoutContainer } from '@components/layout';
+import { ViewContainer } from 'joyent-ui-toolkit';

-const Home = () => <LayoutContainer>Welcome</LayoutContainer>;
+const Home = () => <ViewContainer>Welcome</ViewContainer>;

 export default Home;
--- a/packages/joyent-boilerplate/src/router.js
+++ b/packages/joyent-boilerplate/src/router.js
@ -3,9 +3,7 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import styled from 'styled-components';

 import { Header } from '@containers/navigation';
-
 import Home from '@containers/home';
-
 import { NotFound } from '@components/navigation';

 const Container = styled.div`
--- a/packages/my-joy-beta/.babelrc
+++ b/packages/my-joy-beta/.babelrc
@ -0,0 +1,9 @@
+{
+  "presets": "joyent-portal",
+  "plugins": [
+    "styled-components",
+    ["inline-react-svg", {
+      "ignorePattern": "libre-franklin"
+    }]
+  ]
+}
--- a/packages/my-joy-beta/.dockerignore
+++ b/packages/my-joy-beta/.dockerignore
@ -0,0 +1,9 @@
+src/components/base/*.css
+node_modules
+coverage
+.nyc_output
+docs/static
+!docs/static/index.html
+docs/node_modules
+dist
+package-lock.json
--- a/packages/my-joy-beta/.eslintignore
+++ b/packages/my-joy-beta/.eslintignore
@ -0,0 +1,4 @@
+.nyc_output
+coverage
+dist
+build
--- a/packages/my-joy-beta/.eslintrc
+++ b/packages/my-joy-beta/.eslintrc
@ -0,0 +1,11 @@
+{
+  "extends": "joyent-portal",
+  "rules": {
+    "no-console": 0,
+    "new-cap": 0,
+    // temp
+    "no-undef": 1,
+    "no-debugger": 1,
+    "no-negated-condition": 0
+  }
+}
--- a/packages/my-joy-beta/.gitignore
+++ b/packages/my-joy-beta/.gitignore
@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
--- a/packages/my-joy-beta/.lighthouserc
+++ b/packages/my-joy-beta/.lighthouserc
@ -0,0 +1,8 @@
+{
+  "setup": {
+    "compile": "npm run build",
+    "start": "serve -s build --port 3069 --single",
+    "href": "http://0.0.0.0:3069"
+  },
+  "extends": "lighthouse:default"
+}
--- a/packages/my-joy-beta/.stylelintrc
+++ b/packages/my-joy-beta/.stylelintrc
@ -0,0 +1,4 @@
+{
+  "test": ["./src/**/*.js"],
+  "extends": ["stylelint-config-joyent-portal"]
+}
--- a/packages/my-joy-beta/.tern-project
+++ b/packages/my-joy-beta/.tern-project
@ -0,0 +1,15 @@
+{
+  "libs": [
+    "ecmascript",
+    "browser"
+  ],
+  "plugins": {
+    "doc_comment": true,
+    "local-scope": true,
+    "jsx": true,
+    "node": true,
+    "webpack": {
+      "configPath": "../../node_modules/joyent-react-scripts/src/webpack.config.dev.js"
+    }
+  }
+}
--- a/packages/my-joy-beta/README.md
+++ b/packages/my-joy-beta/README.md
@ -0,0 +1,20 @@
+# my-joy-beta
+
+[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg)](https://opensource.org/licenses/MPL-2.0)
+[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg)](https://github.com/RichardLitt/standard-readme)
+
+## Table of Contents
+
+- [Usage](#usage)
+- [License](#license)
+
+## Usage
+
+```
+npm run start
+open http://0.0.0.0:3069
+```
+
+## License
+
+MPL-2.0
--- a/packages/my-joy-beta/package.json
+++ b/packages/my-joy-beta/package.json
@ -0,0 +1,64 @@
+{
+  "name": "my-joy-beta",
+  "version": "1.0.0",
+  "license": "MPL-2.0",
+  "repository": "github:yldio/joyent-portal",
+  "main": "build/",
+  "scripts": {
+    "dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
+    "start": "PORT=3069 joyent-react-scripts start",
+    "build": "NODE_ENV=production joyent-react-scripts build",
+    "lint:css": "stylelint './src/**/*.js'",
+    "lint:js": "eslint . --fix",
+    "lint": "redrun -s lint:*",
+    "test": "NODE_ENV=test ./test/run --env=jsdom",
+    "test-ci": "echo 0 `# NODE_ENV=test ./test/run --env=jsdom --coverage`",
+    "prepublish": "echo 0"
+  },
+  "dependencies": {
+    "apollo": "^0.2.2",
+    "joyent-ui-toolkit": "^2.0.0",
+    "lodash.find": "^4.6.0",
+    "lodash.get": "^4.4.2",
+    "lodash.isstring": "^4.0.1",
+    "lunr": "^2.1.3",
+    "normalized-styled-components": "^1.0.14",
+    "param-case": "^2.1.1",
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
+    "react-apollo": "^1.4.15",
+    "react-dom": "^15.6.1",
+    "react-json-view": "^1.12.4",
+    "react-redux": "^5.0.6",
+    "react-router": "^4.1.1",
+    "react-router-dom": "^4.1.2",
+    "redux": "^3.7.2",
+    "redux-actions": "^2.2.1",
+    "redux-form": "^7.0.4",
+    "remcalc": "^1.0.8",
+    "styled-components": "^2.1.2",
+    "title-case": "^2.1.1"
+  },
+  "devDependencies": {
+    "babel-plugin-inline-react-svg": "^0.4.0",
+    "babel-plugin-styled-components": "^1.2.0",
+    "babel-preset-joyent-portal": "^3.0.1",
+    "eslint": "^4.7.1",
+    "eslint-config-joyent-portal": "3.0.0",
+    "jest": "^21.1.0",
+    "jest-alias-preprocessor": "^1.1.1",
+    "jest-cli": "^21.1.0",
+    "jest-diff": "^21.1.0",
+    "jest-junit": "^3.0.0",
+    "jest-matcher-utils": "^21.1.0",
+    "jest-snapshot": "^21.1.0",
+    "jest-styled-components": "^4.6.0",
+    "jest-transform-graphql": "^2.1.0",
+    "joyent-react-scripts": "^2.0.2",
+    "react-test-renderer": "^15.6.1",
+    "redrun": "^5.9.17",
+    "serve": "^6.1.0",
+    "stylelint": "^8.1.1",
+    "stylelint-config-joyent-portal": "^2.0.0"
+  }
+}
--- a/packages/my-joy-beta/public/index.html
+++ b/packages/my-joy-beta/public/index.html
@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#1E313B">
+
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+
+    <style>
+      html, body, #root {
+        height: 100%;
+      }
+
+      #root {
+        display: flex;
+        flex-flow: column;
+      }
+    </style>
+
+    <title>My Joyent &beta;</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>
--- a/packages/my-joy-beta/public/manifest.json
+++ b/packages/my-joy-beta/public/manifest.json
@ -0,0 +1,15 @@
+{
+  "short_name": "Joyent",
+  "name": "My Joyent &beta;",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#1E313B",
+  "background_color": "#FAFAFA"
+}
--- a/packages/my-joy-beta/src/app.js
+++ b/packages/my-joy-beta/src/app.js
@ -0,0 +1,18 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { ApolloProvider } from 'react-apollo';
+
+import { theme, RootContainer } from 'joyent-ui-toolkit';
+
+import { client, store } from '@state/store';
+import Router from '@root/router';
+
+export default () => (
+  <ApolloProvider client={client} store={store}>
+    <ThemeProvider theme={theme}>
+      <RootContainer>
+        <Router />
+      </RootContainer>
+    </ThemeProvider>
+  </ApolloProvider>
+);
--- a/packages/my-joy-beta/src/assets/triton_logo.png
+++ b/packages/my-joy-beta/src/assets/triton_logo.png
--- a/packages/my-joy-beta/src/assets/triton_logo_dark.png
+++ b/packages/my-joy-beta/src/assets/triton_logo_dark.png
--- a/packages/my-joy-beta/src/components/instances/index.js
+++ b/packages/my-joy-beta/src/components/instances/index.js
@ -0,0 +1,3 @@
+export { default as Item } from './item';
+export { default as List } from './list';
+export { default as KeyValue } from './key-value';
--- a/packages/my-joy-beta/src/components/instances/item.js
+++ b/packages/my-joy-beta/src/components/instances/item.js
@ -0,0 +1,54 @@
+import React from 'react';
+import titleCase from 'title-case';
+
+import {
+  Card,
+  CardMeta,
+  CardAction,
+  CardTitle,
+  CardLabel,
+  CardView,
+  Checkbox,
+  FormGroup,
+  QueryBreakpoints
+} from 'joyent-ui-toolkit';
+
+const { SmallOnly, Small } = QueryBreakpoints;
+
+const stateColor = {
+  provisioning: 'blue',
+  ready: 'blue',
+  active: 'green',
+  running: 'green',
+  stopping: 'grey',
+  stopped: 'grey',
+  offline: 'red',
+  destroyed: 'red',
+  failed: 'red',
+  deleted: 'secondaryActive',
+  incomplete: 'secondaryActive',
+  unknown: 'secondaryActive'
+};
+
+export default ({ name, state, last, first }) => (
+  <Card collapsed flat={!last} topMargin={first} bottomless={!last} gapless>
+    <CardView>
+      <CardMeta>
+        <CardAction>
+          <FormGroup name={name} reduxForm>
+            <Checkbox />
+          </FormGroup>
+        </CardAction>
+        <CardTitle to={`/instances/${name}`}>{name}</CardTitle>
+        <Small>
+          <CardLabel color={stateColor[state]} title={`The instance is ${state}`}>
+            {titleCase(state)}
+          </CardLabel>
+        </Small>
+        <SmallOnly>
+          <CardLabel color={stateColor[state]} title={`The instance is ${state}`} />
+        </SmallOnly>
+      </CardMeta>
+    </CardView>
+  </Card>
+);
--- a/packages/my-joy-beta/src/components/instances/key-value.js
+++ b/packages/my-joy-beta/src/components/instances/key-value.js
@ -0,0 +1,43 @@
+import React from 'react';
+import { Row, Col } from 'react-styled-flexboxgrid';
+
+import {
+  FormGroup,
+  Input,
+  Button,
+  BinIcon,
+  QueryBreakpoints,
+  Divider
+} from 'joyent-ui-toolkit';
+
+const { SmallOnly, Small } = QueryBreakpoints;
+
+export default ({ name, formName, formValue, handleSubmit, onRemove, textarea }) => (
+  <form onSubmit={handleSubmit}>
+    <Row>
+      <Col xs={12} sm={5}>
+        <FormGroup name={formName} reduxForm>
+          <Input fluid mono marginless />
+        </FormGroup>
+      </Col>
+      <Col xs={12} sm={5}>
+        <FormGroup name={formValue} reduxForm>
+          <Input fluid mono marginless />
+        </FormGroup>
+      </Col>
+      <Col xs={6} sm={1}>
+        <Button type="button" onClick={() => onRemove(name)} secondary small icon fluid>
+          <BinIcon />
+        </Button>
+      </Col>
+      <Col xs={6} sm={1}>
+        <Button type="submit" secondary small icon fluid>
+          S
+        </Button>
+      </Col>
+      <SmallOnly>
+        <Divider height="4" width="100%" transparent />
+      </SmallOnly>
+    </Row>
+  </form>
+);
--- a/packages/my-joy-beta/src/components/instances/list.js
+++ b/packages/my-joy-beta/src/components/instances/list.js
@ -0,0 +1,28 @@
+import React from 'react';
+import forceArray from 'force-array';
+
+import { FormGroup, Input, FormLabel } from 'joyent-ui-toolkit';
+import Item from './item';
+
+export default ({ instances, handleChange = () => null, handleSubmit }) => {
+  const _instances = forceArray(instances);
+
+  const items = _instances.map((instance, i, all) => (
+    <Item
+      key={instance.id}
+      {...instance}
+      last={all.length - 1 === i}
+      first={!i}
+    />
+  ));
+
+  return (
+    <form onSubmit={() => handleSubmit(ctx => handleChange(ctx))}>
+      <FormGroup name="filter" reduxForm>
+        <FormLabel>Filter instances</FormLabel>
+        <Input />
+      </FormGroup>
+      {items}
+    </form>
+  );
+};
--- a/packages/my-joy-beta/src/components/navigation/header.js
+++ b/packages/my-joy-beta/src/components/navigation/header.js
@ -0,0 +1,24 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Img } from 'normalized-styled-components';
+import remcalc from 'remcalc';
+
+import Logo from '@assets/triton_logo.png';
+import { Header, HeaderBrand, ViewContainer } from 'joyent-ui-toolkit';
+
+const StyledLogo = Img.extend`
+  width: ${remcalc(87)};
+  height: ${remcalc(25)};
+`;
+
+export default () => (
+  <Header>
+    <ViewContainer>
+      <HeaderBrand>
+        <Link to="/">
+          <StyledLogo src={Logo} alt="Triton" />
+        </Link>
+      </HeaderBrand>
+    </ViewContainer>
+  </Header>
+);
--- a/packages/my-joy-beta/src/components/navigation/index.js
+++ b/packages/my-joy-beta/src/components/navigation/index.js
@ -0,0 +1,2 @@
+export { default as Header } from './header';
+export { default as Menu } from './menu';
--- a/packages/my-joy-beta/src/components/navigation/menu.js
+++ b/packages/my-joy-beta/src/components/navigation/menu.js
@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import forceArray from 'force-array';
+
+import {
+  SectionList,
+  SectionListItem,
+  SectionListNavLink,
+  ViewContainer
+} from 'joyent-ui-toolkit';
+
+const getMenuItems = (links = []) =>
+  links.map(({ pathname, name }) => (
+    <SectionListItem key={pathname}>
+      <SectionListNavLink activeClassName="active" to={pathname}>
+        {name}
+      </SectionListNavLink>
+    </SectionListItem>
+  ));
+
+const Menu = ({ links = [] }) => {
+  const _links = forceArray(links);
+
+  if (!_links.length) {
+    return null;
+  }
+
+  return (
+    <ViewContainer plain>
+      <SectionList>{getMenuItems(_links)}</SectionList>
+    </ViewContainer>
+  );
+};
+
+Menu.propTypes = {
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      pathname: PropTypes.string
+    })
+  )
+};
+
+export default Menu;
--- a/packages/my-joy-beta/src/containers/instances/firewall.js
+++ b/packages/my-joy-beta/src/containers/instances/firewall.js
@ -0,0 +1,66 @@
+import React from 'react';
+import ReactJson from 'react-json-view';
+import PropTypes from 'prop-types';
+import forceArray from 'force-array';
+import { compose, graphql } from 'react-apollo';
+import find from 'lodash.find';
+import get from 'lodash.get';
+
+import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
+
+import GetFirewallRules from '@graphql/list-firewall-rules.gql';
+
+const Firewall = ({
+  firewallEnabled = false,
+  firewallRules = [],
+  loading,
+  error
+}) => {
+  const _title = <Title>Firewall</Title>;
+  const _loading = !(loading && !forceArray(firewallRules).length) ? null : (
+    <StatusLoader />
+  );
+
+  const _rules = !_loading && <ReactJson src={firewallRules} />;
+  const _enabled = !_loading && <ReactJson src={{ firewallEnabled }} />;
+
+  const _error = !(error && !_loading) ? null : (
+    <Message
+      title="Ooops!"
+      message="An error occurred while loading your instance firewall rules"
+      error
+    />
+  );
+
+  return (
+    <ViewContainer center={Boolean(_loading)} main>
+      {_title}
+      {_loading}
+      {_error}
+      {_enabled}
+      {_rules}
+    </ViewContainer>
+  );
+};
+
+Firewall.propTypes = {
+  loading: PropTypes.bool
+};
+
+export default compose(
+  graphql(GetFirewallRules, {
+    options: ({ match }) => ({
+      pollInterval: 1000,
+      variables: {
+        name: get(match, 'params.instance')
+      }
+    }),
+    props: ({ data: { loading, error, variables, ...rest } }) => {
+      const machine = find(get(rest, 'machines', []), ['name', variables.name]);
+      const firewallEnabled = get(machine, 'firewallEnabled', false);
+      const firewallRules = get(machine, 'firewallRules', []);
+
+      return { firewallEnabled, firewallRules, loading, error };
+    }
+  })
+)(Firewall);
--- a/packages/my-joy-beta/src/containers/instances/index.js
+++ b/packages/my-joy-beta/src/containers/instances/index.js
@ -0,0 +1,7 @@
+export { default as List } from './list';
+export { default as Summary } from './summary';
+export { default as Tags } from './tags';
+export { default as Metadata } from './metadata';
+export { default as Networks } from './networks';
+export { default as Firewall } from './firewall';
+export { default as Snapshots } from './snapshots';
--- a/packages/my-joy-beta/src/containers/instances/list.js
+++ b/packages/my-joy-beta/src/containers/instances/list.js
@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { compose, graphql } from 'react-apollo';
+import { connect } from 'react-redux';
+import { reduxForm } from 'redux-form';
+import forceArray from 'force-array';
+import get from 'lodash.get';
+import find from 'lodash.find';
+
+import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
+
+import GetInstances from '@graphql/list-instances.gql';
+import { List as InstanceList } from '@components/instances';
+import GenIndex from '@state/gen-index';
+
+const InstanceListForm = reduxForm({
+  form: `instance-list`
+})(InstanceList);
+
+const List = ({ instances, loading, error }) => {
+  const _title = <Title>Instances</Title>;
+  const _instances = forceArray(instances);
+  const _loading = !(loading && !_instances.length) ? null : <StatusLoader />;
+  const _list = _loading ? null : <InstanceListForm instances={_instances} />;
+
+  const _error = !error ? null : (
+    <Message
+      title="Ooops!"
+      message="An error occurred while loading your instances."
+      error
+    />
+  );
+
+  return (
+    <ViewContainer center={Boolean(_loading)} main>
+      {_title}
+      {!_loading && _error}
+      {_loading}
+      {_list}
+    </ViewContainer>
+  );
+};
+
+List.propTypes = {
+  loading: PropTypes.bool,
+  instances: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string
+    })
+  )
+};
+
+export default compose(
+  graphql(GetInstances, {
+    options: () => ({
+      pollInterval: 1000
+    }),
+    props: ({ ownProps, data: { machines, loading, error } }) => {
+      const _instances = forceArray(machines);
+
+      return {
+        instances: _instances,
+        loading,
+        error,
+        index: GenIndex(_instances)
+      };
+    }
+  }),
+  connect((state, ownProps) => {
+    const filter = get(state, 'form.instance-list.values.filter');
+    const { index, instances = [], ...rest } = ownProps;
+
+    return {
+      ...rest,
+      instances: !filter
+        ? instances
+        : index.search(filter).map(({ ref }) => find(instances, ['id', ref]))
+    };
+  })
+)(List);
--- a/packages/my-joy-beta/src/containers/instances/metadata.js
+++ b/packages/my-joy-beta/src/containers/instances/metadata.js
@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import paramCase from 'param-case';
+import forceArray from 'force-array';
+import { compose, graphql } from 'react-apollo';
+import { reduxForm } from 'redux-form';
+import find from 'lodash.find';
+import get from 'lodash.get';
+
+import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
+
+import GetMetadata from '@graphql/list-metadata.gql';
+import { KeyValue } from '@components/instances';
+
+const Metadata = ({ metadata = [], loading, error }) => {
+  const _title = <Title>Metadata</Title>;
+  const _loading = !(loading && !forceArray(metadata).length) ? null : (
+    <StatusLoader />
+  );
+
+  const metadataNames = Object.keys(metadata).map(name => ({
+    key: paramCase(name),
+    name
+  }));
+
+  const InstanceMetadataForm = reduxForm({
+    form: `instance-tags`,
+    initialValues: metadataNames.reduce(
+      (all, { key, name }) => ({
+        ...all,
+        [`${key}-name`]: name,
+        [`${key}-value`]: metadata[name]
+      }),
+      {}
+    )
+  })(KeyValue);
+
+  const _tags = !_loading && (
+    <InstanceMetadataForm keys={metadataNames.map(({ key }) => key)} />
+  );
+
+  const _error = !(error && !_loading) ? null : (
+    <Message
+      title="Ooops!"
+      message="An error occurred while loading your instance metadata"
+      error
+    />
+  );
+
+  return (
+    <ViewContainer center={Boolean(_loading)} main>
+      {_title}
+      {_loading}
+      {_error}
+      {_tags}
+    </ViewContainer>
+  );
+};
+
+Metadata.propTypes = {
+  loading: PropTypes.bool
+};
+
+export default compose(
+  graphql(GetMetadata, {
+    options: ({ match }) => ({
+      pollInterval: 1000,
+      variables: {
+        name: get(match, 'params.instance')
+      }
+    }),
+    props: ({ data: { loading, error, variables, ...rest } }) => ({
+      metadata: get(
+        find(get(rest, 'machines', []), ['name', variables.name]),
+        'metadata',
+        []
+      ),
+      loading,
+      error
+    })
+  })
+)(Metadata);
--- a/packages/my-joy-beta/src/containers/instances/networks.js
+++ b/packages/my-joy-beta/src/containers/instances/networks.js
@ -0,0 +1,61 @@
+import React from 'react';
+import ReactJson from 'react-json-view';
+import PropTypes from 'prop-types';
+import forceArray from 'force-array';
+import { compose, graphql } from 'react-apollo';
+import find from 'lodash.find';
+import get from 'lodash.get';
+
+import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
+
+import GetNetworks from '@graphql/list-networks.gql';
+
+const Networks = ({ networks = [], loading, error }) => {
+  const _title = <Title>Networks</Title>;
+  const _loading = !(loading && !forceArray(networks).length) ? null : (
+    <StatusLoader />
+  );
+
+  const _summary = !_loading && <ReactJson src={networks} />;
+
+  const _error = !(error && !_loading) ? null : (
+    <Message
+      title="Ooops!"
+      message="An error occurred while loading your instance networks"
+      error
+    />
+  );
+
+  return (
+    <ViewContainer center={Boolean(_loading)} main>
+      {_title}
+      {_loading}
+      {_error}
+      {_summary}
+    </ViewContainer>
+  );
+};
+
+Networks.propTypes = {
+  loading: PropTypes.bool
+};
+
+export default compose(
+  graphql(GetNetworks, {
+    options: ({ match }) => ({
+      pollInterval: 1000,
+      variables: {
+        name: get(match, 'params.instance')
+      }
+    }),
+    props: ({ data: { loading, error, variables, ...rest } }) => ({
+      networks: get(
+        find(get(rest, 'machines', []), ['name', variables.name]),
+        'networks',
+        []
+      ),
+      loading,
+      error
+    })
+  })
+)(Networks);
--- a/packages/my-joy-beta/src/containers/instances/snapshots.js
+++ b/packages/my-joy-beta/src/containers/instances/snapshots.js
@ -0,0 +1,61 @@
+import React from 'react';
+import ReactJson from 'react-json-view';
+import PropTypes from 'prop-types';
+import forceArray from 'force-array';
+import { compose, graphql } from 'react-apollo';
+import find from 'lodash.find';
+import get from 'lodash.get';
+
+import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
+
+import GetSnapshots from '@graphql/list-snapshots.gql';
+
+const Snapshots = ({ snapshots = [], loading, error }) => {
+  const _title = <Title>Snapshots</Title>;
+  const _loading = !(loading && !forceArray(snapshots).length) ? null : (
+    <StatusLoader />
+  );
+
+  const _summary = !_loading && <ReactJson src={snapshots} />;
+
+  const _error = !(error && !_loading) ? null : (
+    <Message
+      title="Ooops!"
+      message="An error occurred while loading your instance snapshots"
+      error
+    />
+  );
+
+  return (
+    <ViewContainer center={Boolean(_loading)} main>
+      {_title}
+      {_loading}
+      {_error}
+      {_summary}
+    </ViewContainer>
+  );
+};
+
+Snapshots.propTypes = {
+  loading: PropTypes.bool
+};
+
+export default compose(
+  graphql(GetSnapshots, {
+    options: ({ match }) => ({
+      pollInterval: 1000,
+      variables: {
+        name: get(match, 'params.instance')
+      }
+    }),
+    props: ({ data: { loading, error, variables, ...rest } }) => ({
+      snapshots: get(
+        find(get(rest, 'machines', []), ['name', variables.name]),
+        'snapshots',
+        []
+      ),
+      loading,
+      error
+    })
+  })
+)(Snapshots);
--- a/packages/my-joy-beta/src/containers/instances/summary.js
+++ b/packages/my-joy-beta/src/containers/instances/summary.js
@ -0,0 +1,55 @@
+import React from 'react';
+import ReactJson from 'react-json-view';
+import PropTypes from 'prop-types';
+import { compose, graphql } from 'react-apollo';
+import find from 'lodash.find';
+import get from 'lodash.get';
+
+import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
+
+import GetInstance from '@graphql/get-instance.gql';
+
+const Summary = ({ instance = {}, loading, error }) => {
+  const { name } = instance;
+
+  const _title = <Title>Summary</Title>;
+  const _loading = !(loading && !name) ? null : <StatusLoader />;
+  const _summary = !_loading && <ReactJson src={instance} />;
+
+  const _error = !(error && !_loading) ? null : (
+    <Message
+      title="Ooops!"
+      message="An error occurred while loading your instance summary"
+      error
+    />
+  );
+
+  return (
+    <ViewContainer center={Boolean(_loading)} main>
+      {_title}
+      {_loading}
+      {_error}
+      {_summary}
+    </ViewContainer>
+  );
+};
+
+Summary.propTypes = {
+  loading: PropTypes.bool
+};
+
+export default compose(
+  graphql(GetInstance, {
+    options: ({ match }) => ({
+      pollInterval: 1000,
+      variables: {
+        name: get(match, 'params.instance')
+      }
+    }),
+    props: ({ data: { loading, error, variables, ...rest } }) => ({
+      instance: find(get(rest, 'machines', []), ['name', variables.name]),
+      loading,
+      error
+    })
+  })
+)(Summary);
--- a/packages/my-joy-beta/src/containers/instances/tags.js
+++ b/packages/my-joy-beta/src/containers/instances/tags.js
@ -0,0 +1,109 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import paramCase from 'param-case';
+import forceArray from 'force-array';
+import { compose, graphql } from 'react-apollo';
+import { reduxForm } from 'redux-form';
+import find from 'lodash.find';
+import get from 'lodash.get';
+
+import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
+
+import { KeyValue } from '@components/instances';
+import GetTags from '@graphql/list-tags.gql';
+import PutTags from '@graphql/add-tags.gql';
+
+const TagForms = (tags = []) => tags.map(({ key, formName, formValue, value, name }) => {
+  const TagForm = reduxForm({
+    form: `instance-tags-${key}`,
+    initialValues: {
+      [formName]: name,
+      [formValue]: value
+    }
+  })(KeyValue);
+
+  return (
+    <TagForm
+      key={key}
+      formName={formName}
+      formValue={formValue}
+      name={key}
+      onSubmit={val => console.log(key, val)}
+      onRemove={key => console.log('remove', key)}
+    />
+  );
+});
+
+const Tags = ({ tags = [], loading, error }) => {
+  const _title = <Title>Tags</Title>;
+  const _loading = !(loading && !forceArray(tags).length) ? null : (
+    <StatusLoader />
+  );
+
+  const _tags = !_loading && TagForms(Object.values(tags));
+
+  const _error = !(error && !_loading) ? null : (
+    <Message
+      title="Ooops!"
+      message="An error occurred while loading your instance tags"
+      error
+    />
+  );
+
+  return (
+    <ViewContainer center={Boolean(_loading)} main>
+      {_title}
+      {_loading}
+      {_error}
+      {_tags}
+    </ViewContainer>
+  );
+};
+
+Tags.propTypes = {
+  loading: PropTypes.bool
+};
+
+export default compose(
+  graphql(GetTags, {
+    options: ({ match }) => ({
+      pollInterval: 1000,
+      variables: {
+        name: get(match, 'params.instance')
+      }
+    }),
+    props: ({ data: { loading, error, variables, ...rest } }) => {
+      const values = get(
+        find(get(rest, 'machines', []), ['name', variables.name]),
+        'tags',
+        []
+      );
+
+
+      const tags = Object.keys(values).reduce((all, name) => {
+        const key = paramCase(name);
+
+        return {
+          ...all,
+          [key]: {
+            key,
+            formName: `${key}-name`,
+            formValue: `${key}-value`,
+            value: values[name],
+            name
+          }
+        };
+      }, {});
+
+      return { tags, loading, error };
+    }
+  }),
+  graphql(PutTags, {
+    props: ({ mutate, ownProps }) => ({
+      updateTag: (name = '', value = '') =>
+        mutate({
+          variables: { name, value }
+        })
+    })
+  })
+)(Tags);
--- a/packages/my-joy-beta/src/containers/navigation/breadcrumb.js
+++ b/packages/my-joy-beta/src/containers/navigation/breadcrumb.js
@ -0,0 +1,25 @@
+import React from 'react';
+import paramCase from 'param-case';
+import get from 'lodash.get';
+
+import { Breadcrumb } from 'joyent-ui-toolkit';
+
+export default ({ match }) => {
+  const instance = get(match, 'params.instance');
+
+  const links = [
+    {
+      name: '/',
+      pathname: '/instances'
+    }
+  ].concat(
+    instance && [
+      {
+        name: paramCase(instance),
+        pathname: `/instances/${instance}`
+      }
+    ]
+  );
+
+  return <Breadcrumb links={links.filter(Boolean)} />;
+};
--- a/packages/my-joy-beta/src/containers/navigation/index.js
+++ b/packages/my-joy-beta/src/containers/navigation/index.js
@ -0,0 +1,2 @@
+export { default as Breadcrumb } from './breadcrumb';
+export { default as Menu } from './menu';
--- a/packages/my-joy-beta/src/containers/navigation/menu.js
+++ b/packages/my-joy-beta/src/containers/navigation/menu.js
@ -0,0 +1,32 @@
+import { connect } from 'react-redux';
+import paramCase from 'param-case';
+import titleCase from 'title-case';
+import isString from 'lodash.isstring';
+import get from 'lodash.get';
+
+import { Menu } from '@components/navigation';
+
+export default connect((state, { match }) => {
+  const instanceSlug = get(match, 'params.instance');
+  const allSections = get(state, 'ui.sections');
+  const sections = instanceSlug ? allSections.instances : [];
+
+  const links = sections
+    .map(
+      section =>
+        !isString(section)
+          ? section
+          : {
+              pathname: paramCase(section),
+              name: titleCase(section)
+            }
+    )
+    .map(({ name, pathname }) => ({
+      name,
+      pathname: `/instances/${instanceSlug}/${pathname}`
+    }));
+
+  return {
+    links
+  };
+})(Menu);
--- a/packages/my-joy-beta/src/graphql/add-tags.gql
+++ b/packages/my-joy-beta/src/graphql/add-tags.gql
@ -0,0 +1,3 @@
+mutation addMachineTags($id: ID!, $tags: DynamicObjectType!) {
+  addMachineTags(id: $id, tags: $tags)
+}
--- a/packages/my-joy-beta/src/graphql/get-instance.gql
+++ b/packages/my-joy-beta/src/graphql/get-instance.gql
@ -0,0 +1,15 @@
+query Instance($name: String!) {
+  machines(name: $name) {
+    id
+    name
+    brand
+    state
+    image
+    memory
+    disk
+    created
+    updated
+    firewallEnabled
+    package
+  }
+}
--- a/packages/my-joy-beta/src/graphql/list-firewall-rules.gql
+++ b/packages/my-joy-beta/src/graphql/list-firewall-rules.gql
@ -0,0 +1,14 @@
+query Instance($name: String!) {
+  machines(name: $name) {
+    id
+    name
+    firewallEnabled
+    firewallRules {
+      id
+      enabled
+      global
+      description
+      rule
+    }
+  }
+}
--- a/packages/my-joy-beta/src/graphql/list-instances.gql
+++ b/packages/my-joy-beta/src/graphql/list-instances.gql
@ -0,0 +1,13 @@
+query Instances {
+  machines {
+    id
+    name
+    brand
+    state
+    image
+    metadata
+    tags
+    firewallEnabled
+    docker
+  }
+}
--- a/packages/my-joy-beta/src/graphql/list-metadata.gql
+++ b/packages/my-joy-beta/src/graphql/list-metadata.gql
@ -0,0 +1,7 @@
+query Instance($name: String!) {
+  machines(name: $name) {
+    id
+    name
+    metadata
+  }
+}
--- a/packages/my-joy-beta/src/graphql/list-networks.gql
+++ b/packages/my-joy-beta/src/graphql/list-networks.gql
@ -0,0 +1,20 @@
+query Instance($name: String!) {
+  machines(name: $name) {
+    id
+    name
+    networks {
+      id
+      name
+      public
+      fabric
+      description
+      subnet
+      provisionStartIp
+      provisionEndIp
+      gateway
+      resolvers
+      routes
+      internetNat
+    }
+  }
+}
--- a/packages/my-joy-beta/src/graphql/list-snapshots.gql
+++ b/packages/my-joy-beta/src/graphql/list-snapshots.gql
@ -0,0 +1,10 @@
+query Instance($name: String!) {
+  machines(name: $name) {
+    id
+    name
+    snapshots {
+      name
+      state
+    }
+  }
+}
--- a/packages/my-joy-beta/src/graphql/list-tags.gql
+++ b/packages/my-joy-beta/src/graphql/list-tags.gql
@ -0,0 +1,7 @@
+query Instance($name: String!) {
+  machines(name: $name) {
+    id
+    name
+    tags
+  }
+}
--- a/packages/my-joy-beta/src/index.js
+++ b/packages/my-joy-beta/src/index.js
@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { register } from './sw';
+import App from './app';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+register();
--- a/packages/my-joy-beta/src/router.js
+++ b/packages/my-joy-beta/src/router.js
@ -0,0 +1,76 @@
+import React from 'react';
+import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
+import get from 'lodash.get';
+
+import { PageContainer } from 'joyent-ui-toolkit';
+
+import { Breadcrumb, Menu } from '@containers/navigation';
+import { Header } from '@components/navigation';
+
+import {
+  List as Instances,
+  Summary as InstanceSummary,
+  Tags as InstanceTags,
+  Metadata as InstanceMetadata,
+  Networks as InstanceNetworks,
+  Firewall as InstanceFirewall,
+  Snapshots as InstanceSnapshots
+} from '@containers/instances';
+
+export default () => (
+  <BrowserRouter>
+    <PageContainer>
+      <Route path="*" component={Header} />
+
+      <Switch>
+        <Route path="/instances" exact component={Breadcrumb} />
+        <Route path="/instances/:instance" component={Breadcrumb} />
+      </Switch>
+
+      <Switch>
+        <Route path="/instances" exact component={Menu} />
+        <Route path="/instances/:instance/:section" component={Menu} />
+      </Switch>
+
+      <Route path="/instances" exact component={Instances} />
+
+      <Route
+        path="/instances/:instance/summary"
+        exact
+        component={InstanceSummary}
+      />
+      <Route path="/instances/:instance/tags" exact component={InstanceTags} />
+      <Route
+        path="/instances/:instance/metadata"
+        exact
+        component={InstanceMetadata}
+      />
+      <Route
+        path="/instances/:instance/networks"
+        exact
+        component={InstanceNetworks}
+      />
+      <Route
+        path="/instances/:instance/firewall"
+        exact
+        component={InstanceFirewall}
+      />
+      <Route
+        path="/instances/:instance/snapshots"
+        exact
+        component={InstanceSnapshots}
+      />
+      <Route
+        path="/instances/:instance"
+        exact
+        component={({ match }) => (
+          <Redirect
+            to={`/instances/${get(match, 'params.instance')}/summary`}
+          />
+        )}
+      />
+
+      <Route path="/" exact component={() => <Redirect to="/instances" />} />
+    </PageContainer>
+  </BrowserRouter>
+);
--- a/packages/my-joy-beta/src/state/gen-index.js
+++ b/packages/my-joy-beta/src/state/gen-index.js
@ -0,0 +1,16 @@
+import Lunr from 'lunr';
+
+Lunr.tokenizer.separator = /[\s\-|_]+/;
+
+export default items =>
+  Lunr(function() {
+    const fields = items
+      .map(item => Object.keys(item))
+      .reduce((all, keys) => all.concat(keys), [])
+      // eslint-disable-next-line no-implicit-coercion
+      .reduce((all, key) => (~all.indexOf(key) ? all : all.concat(key)), [])
+      .filter(key => !key.match(/^__/));
+
+    fields.forEach(field => this.field(field));
+    items.forEach(item => this.add(item));
+  });
--- a/packages/my-joy-beta/src/state/reducers/index.js
+++ b/packages/my-joy-beta/src/state/reducers/index.js
@ -0,0 +1 @@
+export { default as ui } from './ui';
--- a/packages/my-joy-beta/src/state/reducers/ui.js
+++ b/packages/my-joy-beta/src/state/reducers/ui.js
@ -0,0 +1,3 @@
+import { handleActions } from 'redux-actions';
+
+export default handleActions({}, {});
--- a/packages/my-joy-beta/src/state/state.js
+++ b/packages/my-joy-beta/src/state/state.js
@ -0,0 +1,15 @@
+export default {
+  ui: {
+    sections: {
+      instances: [
+        'summary',
+        'tags',
+        'metadata',
+        'networks',
+        'firewall',
+        'snapshots',
+        'affinity'
+      ]
+    }
+  }
+};
--- a/packages/my-joy-beta/src/state/store.js
+++ b/packages/my-joy-beta/src/state/store.js
@ -0,0 +1,62 @@
+import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
+import { reducer as formReducer } from 'redux-form';
+import { ApolloClient, createNetworkInterface } from 'react-apollo';
+
+import { ui } from './reducers';
+import state from './state';
+
+const GLOBAL =
+  typeof window === 'object'
+    ? window
+    : {
+        location: {
+          hostname: '0.0.0.0'
+        }
+      };
+
+const GQL_PORT = process.env.REACT_APP_GQL_PORT || 443;
+const GQL_PROTOCOL = process.env.REACT_APP_GQL_PROTOCOL || 'https';
+const GQL_HOSTNAME =
+  process.env.REACT_APP_GQL_HOSTNAME || GLOBAL.location.hostname;
+
+export const client = new ApolloClient({
+  dataIdFromObject: o => {
+    const id = o.id
+      ? o.id
+      : o.slug
+        ? o.slug
+        : o.uuid
+          ? o.uuid
+          : o.timestamp
+            ? 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';
+
+    return `${o.__typename}:${id}`;
+  },
+  networkInterface: createNetworkInterface({
+    uri: `${GQL_PROTOCOL}://${GQL_HOSTNAME}:${GQL_PORT}/graphql`
+  })
+});
+
+export const store = createStore(
+  combineReducers({
+    apollo: client.reducer(),
+    form: formReducer,
+    ui
+  }),
+  state, // Initial state
+  compose(
+    applyMiddleware(client.middleware()),
+    // If you are using the devToolsExtension, you can add it here also
+    // eslint-disable-next-line no-negated-condition
+    typeof GLOBAL.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined'
+      ? GLOBAL.__REDUX_DEVTOOLS_EXTENSION__()
+      : f => f
+  )
+);
--- a/packages/my-joy-beta/src/sw.js
+++ b/packages/my-joy-beta/src/sw.js
@ -0,0 +1,108 @@
+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register() {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (!isLocalhost) {
+        // Is not local host. Just register service worker
+        registerValidSW(swUrl);
+      } else {
+        // This is running on localhost. Lets check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the old content will have been purged and
+              // the fresh content will have been added to the cache.
+              // It's the perfect time to display a "New content is
+              // available; please refresh." message in your web app.
+              console.log('New content is available; please refresh.');
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      if (
+        response.status === 404 ||
+        response.headers.get('content-type').indexOf('javascript') === -1
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}
--- a/packages/my-joy-beta/test/file-mock.js
+++ b/packages/my-joy-beta/test/file-mock.js
@ -0,0 +1 @@
+module.exports = 'test-file-mock';
--- a/packages/my-joy-beta/test/mocks/index.js
+++ b/packages/my-joy-beta/test/mocks/index.js
@ -0,0 +1,3 @@
+export { default as Router } from './router';
+export { default as Store } from './store';
+export { default as Theme } from './theme';
--- a/packages/my-joy-beta/test/mocks/router.js
+++ b/packages/my-joy-beta/test/mocks/router.js
@ -0,0 +1,4 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+export default ({ children }) => <MemoryRouter>{children}</MemoryRouter>;
--- a/packages/my-joy-beta/test/mocks/store.js
+++ b/packages/my-joy-beta/test/mocks/store.js
@ -0,0 +1,9 @@
+import React from 'react';
+import { client, store } from '@state/store';
+import { ApolloProvider } from 'react-apollo';
+
+export default ({ children }) => (
+  <ApolloProvider client={client} store={store}>
+    {children}
+  </ApolloProvider>
+);
--- a/packages/my-joy-beta/test/mocks/theme.js
+++ b/packages/my-joy-beta/test/mocks/theme.js
@ -0,0 +1,7 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { theme } from 'joyent-ui-toolkit';
+
+export default ({ children }) => (
+  <ThemeProvider theme={theme}>{children}</ThemeProvider>
+);
--- a/packages/my-joy-beta/test/run
+++ b/packages/my-joy-beta/test/run
@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('react-scripts/config/env');
+
+const jest = require('jest');
+const argv = process.argv.slice(2);
+
+// This is not necessary after eject because we embed config into package.json.
+const createJestConfig = require('react-scripts/scripts/utils/createJestConfig');
+const path = require('path');
+const paths = require('react-scripts/config/paths');
+
+const config = createJestConfig(
+  relativePath =>
+    path.resolve(
+      __dirname,
+      '../../../node_modules/react-scripts',
+      relativePath
+    ),
+  path.resolve(__dirname, '../../../'),
+  false
+);
+
+// patch
+config.testEnvironment = 'node';
+config.transform = Object.assign(
+  {},
+  {
+    '\\.(gql|graphql)$': 'jest-transform-graphql'
+  },
+  config.transform
+);
+config.testMatch = [
+  '<rootDir>/packages/joyent-boilerplate/src/**/**/__tests__/**/*.js',
+  '<rootDir>/packages/joyent-boilerplate/src/**/**/**/?(*.)(spec|test).js'
+];
+config.moduleNameMapper = Object.assign({}, config.moduleNameMapper, {
+  '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+    '<rootDir>/packages/joyent-boilerplate/test/file-mock.js',
+  '^@root/(.*)$': '<rootDir>/packages/joyent-boilerplate/src/$1',
+  '^@mocks/(.*)$': '<rootDir>/packages/joyent-boilerplate/test/mocks$1',
+  '^@components/(.*)$':
+    '<rootDir>/packages/joyent-boilerplate/src/components/$1',
+  '^@containers/(.*)$':
+    '<rootDir>/packages/joyent-boilerplate/src/containers/$1',
+  '^@graphql/(.*)$': '<rootDir>/packages/joyent-boilerplate/src/graphql/$1',
+  '^@assets/(.*)$': '<rootDir>/packages/joyent-boilerplate/src/assets/$1',
+  '^@state/(.*)$': '<rootDir>/packages/joyent-boilerplate/src/state/$1'
+});
+
+argv.push('--config', JSON.stringify(config));
+
+jest.run(argv);
--- a/packages/my-joyent/.stylelintrc
+++ b/packages/my-joyent/.stylelintrc
@ -1,8 +1,3 @@
 {
-  "processors": ["stylelint-processor-styled-components"],
-  "extends": [
-    "stylelint-config-standard",
-    "stylelint-config-styled-components"
-  ],
-  "syntax": "scss"
+  "extends": ["stylelint-config-joyent-portal"]
 }
--- a/packages/my-joyent/Dockerfile
+++ b/packages/my-joyent/Dockerfile
@ -1,19 +0,0 @@
-FROM quay.io/yldio/alpine-node-containerpilot:latest
-
-RUN apk add --update nginx
-
-ENV CONTAINERPILOT /etc/containerpilot.json5
-
-RUN npm install -g npm@^4
-RUN npm config set loglevel info \
-	&& yarn add lerna@^2.0.0
-
-RUN ./node_modules/.bin/lerna clean --yes --scope my-joyent --include-filtered-dependencies \
-	&& ./node_modules/.bin/lerna bootstrap --scope my-joyent --include-filtered-dependencies
-
-COPY packages/my-joyent/etc/containerpilot.json5 ${CONTAINERPILOT}
-COPY packages/my-joyent/etc/nginx.conf.tmpl /etc/nginx/nginx.conf.tmpl
-
-WORKDIR /opt/app/packages/my-joyent
-
-CMD ["/bin/containerpilot"]
--- a/packages/my-joyent/package.json
+++ b/packages/my-joyent/package.json
@ -21,7 +21,7 @@
    "jest-cli": "^21.0.1",
    "joyent-ui-toolkit": "^2.0.0",
    "lodash.isempty": "^4.4.0",
-    "normalized-styled-components": "^1.0.9",
+    "normalized-styled-components": "^1.0.14",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-apollo": "^1.4.15",
@ -34,8 +34,8 @@
    "redux-form": "^7.0.3",
    "remcalc": "^1.0.8",
    "styled-components": "^2.1.2",
-    "styled-is": "^1.0.11",
-    "unitcalc": "^1.0.8"
+    "styled-is": "^1.0.14",
+    "unitcalc": "^1.1.0"
  },
  "devDependencies": {
    "apr-for-each": "^1.0.6",
@ -43,7 +43,7 @@
    "babel-minify-webpack-plugin": "^0.2.0",
    "babel-plugin-inline-react-svg": "^0.4.0",
    "babel-plugin-styled-components": "^1.2.0",
-    "babel-preset-joyent-portal": "^2.0.0",
+    "babel-preset-joyent-portal": "^3.0.1",
    "commitizen": "^2.9.6",
    "cross-env": "^5.0.5",
    "eslint": "^4.5.0",
@ -63,9 +63,6 @@
    "react-test-renderer": "^15.6.1",
    "redrun": "^5.9.17",
    "stylelint": "^8.1.1",
-    "stylelint-config-primer": "^2.0.1",
-    "stylelint-config-standard": "^17.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^0.4.0"
+    "stylelint-config-joyent-portal": "^2.0.0"
  }
 }
--- a/packages/my-joyent/src/app.js
+++ b/packages/my-joyent/src/app.js
@ -1,28 +1,20 @@
 import React, { Component } from 'react';
 import { ThemeProvider, injectGlobal } from 'styled-components';
-import { theme, global } from 'joyent-ui-toolkit';
+import { theme, RootContainer } from 'joyent-ui-toolkit';
 import { ApolloProvider } from 'react-apollo';

 import { client, store } from '@state/store';
 import Router from '@root/router';
 import { register } from './sw';

-class App extends Component {
-  componentWillMount() {
-    injectGlobal`
-      ${global}
-    `;
-  }
-
-  render() {
-    return (
-      <ApolloProvider client={client} store={store}>
-        <ThemeProvider theme={theme}>{Router}</ThemeProvider>
-      </ApolloProvider>
-    );
-  }
-}
-
-export default App;
+export default () => (
+  <ApolloProvider client={client} store={store}>
+    <ThemeProvider theme={theme}>
+      <RootContainer>
+        <Router />
+      </RootContainer>
+    </ThemeProvider>
+  </ApolloProvider>
+);

 register();
--- a/packages/my-joyent/src/components/diskTypeForm/tests/snapshots/index.spec.js.snap
+++ b/packages/my-joyent/src/components/diskTypeForm/tests/snapshots/index.spec.js.snap
@ -65,6 +65,7 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
  height: 1.125rem;
  top: 0;
  box-sizing: border-box;
+  cursor: pointer;
  background-color: rgb(255,255,255);
  box-shadow: none;
  border: 1px solid;
@ -98,11 +99,11 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
  width: 1.125rem;
  height: 1.125rem;
  position: relative;
+  cursor: pointer;
 }

 .c5 {
  list-style-type: none;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
 }

@ -135,7 +136,6 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
  max-width: 100%;
  padding: 0;
  white-space: normal;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 600;
 }

@ -197,7 +197,7 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
              <input
                checked={false}
                className="c7"
-                id="bZXIZF"
+                id="cjYpBB"
                name="magnetic"
                onBlur={[Function]}
                onChange={[Function]}
@ -209,7 +209,7 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
              />
              <label
                className="c8"
-                htmlFor="bZXIZF"
+                htmlFor="cjYpBB"
              />
            </div>
            Magnetic
@ -239,7 +239,7 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
              <input
                checked={false}
                className="c7"
-                id="cvStXY"
+                id="cBnwtF"
                name="ssd"
                onBlur={[Function]}
                onChange={[Function]}
@ -251,7 +251,7 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
              />
              <label
                className="c8"
-                htmlFor="cvStXY"
+                htmlFor="cBnwtF"
              />
            </div>
            SSD
--- a/packages/my-joyent/src/components/empty/tests/snapshots/index.spec.js.snap
+++ b/packages/my-joyent/src/components/empty/tests/snapshots/index.spec.js.snap
@ -4,7 +4,6 @@ exports[`renders <Package /> without throwing 1`] = `
 .c4 {
  font-size: 0.9375rem;
  line-height: 1.5;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 600;
  display: -webkit-box;
  display: -webkit-flex;
--- a/packages/my-joyent/src/components/filters/tests/snapshots/filters.spec.js.snap
+++ b/packages/my-joyent/src/components/filters/tests/snapshots/filters.spec.js.snap
@ -25,7 +25,6 @@ exports[`renders <Filters /> without throwing 1`] = `
  margin: 0;
  padding: 0.9375rem 1.125rem;
  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  text-align: center;
@ -113,7 +112,6 @@ exports[`renders <Filters /> without throwing 1`] = `
  margin: 0;
  padding: 0.9375rem 1.125rem;
  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  text-align: center;
@ -177,7 +175,6 @@ exports[`renders <Filters /> without throwing 1`] = `
 }

 .c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  font-style: normal;
@ -185,155 +182,6 @@ exports[`renders <Filters /> without throwing 1`] = `
  display: block;
 }

-.c23 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  display: none;
-}
-
-.c23[type='checkbox'],
-.c23[type='radio'] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-.c23[type='number']::-webkit-inner-spin-button,
-.c23[type='number']::-webkit-outer-spin-button {
-  height: auto;
-}
-
-.c23[type='search'] {
-  -webkit-appearance: textfield;
-  -moz-appearance: textfield;
-  appearance: textfield;
-  outline-offset: -0.125rem;
-}
-
-.c23[type='search']::-webkit-search-cancel-button,
-.c23[type='search']::-webkit-search-decoration {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-.c23::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  font: inherit;
-}
-
-.c23:checked + label::after {
-  opacity: 1;
-}
-
-.c23:selected + label::after {
-  opacity: 1;
-}
-
-.c23:disabled + label {
-  background-color: rgb(249,249,249);
-}
-
-.c23:disabled + label::after {
-  opacity: 0.3;
-}
-
-.c24 {
-  color: rgb(100,100,100);
-  position: absolute;
-  width: 1.125rem;
-  height: 1.125rem;
-  top: 0;
-  box-sizing: border-box;
-  background-color: rgb(255,255,255);
-  box-shadow: none;
-  border: 1px solid;
-  cursor: pointer;
-  border-radius: 4px;
-  width: 1.125rem;
-  height: 1.125rem;
-}
-
-.c24::after {
-  opacity: 0;
-  content: '';
-  position: absolute;
-  width: 0.375rem;
-  height: 0.125rem;
-  background: transparent;
-  top: 0.3125rem;
-  left: 0.25rem;
-  border: 0.125rem solid;
-  border-top: none;
-  border-right: none;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
-
-.c22 {
-  display: inline-block;
-  vertical-align: text-bottom;
-  margin-right: 0.5rem;
-  width: 1.125rem;
-  height: 1.125rem;
-  position: relative;
-}
-
-.c21 {
-  list-style-type: none;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-}
-
-.c19 {
-  margin: 0;
-  padding: 0;
-}
-
-.c20 {
-  padding: 0.35em 0.75em 0.625em;
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  width: 100%;
-  height: auto;
-  -webkit-margin-start: 0;
-  -webkit-margin-end: 0;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-}
-
-.c9 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  margin-right: 0.75rem;
-  font-weight: bold;
-}
-
-.c17 {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 600;
-}
-
 .c13 {
  font-size: 0.8125rem;
  position: absolute;
@ -399,11 +247,159 @@ exports[`renders <Filters /> without throwing 1`] = `
  min-height: 0.625rem;
 }

+.c9 {
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  margin-right: 0.75rem;
+  font-weight: bold;
+}
+
 .c8 {
  margin-bottom: 0.625rem;
  margin-top: 0.75rem;
 }

+.c23 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  display: none;
+}
+
+.c23[type='checkbox'],
+.c23[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c23[type='number']::-webkit-inner-spin-button,
+.c23[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c23[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c23[type='search']::-webkit-search-cancel-button,
+.c23[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c23::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c23:checked + label::after {
+  opacity: 1;
+}
+
+.c23:selected + label::after {
+  opacity: 1;
+}
+
+.c23:disabled + label {
+  background-color: rgb(249,249,249);
+}
+
+.c23:disabled + label::after {
+  opacity: 0.3;
+}
+
+.c24 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  top: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 1px solid;
+  cursor: pointer;
+  border-radius: 4px;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c24::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c22 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  margin-right: 0.5rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c21 {
+  list-style-type: none;
+  font-weight: 400;
+}
+
+.c19 {
+  margin: 0;
+  padding: 0;
+}
+
+.c20 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c17 {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+  font-weight: 600;
+}
+
 .c16 {
  margin-top: 0.75rem;
  min-width: 12.5rem;
@ -928,7 +924,7 @@ exports[`renders <Filters /> without throwing 1`] = `
                  <input
                    checked={false}
                    className="c23"
-                    id="sIMIU"
+                    id="ctHMev"
                    name="magnetic"
                    onBlur={[Function]}
                    onChange={[Function]}
@ -940,7 +936,7 @@ exports[`renders <Filters /> without throwing 1`] = `
                  />
                  <label
                    className="c24"
-                    htmlFor="sIMIU"
+                    htmlFor="ctHMev"
                  />
                </div>
                Magnetic
@ -970,7 +966,7 @@ exports[`renders <Filters /> without throwing 1`] = `
                  <input
                    checked={false}
                    className="c23"
-                    id="bCkzvd"
+                    id="buhnul"
                    name="ssd"
                    onBlur={[Function]}
                    onChange={[Function]}
@ -982,7 +978,7 @@ exports[`renders <Filters /> without throwing 1`] = `
                  />
                  <label
                    className="c24"
-                    htmlFor="bCkzvd"
+                    htmlFor="buhnul"
                  />
                </div>
                SSD
--- a/packages/my-joyent/src/components/layout/tests/snapshots/container.spec.js.snap
+++ b/packages/my-joyent/src/components/layout/tests/snapshots/container.spec.js.snap
@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders <Container /> without throwing 1`] = `
-.c0 {
-  margin-right: auto;
-  margin-left: auto;
-  padding-top: 1.1875rem;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  display: block;
-  -webkit-flex-flow: column;
-  -ms-flex-flow: column;
-  flex-flow: column;
-}
-
-@media only screen and (min-width:48em) {
-  .c0 {
-    width: 46rem;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c0 {
-    width: 61rem;
-  }
-}
-
-@media only screen and (min-width:75em) {
-  .c0 {
-    width: 76rem;
-  }
-}
-
-<div
-  className="c0"
-/>
-`;
--- a/packages/my-joyent/src/components/layout/tests/container.spec.js
+++ b/packages/my-joyent/src/components/layout/tests/container.spec.js
@ -1,14 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import React from 'react';
-import renderer from 'react-test-renderer';
-import 'jest-styled-components';
-
-import Container from '../container';
-
-it('renders <Container /> without throwing', () => {
-  const tree = renderer.create(<Container />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
--- a/packages/my-joyent/src/components/layout/container.js
+++ b/packages/my-joyent/src/components/layout/container.js
@ -1,20 +0,0 @@
-import { Grid } from 'react-styled-flexboxgrid';
-import remcalc from 'remcalc';
-import is, { isNot } from 'styled-is';
-
-export default Grid.extend`
-  padding-top: ${remcalc(19)};
-  ${isNot('plain')`
-    flex: 1 1 auto;
-    display: block;
-    flex-flow: column;
-  `};
-  ${is('center')`
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: center;
-    align-content: center;
-    align-items: center;
-  `};
-`;
--- a/packages/my-joyent/src/components/layout/index.js
+++ b/packages/my-joyent/src/components/layout/index.js
@ -1 +0,0 @@
-export { default as LayoutContainer } from './container';
--- a/packages/my-joyent/src/components/navigation/tests/snapshots/header.spec.js.snap
+++ b/packages/my-joyent/src/components/navigation/tests/snapshots/header.spec.js.snap
@ -2,14 +2,28 @@

 exports[`renders <Header /> without throwing 1`] = `
 .c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
+  margin: 0;
+  font-weight: 400;
+  line-height: 1.875rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  font-size: 1.8125rem;
  margin: 0;
 }

+.c2 + p,
+.c2 + small,
+.c2 + h1,
+.c2 + h2,
+.c2 + label,
+.c2 + h3,
+.c2 + h4,
+.c2 + h5,
+.c2 + div,
+.c2 + span {
+  margin-top: 1.5rem;
+}
+
 .c1 {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
@ -20,31 +34,10 @@ exports[`renders <Header /> without throwing 1`] = `
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
-  padding: 0.9375rem 0;
+  padding: 0.84375rem 0;
 }

 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
  max-height: 3.3125rem;
  min-height: 3.3125rem;
  padding: 0 1.125rem;
--- a/packages/my-joyent/src/components/navigation/tests/snapshots/not-found.spec.js.snap
+++ b/packages/my-joyent/src/components/navigation/tests/snapshots/not-found.spec.js.snap
@ -1,6 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders <NotFound /> without throwing 1`] = `
+.c5 {
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
+  padding-bottom: 2.25rem;
+}
+
 .c6 {
  display: inline-block;
  box-sizing: border-box;
@ -16,7 +36,6 @@ exports[`renders <NotFound /> without throwing 1`] = `
  margin: 0;
  padding: 0.9375rem 1.125rem;
  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  text-align: center;
@ -58,35 +77,33 @@ exports[`renders <NotFound /> without throwing 1`] = `
  pointer-events: none;
 }

-.c3 {
-  font-size: 2rem;
-  margin: 0.625rem 0;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
-  font-size: 2.25rem;
-  font-style: normal;
-  font-stretch: normal;
-  margin: 0;
-}
-
-.c5 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
 .c0 {
  margin-right: auto;
  margin-left: auto;
-  padding-top: 1.1875rem;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  display: block;
-  -webkit-flex-flow: column;
-  -ms-flex-flow: column;
-  flex-flow: column;
+}
+
+.c3 {
+  font-size: 2rem;
+  margin: 0.625rem 0;
+  margin: 0;
+  font-weight: 400;
+  font-size: 2.25rem;
+  line-height: 2.8125rem;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  margin-top: 1.5rem;
 }

 .c1 {
@ -121,6 +138,13 @@ exports[`renders <NotFound /> without throwing 1`] = `
  }
 }

+@media only screen and (max-width:48rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
 <div
  className="c0"
 >
--- a/packages/my-joyent/src/components/navigation/tests/snapshots/section-nav.spec.js.snap
+++ b/packages/my-joyent/src/components/navigation/tests/snapshots/section-nav.spec.js.snap
@ -21,7 +21,6 @@ exports[`renders <SectionNav /> without throwing 1`] = `
 }

 .c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  display: inline-block;
  font-size: 0.9375rem;
@ -30,7 +29,6 @@ exports[`renders <SectionNav /> without throwing 1`] = `
 }

 .c3 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
@ -43,7 +41,7 @@ exports[`renders <SectionNav /> without throwing 1`] = `
 .c1 {
  list-style-type: none;
  padding: 0;
-  margin: 0;
+  margin: 1.125rem 0 0 0;
 }

 <div
--- a/packages/my-joyent/src/components/navigation/header.js
+++ b/packages/my-joyent/src/components/navigation/header.js
@ -15,7 +15,7 @@ const NavHeader = () => (
  <Header>
    <HeaderBrand>
      <Link to="/" name="Go to home">
-        <StyledLogo src={Logo} alt="Triton Logo"/>
+        <StyledLogo src={Logo} alt="Triton Logo" />
      </Link>
    </HeaderBrand>
  </Header>
--- a/packages/my-joyent/src/components/navigation/not-found.js
+++ b/packages/my-joyent/src/components/navigation/not-found.js
@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
-import { H1, P, Button } from 'joyent-ui-toolkit';
-import { LayoutContainer } from '@components/layout';
+import { H1, P, Button, ViewContainer } from 'joyent-ui-toolkit';

 const StyledContainer = styled.div`
  /* Comment For prettier */
@ -26,13 +25,13 @@ const NotFound = ({
  link = 'Back home',
  to = '/'
 }) => (
-  <LayoutContainer>
+  <ViewContainer>
    <StyledContainer>
      <StyledTitle>{title}</StyledTitle>
      <StyledP>{message}</StyledP>
      <Button to={to}>{link}</Button>
    </StyledContainer>
-  </LayoutContainer>
+  </ViewContainer>
 );

 NotFound.propTypes = {
--- a/packages/my-joyent/src/components/package/tests/snapshots/index.spec.js.snap
+++ b/packages/my-joyent/src/components/package/tests/snapshots/index.spec.js.snap
@ -13,7 +13,6 @@ exports[`renders <Package /> without throwing 1`] = `
 .c5 {
  font-size: 0.9375rem;
  line-height: 1.5;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 600;
  display: -webkit-box;
  display: -webkit-flex;
@ -136,7 +135,6 @@ exports[`renders <Package /> without throwing 1`] = `
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
@ -150,12 +148,10 @@ exports[`renders <Package /> without throwing 1`] = `
 .c6 {
  display: inline-block;
  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
 }

 .c8 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
@ -170,7 +166,6 @@ exports[`renders <Package /> without throwing 1`] = `
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  font-weight: 500;
@ -215,7 +210,6 @@ exports[`renders <Package /> without throwing 1`] = `
        <div
          className="c5"
          name="card-title"
-          selected={undefined}
        >
          $
          0.263
@ -224,7 +218,6 @@ exports[`renders <Package /> without throwing 1`] = `
        <div
          className="c6 c5"
          name="card-subtitle"
-          selected={undefined}
        >
          <span
            className="c7"
@ -236,7 +229,6 @@ exports[`renders <Package /> without throwing 1`] = `
        <div
          className="c6 c5"
          name="card-subtitle"
-          selected={undefined}
        >
          <span
            className="c7"
@ -248,7 +240,6 @@ exports[`renders <Package /> without throwing 1`] = `
        <div
          className="c6 c5"
          name="card-subtitle"
-          selected={undefined}
        >
          <span
            className="c7"
@ -260,7 +251,6 @@ exports[`renders <Package /> without throwing 1`] = `
        <div
          className="c6 c5"
          name="card-subtitle"
-          selected={undefined}
        >
          <span
            className="c7"
--- a/packages/my-joyent/src/components/packages/tests/snapshots/list.spec.js.snap
+++ b/packages/my-joyent/src/components/packages/tests/snapshots/list.spec.js.snap
@ -22,7 +22,6 @@ exports[`renders <Packages /> without throwing 1`] = `
 .c7 {
  font-size: 0.9375rem;
  line-height: 1.5;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 600;
  display: -webkit-box;
  display: -webkit-flex;
@ -145,7 +144,6 @@ exports[`renders <Packages /> without throwing 1`] = `
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
@ -159,12 +157,10 @@ exports[`renders <Packages /> without throwing 1`] = `
 .c8 {
  display: inline-block;
  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
 }

 .c10 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
@ -179,7 +175,6 @@ exports[`renders <Packages /> without throwing 1`] = `
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  font-weight: 500;
@ -286,7 +281,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.016
@ -295,7 +289,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -307,7 +300,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -319,7 +311,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -331,7 +322,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -378,7 +368,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.033
@ -387,7 +376,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -399,7 +387,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -411,7 +398,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -423,7 +409,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -470,7 +455,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.066
@ -479,7 +463,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -491,7 +474,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -503,7 +485,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -515,7 +496,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -562,7 +542,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.131
@ -571,7 +550,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -583,7 +561,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -595,7 +572,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -607,7 +583,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -654,7 +629,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.263
@ -663,7 +637,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -675,7 +648,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -687,7 +659,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -699,7 +670,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -746,7 +716,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.525
@ -755,7 +724,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -767,7 +735,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -779,7 +746,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -791,7 +757,6 @@ exports[`renders <Packages /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
--- a/packages/my-joyent/src/containers/home/tests/snapshots/index.spec.js.snap
+++ b/packages/my-joyent/src/containers/home/tests/snapshots/index.spec.js.snap
--- a/packages/my-joyent/src/containers/home/index.js
+++ b/packages/my-joyent/src/containers/home/index.js
@ -1,15 +1,15 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { changeFilters, resetFilters } from '../../state/actions';
-import { LayoutContainer } from '@components/layout';
-import { Home } from '@components/home';

-const HomeHOC = (props) => (
-  <LayoutContainer>
-    <Home
-      {...props}
-    />
-  </LayoutContainer>
+import { ViewContainer } from 'joyent-ui-toolkit';
+
+import { Home } from '@components/home';
+import { changeFilters, resetFilters } from '../../state/actions';
+
+const HomeHOC = props => (
+  <ViewContainer main>
+    <Home {...props} />
+  </ViewContainer>
 );

 const mapStateToProps = state => {
--- a/packages/my-joyent/src/containers/navigation/tests/snapshots/header.spec.js.snap
+++ b/packages/my-joyent/src/containers/navigation/tests/snapshots/header.spec.js.snap
@ -2,14 +2,28 @@

 exports[`renders <Header /> without throwing 1`] = `
 .c2 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 500;
+  margin: 0;
+  font-weight: 400;
+  line-height: 1.875rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  font-size: 1.8125rem;
  margin: 0;
 }

+.c2 + p,
+.c2 + small,
+.c2 + h1,
+.c2 + h2,
+.c2 + label,
+.c2 + h3,
+.c2 + h4,
+.c2 + h5,
+.c2 + div,
+.c2 + span {
+  margin-top: 1.5rem;
+}
+
 .c1 {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
@ -20,31 +34,10 @@ exports[`renders <Header /> without throwing 1`] = `
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
-  padding: 0.9375rem 0;
+  padding: 0.84375rem 0;
 }

 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
  max-height: 3.3125rem;
  min-height: 3.3125rem;
  padding: 0 1.125rem;
--- a/packages/my-joyent/src/containers/navigation/index.js
+++ b/packages/my-joyent/src/containers/navigation/index.js
@ -1,2 +1 @@
 export { default as Header } from './header';
-export { default as withNotFound } from './not-found-hoc';
--- a/packages/my-joyent/src/containers/packages/tests/snapshots/index.spec.js.snap
+++ b/packages/my-joyent/src/containers/packages/tests/snapshots/index.spec.js.snap
@ -22,7 +22,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
 .c7 {
  font-size: 0.9375rem;
  line-height: 1.5;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 600;
  display: -webkit-box;
  display: -webkit-flex;
@ -145,7 +144,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
@ -159,12 +157,10 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
 .c8 {
  display: inline-block;
  padding: 0 1.125rem;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
 }

 .c10 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
@ -179,7 +175,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  font-weight: 500;
@ -286,7 +281,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.016
@ -295,7 +289,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -307,7 +300,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -319,7 +311,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -331,7 +322,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -378,7 +368,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.033
@ -387,7 +376,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -399,7 +387,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -411,7 +398,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -423,7 +409,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -470,7 +455,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.066
@ -479,7 +463,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -491,7 +474,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -503,7 +485,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -515,7 +496,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -562,7 +542,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.084
@ -571,7 +550,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -583,7 +561,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -595,7 +572,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -607,7 +583,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -654,7 +629,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.131
@ -663,7 +637,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -675,7 +648,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -687,7 +659,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -699,7 +670,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -746,7 +716,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.166
@ -755,7 +724,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -767,7 +735,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -779,7 +746,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -791,7 +757,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -838,7 +803,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.259
@ -847,7 +811,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -859,7 +822,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -871,7 +833,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -883,7 +844,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -930,7 +890,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.263
@ -939,7 +898,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -951,7 +909,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -963,7 +920,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -975,7 +931,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1022,7 +977,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.333
@ -1031,7 +985,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1043,7 +996,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1055,7 +1007,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1067,7 +1018,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1114,7 +1064,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.413
@ -1123,7 +1072,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1135,7 +1083,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1147,7 +1094,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1159,7 +1105,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1206,7 +1151,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.52
@ -1215,7 +1159,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1227,7 +1170,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1239,7 +1181,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1251,7 +1192,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1298,7 +1238,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.525
@ -1307,7 +1246,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1319,7 +1257,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1331,7 +1268,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1343,7 +1279,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1390,7 +1325,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.665
@ -1399,7 +1333,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1411,7 +1344,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1423,7 +1355,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1435,7 +1366,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1482,7 +1412,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              0.825
@ -1491,7 +1420,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1503,7 +1431,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1515,7 +1442,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1527,7 +1453,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1574,7 +1499,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              1.039
@ -1583,7 +1507,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1595,7 +1518,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1607,7 +1529,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1619,7 +1540,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1666,7 +1586,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              1.066
@ -1675,7 +1594,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1687,7 +1605,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1699,7 +1616,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1711,7 +1627,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1758,7 +1673,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              1.75
@ -1767,7 +1681,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1779,7 +1692,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1791,7 +1703,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1803,7 +1714,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1850,7 +1760,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c7"
              name="card-title"
-              selected={false}
            >
              $
              2.31
@ -1859,7 +1768,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1871,7 +1779,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1883,7 +1790,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
@ -1895,7 +1801,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
            <div
              className="c8 c7"
              name="card-subtitle"
-              selected={false}
            >
              <span
                className="c9"
--- a/packages/my-joyent/src/router.js
+++ b/packages/my-joyent/src/router.js
@ -2,29 +2,20 @@ import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import styled from 'styled-components';

+import { PageContainer } from 'joyent-ui-toolkit';
+
 import { Header } from '@containers/navigation';
-
 import HomeHOC from '@containers/home';
-
 import { NotFound } from '@components/navigation';

-const Container = styled.div`
-  display: flex;
-  flex: 1 1 auto;
-  position: relative;
-  flex-flow: column;
-`;
-
-const Router = (
+export default () => (
  <BrowserRouter>
-    <Container>
+    <PageContainer>
      <Route path="/" component={Header} />
      <Switch>
        <Route path="/" exact component={HomeHOC} />
        <Route path="/*" component={NotFound} />
      </Switch>
-    </Container>
+    </PageContainer>
  </BrowserRouter>
 );
-
-export default Router;
--- a/packages/ui-toolkit/.stylelintrc
+++ b/packages/ui-toolkit/.stylelintrc
@ -1,5 +1,4 @@
 {
-  "syntax": "scss",
-  "processors": ["stylelint-processor-styled-components"],
-  "extends": ["stylelint-config-standard", "stylelint-config-primer"]
-}
+  "test": ["./src/**/*.js"],
+  "extends": ["stylelint-config-joyent-portal"]
+}
--- a/packages/ui-toolkit/Dockerfile
+++ b/packages/ui-toolkit/Dockerfile
@ -1,17 +0,0 @@
-FROM quay.io/yldio/alpine-node-containerpilot:latest
-
-ENV CONTAINERPILOT /etc/containerpilot.json5
-
-RUN npm install -g npm@^4 \
- && npm config set loglevel info \
- && yarn add lerna@^2.0.0 serve \
- && ./node_modules/.bin/lerna clean --yes --scope joyent-ui-toolkit --include-filtered-dependencies \
- && ./node_modules/.bin/lerna bootstrap --scope joyent-ui-toolkit --include-filtered-dependencies
-
-COPY packages/ui-toolkit/etc/containerpilot.json5 ${CONTAINERPILOT}
-WORKDIR /opt/app/packages/ui-toolkit
-
-RUN yarn run styleguide:build
-
-EXPOSE 6060
-CMD ["/bin/containerpilot"]
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				`export { default as LayoutContainer } from './container';`