diff --git a/packages/my-joyent/package.json b/packages/my-joyent/package.json
index 63cd43a0..f5d9d13b 100644
--- a/packages/my-joyent/package.json
+++ b/packages/my-joyent/package.json
@@ -18,8 +18,7 @@
     "lint-ci": "redrun -p lint-ci:*",
     "test": "NODE_ENV=test ./test/run --env=jsdom",
     "test-ci":
-      "echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/cp-frontend.xml ./test/run --env=jsdom --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/cp-frontend --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`",
-    "prepublish": "node scripts/postinstall"
+      "echo 0 `# NODE_ENV=test JEST_JUNIT_OUTPUT=$CIRCLE_TEST_REPORTS/test/cp-frontend.xml ./test/run --env=jsdom --coverage --coverageDirectory=$CIRCLE_ARTIFACTS/cp-frontend --testResultsProcessor=$(node -e \"console.log(require.resolve('jest-junit'))\")`"
   },
   "dependencies": {
     "apollo": "^0.2.2",
diff --git a/packages/my-joyent/src/components/home/__tests__/__snapshots__/home.spec.js.snap b/packages/my-joyent/src/components/home/__tests__/__snapshots__/home.spec.js.snap
new file mode 100644
index 00000000..b90e5e33
--- /dev/null
+++ b/packages/my-joyent/src/components/home/__tests__/__snapshots__/home.spec.js.snap
@@ -0,0 +1,1163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Home /> without throwing 1`] = `
+.c13 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  color: ;
+}
+
+.c16 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  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;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c16::-moz-focus-inner,
+.c16[type='button']::-moz-focus-inner,
+.c16[type='reset']::-moz-focus-inner,
+.c16[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c16:-moz-focusring,
+.c16[type='button']:-moz-focusring,
+.c16[type='reset']:-moz-focusring,
+.c16[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c16:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c16:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c16[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c16 + button {
+  margin-left: 1.25rem;
+}
+
+.c10 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: ;
+  margin: 1.25rem 0 1.125rem 0;
+  display: inline-block;
+}
+
+.c5 {
+  border: solid;
+  border-width: 0 0.125rem 0.125rem 0;
+  display: inline-block;
+  padding: 0.125rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c12 {
+  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;
+}
+
+.c15 {
+  background-color: #FFFFFF;
+  padding: 0.75rem;
+  min-width: auto;
+  border: none;
+  box-shadow: none;
+}
+
+.c15:hover,
+.c15:focus,
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  box-shadow: none;
+}
+
+.c6 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid;
+}
+
+.c7 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+  background-color: ;
+}
+
+.c8 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c9 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+.c11 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+.c14 {
+  position: absolute;
+  right: 0.1875rem;
+  top: 0.1875rem;
+}
+
+.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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c3.active {
+  color: ;
+  cursor: default;
+}
+
+.c1 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+<main>
+  .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c3.active {
+  color: ;
+  cursor: default;
+}
+
+.c1 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+<div
+    className="c0"
+  >
+    .c1 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c2 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c2.active {
+  color: ;
+  cursor: default;
+}
+
+.c0 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+<ul
+      className="c0"
+    >
+      .c0 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c1.active {
+  color: ;
+  cursor: default;
+}
+
+<li
+        className="c0"
+      >
+        .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c0.active {
+  color: ;
+  cursor: default;
+}
+
+<a
+          aria-current="true"
+          className="active c0 active"
+          href="/"
+          onClick={[Function]}
+          style={Object {}}
+        >
+          Instances
+        </a>
+      </li>
+      .c0 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+<li
+        className="c0"
+      >
+        Custom images
+      </li>
+      .c0 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+<li
+        className="c0"
+      >
+        Docker images
+      </li>
+      .c0 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+<li
+        className="c0"
+      >
+        Docker registries
+      </li>
+    </ul>
+  </div>
+  .c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: ;
+  margin: 1.25rem 0 1.125rem 0;
+  display: inline-block;
+}
+
+.c2 {
+  border: solid;
+  border-width: 0 0.125rem 0.125rem 0;
+  display: inline-block;
+  padding: 0.125rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+<div
+    className="c0"
+    name="breadcrum"
+  >
+    .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: ;
+  margin: 1.25rem 0 1.125rem 0;
+  display: inline-block;
+}
+
+.c1 {
+  border: solid;
+  border-width: 0 0.125rem 0.125rem 0;
+  display: inline-block;
+  padding: 0.125rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
+}
+
+<div>
+      .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: ;
+  margin: 1.25rem 0 1.125rem 0;
+  display: inline-block;
+}
+
+<h2
+        className="c0"
+        name="breadcrum-item"
+      >
+        Instances
+      </h2>
+      .c0 {
+  border: solid;
+  border-width: 0 0.125rem 0.125rem 0;
+  display: inline-block;
+  padding: 0.125rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
+}
+
+<div
+        className="c0"
+      />
+    </div>
+    .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: ;
+  margin: 1.25rem 0 1.125rem 0;
+  display: inline-block;
+}
+
+.c1 {
+  border: solid;
+  border-width: 0 0.125rem 0.125rem 0;
+  display: inline-block;
+  padding: 0.125rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
+}
+
+<div>
+      .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: ;
+  margin: 1.25rem 0 1.125rem 0;
+  display: inline-block;
+}
+
+<h2
+        className="c0"
+        name="breadcrum-item"
+      >
+        Create Instance
+      </h2>
+      .c0 {
+  border: solid;
+  border-width: 0 0.125rem 0.125rem 0;
+  display: inline-block;
+  padding: 0.125rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
+}
+
+<div
+        className="c0"
+      />
+    </div>
+  </div>
+  .c8 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  color: ;
+}
+
+.c11 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  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;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c11:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c11:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c11:active,
+.c11:active:hover,
+.c11:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c11[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c11 + button {
+  margin-left: 1.25rem;
+}
+
+.c5 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c7 {
+  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;
+}
+
+.c10 {
+  background-color: #FFFFFF;
+  padding: 0.75rem;
+  min-width: auto;
+  border: none;
+  box-shadow: none;
+}
+
+.c10:hover,
+.c10:focus,
+.c10:active,
+.c10:active:hover,
+.c10:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  box-shadow: none;
+}
+
+.c1 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid;
+}
+
+.c2 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+  background-color: ;
+}
+
+.c3 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c4 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+.c6 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+.c9 {
+  position: absolute;
+  right: 0.1875rem;
+  top: 0.1875rem;
+}
+
+<div
+    className="c0"
+  >
+    .c7 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  color: ;
+}
+
+.c10 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  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;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c10:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c10:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c10:active,
+.c10:active:hover,
+.c10:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c10[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c10 + button {
+  margin-left: 1.25rem;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c6 {
+  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;
+}
+
+.c9 {
+  background-color: #FFFFFF;
+  padding: 0.75rem;
+  min-width: auto;
+  border: none;
+  box-shadow: none;
+}
+
+.c9:hover,
+.c9:focus,
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  box-shadow: none;
+}
+
+.c0 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid;
+}
+
+.c1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+  background-color: ;
+}
+
+.c2 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c3 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+.c5 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+.c8 {
+  position: absolute;
+  right: 0.1875rem;
+  top: 0.1875rem;
+}
+
+<div
+      className="c0"
+    >
+      .c0 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+  background-color: ;
+}
+
+<div
+        className="c0"
+      />
+      .c5 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  color: ;
+}
+
+.c2 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c4 {
+  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 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c1 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+.c3 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+<div
+        className="c0"
+      >
+        .c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+<h3
+          className="c0 c1"
+        >
+          Choosing deployement data center
+        </h3>
+        .c2 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  color: ;
+}
+
+.c1 {
+  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: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+<p
+          className="c0 c1"
+        >
+          .c0 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  color: ;
+}
+
+<p>
+            Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. 
+            .c0 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  color: ;
+}
+
+<a
+              className="c0"
+              href="#"
+            >
+              Learn More
+            </a>
+          </p>
+        </p>
+      </div>
+      .c2 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  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;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c2::-moz-focus-inner,
+.c2[type='button']::-moz-focus-inner,
+.c2[type='reset']::-moz-focus-inner,
+.c2[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c2:-moz-focusring,
+.c2[type='button']:-moz-focusring,
+.c2[type='reset']:-moz-focusring,
+.c2[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c2:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c2:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c2:active,
+.c2:active:hover,
+.c2:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c2[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c2 + button {
+  margin-left: 1.25rem;
+}
+
+.c1 {
+  background-color: #FFFFFF;
+  padding: 0.75rem;
+  min-width: auto;
+  border: none;
+  box-shadow: none;
+}
+
+.c1:hover,
+.c1:focus,
+.c1:active,
+.c1:active:hover,
+.c1:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  box-shadow: none;
+}
+
+.c0 {
+  position: absolute;
+  right: 0.1875rem;
+  top: 0.1875rem;
+}
+
+<button
+        className="c0 c1 c2"
+        onClick={[Function]}
+      >
+        <svg
+          className=""
+          height="12"
+          viewBox="0 0 12 12"
+          width="12"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            icon: close
+          </title>
+          <path
+            d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
+            fill="#494949"
+            fillRule="evenodd"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</main>
+`;
diff --git a/packages/my-joyent/src/components/home/__tests__/home.spec.js b/packages/my-joyent/src/components/home/__tests__/home.spec.js
new file mode 100644
index 00000000..4da477ed
--- /dev/null
+++ b/packages/my-joyent/src/components/home/__tests__/home.spec.js
@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Router } from '@mocks/';
+import Home from '../home';
+
+it('renders <Home /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <Home />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/packages/my-joyent/src/components/home/home.js b/packages/my-joyent/src/components/home/home.js
new file mode 100644
index 00000000..cde4f5b5
--- /dev/null
+++ b/packages/my-joyent/src/components/home/home.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import { Row } from 'react-styled-flexboxgrid';
+import { SectionNav } from '@components/navigation';
+import { Message, Breadcrumb, BreadcrumbItem, Anchor } from 'joyent-ui-toolkit';
+
+class Home extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showMessage: true
+    };
+
+    this.closeMessage = this.closeMessage.bind(this);
+  }
+
+  closeMessage() {
+    this.setState({
+      showMessage: false
+    });
+  }
+
+  render() {
+    const _msg = this.state.showMessage ? (
+      <Message
+        title="Choosing deployement data center"
+        onCloseClick={this.closeMessage}
+      >
+        <p>
+          Not all data centres have all configurations of instances available.
+          Make sure that you choose the data center that suits your
+          requirements. <Anchor href="#">Learn More</Anchor>
+        </p>
+      </Message>
+    ) : null;
+    return (
+      <main>
+        <SectionNav />
+        <Breadcrumb>
+          <BreadcrumbItem>Instances</BreadcrumbItem>
+          <BreadcrumbItem>Create Instance</BreadcrumbItem>
+        </Breadcrumb>
+        <Row>{_msg}</Row>
+      </main>
+    );
+  }
+}
+
+export default Home;
diff --git a/packages/my-joyent/src/components/home/index.js b/packages/my-joyent/src/components/home/index.js
new file mode 100644
index 00000000..a0843e72
--- /dev/null
+++ b/packages/my-joyent/src/components/home/index.js
@@ -0,0 +1 @@
+export { default as Home } from './home';
diff --git 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
new file mode 100644
index 00000000..0364d52b
--- /dev/null
+++ b/packages/my-joyent/src/components/navigation/__tests__/__snapshots__/section-nav.spec.js.snap
@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <SectionNav /> without throwing 1`] = `
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c3.active {
+  color: ;
+  cursor: default;
+}
+
+.c1 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+<div
+  className="c0"
+>
+  .c1 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c2 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c2.active {
+  color: ;
+  cursor: default;
+}
+
+.c0 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+<ul
+    className="c0"
+  >
+    .c0 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c1.active {
+  color: ;
+  cursor: default;
+}
+
+<li
+      className="c0"
+    >
+      .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c0.active {
+  color: ;
+  cursor: default;
+}
+
+<a
+        aria-current="true"
+        className="active c0 active"
+        href="/"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Instances
+      </a>
+    </li>
+    .c0 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+<li
+      className="c0"
+    >
+      Custom images
+    </li>
+    .c0 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+<li
+      className="c0"
+    >
+      Docker images
+    </li>
+    .c0 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+<li
+      className="c0"
+    >
+      Docker registries
+    </li>
+  </ul>
+</div>
+`;
diff --git a/packages/my-joyent/src/components/navigation/__tests__/section-nav.spec.js b/packages/my-joyent/src/components/navigation/__tests__/section-nav.spec.js
new file mode 100644
index 00000000..37412d22
--- /dev/null
+++ b/packages/my-joyent/src/components/navigation/__tests__/section-nav.spec.js
@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { SectionNav } from '../';
+import { Router } from '@mocks/';
+
+it('renders <SectionNav /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <SectionNav />
+      </Router>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/packages/my-joyent/src/components/navigation/index.js b/packages/my-joyent/src/components/navigation/index.js
index c3eeaef3..32868a6f 100644
--- a/packages/my-joyent/src/components/navigation/index.js
+++ b/packages/my-joyent/src/components/navigation/index.js
@@ -1,2 +1,3 @@
 export { default as Header } from './header';
+export { default as SectionNav } from './section-nav';
 export { default as NotFound } from './not-found';
diff --git a/packages/my-joyent/src/components/navigation/section-nav.js b/packages/my-joyent/src/components/navigation/section-nav.js
new file mode 100644
index 00000000..7978221f
--- /dev/null
+++ b/packages/my-joyent/src/components/navigation/section-nav.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Row } from 'react-styled-flexboxgrid';
+import {
+  SectionList,
+  SectionListItem,
+  SectionListNavLink
+} from 'joyent-ui-toolkit';
+
+const SectionNav = () => (
+  <Row>
+    <SectionList>
+      <SectionListItem>
+        <SectionListNavLink to="/" className="active">
+          Instances
+        </SectionListNavLink>
+      </SectionListItem>
+      <SectionListItem>Custom images</SectionListItem>
+      <SectionListItem>Docker images</SectionListItem>
+      <SectionListItem>Docker registries</SectionListItem>
+    </SectionList>
+  </Row>
+);
+
+export default SectionNav;
diff --git 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
index 7f24793a..3efffa48 100644
--- 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
@@ -1,6 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders <Home /> without throwing 1`] = `
+exports[`renders <HomeHOC /> without throwing 1`] = `
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
 .c0 {
   margin-right: auto;
   margin-left: auto;
@@ -14,6 +33,220 @@ exports[`renders <Home /> without throwing 1`] = `
   flex-flow: column;
 }
 
+.c14 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  color: ;
+}
+
+.c17 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  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;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c17::-moz-focus-inner,
+.c17[type='button']::-moz-focus-inner,
+.c17[type='reset']::-moz-focus-inner,
+.c17[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c17:-moz-focusring,
+.c17[type='button']:-moz-focusring,
+.c17[type='reset']:-moz-focusring,
+.c17[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c17:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c17:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c17[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c17 + button {
+  margin-left: 1.25rem;
+}
+
+.c11 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c5 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: ;
+  margin: 1.25rem 0 1.125rem 0;
+  display: inline-block;
+}
+
+.c6 {
+  border: solid;
+  border-width: 0 0.125rem 0.125rem 0;
+  display: inline-block;
+  padding: 0.125rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
+}
+
+.c13 {
+  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;
+}
+
+.c16 {
+  background-color: #FFFFFF;
+  padding: 0.75rem;
+  min-width: auto;
+  border: none;
+  box-shadow: none;
+}
+
+.c16:hover,
+.c16:focus,
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  box-shadow: none;
+}
+
+.c7 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid;
+}
+
+.c8 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+  background-color: ;
+}
+
+.c9 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c10 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+.c12 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+.c15 {
+  position: absolute;
+  right: 0.1875rem;
+  top: 0.1875rem;
+}
+
+.c3 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c4.active {
+  color: ;
+  cursor: default;
+}
+
+.c2 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
 @media only screen and (min-width:48em) {
   .c0 {
     width: 46rem;
@@ -35,6 +268,1164 @@ exports[`renders <Home /> without throwing 1`] = `
 <div
   className="c0"
 >
-  Welcome to your joyent portal
+  .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c13 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  color: ;
+}
+
+.c16 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  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;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c16::-moz-focus-inner,
+.c16[type='button']::-moz-focus-inner,
+.c16[type='reset']::-moz-focus-inner,
+.c16[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c16:-moz-focusring,
+.c16[type='button']:-moz-focusring,
+.c16[type='reset']:-moz-focusring,
+.c16[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c16:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c16:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c16[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c16 + button {
+  margin-left: 1.25rem;
+}
+
+.c10 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: ;
+  margin: 1.25rem 0 1.125rem 0;
+  display: inline-block;
+}
+
+.c5 {
+  border: solid;
+  border-width: 0 0.125rem 0.125rem 0;
+  display: inline-block;
+  padding: 0.125rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
+}
+
+.c12 {
+  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;
+}
+
+.c15 {
+  background-color: #FFFFFF;
+  padding: 0.75rem;
+  min-width: auto;
+  border: none;
+  box-shadow: none;
+}
+
+.c15:hover,
+.c15:focus,
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  box-shadow: none;
+}
+
+.c6 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid;
+}
+
+.c7 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+  background-color: ;
+}
+
+.c8 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c9 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+.c11 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+.c14 {
+  position: absolute;
+  right: 0.1875rem;
+  top: 0.1875rem;
+}
+
+.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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c3.active {
+  color: ;
+  cursor: default;
+}
+
+.c1 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+<main>
+    .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c3.active {
+  color: ;
+  cursor: default;
+}
+
+.c1 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+<div
+      className="c0"
+    >
+      .c1 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c2 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c2.active {
+  color: ;
+  cursor: default;
+}
+
+.c0 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+<ul
+        className="c0"
+      >
+        .c0 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+.c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c1.active {
+  color: ;
+  cursor: default;
+}
+
+<li
+          className="c0"
+        >
+          .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  color: ;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c0.active {
+  color: ;
+  cursor: default;
+}
+
+<a
+            aria-current="true"
+            className="active c0 active"
+            href="/"
+            onClick={[Function]}
+            style={Object {}}
+          >
+            Instances
+          </a>
+        </li>
+        .c0 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+<li
+          className="c0"
+        >
+          Custom images
+        </li>
+        .c0 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+<li
+          className="c0"
+        >
+          Docker images
+        </li>
+        .c0 {
+  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;
+  line-height: 1.6;
+  margin-right: 1.4375rem;
+}
+
+<li
+          className="c0"
+        >
+          Docker registries
+        </li>
+      </ul>
+    </div>
+    .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: ;
+  margin: 1.25rem 0 1.125rem 0;
+  display: inline-block;
+}
+
+.c2 {
+  border: solid;
+  border-width: 0 0.125rem 0.125rem 0;
+  display: inline-block;
+  padding: 0.125rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
+}
+
+<div
+      className="c0"
+      name="breadcrum"
+    >
+      .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: ;
+  margin: 1.25rem 0 1.125rem 0;
+  display: inline-block;
+}
+
+.c1 {
+  border: solid;
+  border-width: 0 0.125rem 0.125rem 0;
+  display: inline-block;
+  padding: 0.125rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
+}
+
+<div>
+        .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: ;
+  margin: 1.25rem 0 1.125rem 0;
+  display: inline-block;
+}
+
+<h2
+          className="c0"
+          name="breadcrum-item"
+        >
+          Instances
+        </h2>
+        .c0 {
+  border: solid;
+  border-width: 0 0.125rem 0.125rem 0;
+  display: inline-block;
+  padding: 0.125rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
+}
+
+<div
+          className="c0"
+        />
+      </div>
+      .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: ;
+  margin: 1.25rem 0 1.125rem 0;
+  display: inline-block;
+}
+
+.c1 {
+  border: solid;
+  border-width: 0 0.125rem 0.125rem 0;
+  display: inline-block;
+  padding: 0.125rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
+}
+
+<div>
+        .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: ;
+  margin: 1.25rem 0 1.125rem 0;
+  display: inline-block;
+}
+
+<h2
+          className="c0"
+          name="breadcrum-item"
+        >
+          Create Instance
+        </h2>
+        .c0 {
+  border: solid;
+  border-width: 0 0.125rem 0.125rem 0;
+  display: inline-block;
+  padding: 0.125rem;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
+}
+
+<div
+          className="c0"
+        />
+      </div>
+    </div>
+    .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c8 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  color: ;
+}
+
+.c11 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  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;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c11:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c11:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c11:active,
+.c11:active:hover,
+.c11:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c11[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c11 + button {
+  margin-left: 1.25rem;
+}
+
+.c5 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c7 {
+  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;
+}
+
+.c10 {
+  background-color: #FFFFFF;
+  padding: 0.75rem;
+  min-width: auto;
+  border: none;
+  box-shadow: none;
+}
+
+.c10:hover,
+.c10:focus,
+.c10:active,
+.c10:active:hover,
+.c10:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  box-shadow: none;
+}
+
+.c1 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid;
+}
+
+.c2 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+  background-color: ;
+}
+
+.c3 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c4 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+.c6 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+.c9 {
+  position: absolute;
+  right: 0.1875rem;
+  top: 0.1875rem;
+}
+
+<div
+      className="c0"
+    >
+      .c7 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  color: ;
+}
+
+.c10 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  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;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c10:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c10:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c10:active,
+.c10:active:hover,
+.c10:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c10[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c10 + button {
+  margin-left: 1.25rem;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c6 {
+  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;
+}
+
+.c9 {
+  background-color: #FFFFFF;
+  padding: 0.75rem;
+  min-width: auto;
+  border: none;
+  box-shadow: none;
+}
+
+.c9:hover,
+.c9:focus,
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  box-shadow: none;
+}
+
+.c0 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid;
+}
+
+.c1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+  background-color: ;
+}
+
+.c2 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c3 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+.c5 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+.c8 {
+  position: absolute;
+  right: 0.1875rem;
+  top: 0.1875rem;
+}
+
+<div
+        className="c0"
+      >
+        .c0 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+  background-color: ;
+}
+
+<div
+          className="c0"
+        />
+        .c5 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  color: ;
+}
+
+.c2 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c4 {
+  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 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c1 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+.c3 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+<div
+          className="c0"
+        >
+          .c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+<h3
+            className="c0 c1"
+          >
+            Choosing deployement data center
+          </h3>
+          .c2 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  color: ;
+}
+
+.c1 {
+  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: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+<p
+            className="c0 c1"
+          >
+            .c0 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  color: ;
+}
+
+<p>
+              Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. 
+              .c0 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  color: ;
+}
+
+<a
+                className="c0"
+                href="#"
+              >
+                Learn More
+              </a>
+            </p>
+          </p>
+        </div>
+        .c2 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  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;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c2::-moz-focus-inner,
+.c2[type='button']::-moz-focus-inner,
+.c2[type='reset']::-moz-focus-inner,
+.c2[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c2:-moz-focusring,
+.c2[type='button']:-moz-focusring,
+.c2[type='reset']:-moz-focusring,
+.c2[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c2:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c2:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c2:active,
+.c2:active:hover,
+.c2:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c2[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c2 + button {
+  margin-left: 1.25rem;
+}
+
+.c1 {
+  background-color: #FFFFFF;
+  padding: 0.75rem;
+  min-width: auto;
+  border: none;
+  box-shadow: none;
+}
+
+.c1:hover,
+.c1:focus,
+.c1:active,
+.c1:active:hover,
+.c1:active:focus {
+  background-color: #FFFFFF;
+  border: none;
+  box-shadow: none;
+}
+
+.c0 {
+  position: absolute;
+  right: 0.1875rem;
+  top: 0.1875rem;
+}
+
+<button
+          className="c0 c1 c2"
+          onClick={[Function]}
+        >
+          <svg
+            className=""
+            height="12"
+            viewBox="0 0 12 12"
+            width="12"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>
+              icon: close
+            </title>
+            <path
+              d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
+              fill="#494949"
+              fillRule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </main>
 </div>
 `;
diff --git a/packages/my-joyent/src/containers/home/__tests__/index.spec.js b/packages/my-joyent/src/containers/home/__tests__/index.spec.js
index ae64bee5..b41669ff 100644
--- a/packages/my-joyent/src/containers/home/__tests__/index.spec.js
+++ b/packages/my-joyent/src/containers/home/__tests__/index.spec.js
@@ -6,9 +6,16 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
-import Home from '../';
+import HomeHOC from '../';
+import { Router } from '@mocks/';
 
-it('renders <Home /> without throwing', () => {
-  const tree = renderer.create(<Home />).toJSON();
+it('renders <HomeHOC /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Router>
+        <HomeHOC />
+      </Router>
+    )
+    .toJSON();
   expect(tree).toMatchSnapshot();
 });
diff --git a/packages/my-joyent/src/containers/home/index.js b/packages/my-joyent/src/containers/home/index.js
index 6359cbfd..689618bc 100644
--- a/packages/my-joyent/src/containers/home/index.js
+++ b/packages/my-joyent/src/containers/home/index.js
@@ -1,8 +1,11 @@
 import React from 'react';
 import { LayoutContainer } from '@components/layout';
+import { Home } from '@components/home';
 
-const Home = () => (
-  <LayoutContainer>Welcome to your joyent portal</LayoutContainer>
+const HomeHOC = () => (
+  <LayoutContainer>
+    <Home />
+  </LayoutContainer>
 );
 
-export default Home;
+export default HomeHOC;
diff --git a/packages/my-joyent/src/router.js b/packages/my-joyent/src/router.js
index 856ce803..abc33de8 100644
--- a/packages/my-joyent/src/router.js
+++ b/packages/my-joyent/src/router.js
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { Header } from '@containers/navigation';
 
-import Home from '@containers/home';
+import HomeHOC from '@containers/home';
 
 import { NotFound } from '@components/navigation';
 
@@ -20,7 +20,7 @@ const Router = (
     <Container>
       <Route path="/" component={Header} />
       <Switch>
-        <Route path="/" exact component={Home} />
+        <Route path="/" exact component={HomeHOC} />
         <Route path="/*" component={NotFound} />
       </Switch>
     </Container>
diff --git a/packages/ui-toolkit/src/message/index.js b/packages/ui-toolkit/src/message/index.js
index 3dff516c..f11d07d5 100644
--- a/packages/ui-toolkit/src/message/index.js
+++ b/packages/ui-toolkit/src/message/index.js
@@ -51,7 +51,7 @@ const StyledClose = styled(CloseButton)`
   top: ${unitcalc(0.5)};
 `;
 
-const Message = ({ title, message, onCloseClick, ...type }) => {
+const Message = ({ title, message, onCloseClick, children, ...type }) => {
   const renderTitle = title ? <StyledTitle>{title}</StyledTitle> : null;
 
   const renderClose = onCloseClick ? (
@@ -63,7 +63,7 @@ const Message = ({ title, message, onCloseClick, ...type }) => {
       <StyledColor {...type} />
       <StyledMessageContainer>
         {renderTitle}
-        <StyledMessage>{message}</StyledMessage>
+        <StyledMessage>{message || children}</StyledMessage>
       </StyledMessageContainer>
       {renderClose}
     </StyledContainer>