diff --git a/.prettierignore b/.prettierignore
index 9d621029..b89be991 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,3 +1,5 @@
 package.json
 package-lock.json
 yarn.lock
+flow-typed
+.next
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 804f0811..00000000
--- a/.prettierrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "useTabs": false,
-  "arrowParens": "always",
-  "printWidth": 80,
-  "tabWidth": 2,
-  "singleQuote": true,
-  "trailingComma": "all",
-  "jsxBracketSameLine": false,
-  "semi": true
-}
diff --git a/common/animations.js b/common/animations.js
index cae588bc..2ea16889 100644
--- a/common/animations.js
+++ b/common/animations.js
@@ -1,113 +1,110 @@
-
-import styled, { css } from 'styled-components';
-import { animations } from '@common/constants';
-import { sif } from '@common/styled';
+import styled, { css } from "styled-components";
+import { animations } from "@common/constants";
+import { sif } from "@common/styled";
 
 const Delay = () => styled.div`
-${sif('xl')(css`
-    animation-delay: 2s;
+${sif("xl")(css`
+  animation-delay: 2s;
 `)}
-${sif('l')(css`
-    animation-delay: 1s;
+${sif("l")(css`
+  animation-delay: 1s;
 `)}
-${sif('m')(css`
-    animation-delay: 0.5s;
+${sif("m")(css`
+  animation-delay: 0.5s;
 `)}
-${sif('s')(css`
-    animation-delay: 0.25s;
+${sif("s")(css`
+  animation-delay: 0.25s;
 `)}
-`f
+`;
 
 const FadeIn = () => styled.div`
-@keyframes fadein {
+  @keyframes fadein {
     from {
-        opacity: 0;
+      opacity: 0;
     }
     to {
-        opacity: 1;
+      opacity: 1;
     }
-}
-opacity: 0;
-animation: fadein ${animations.timingAnimation} forwards ${animations.easing};
-`
+  }
+  opacity: 0;
+  animation: fadein ${animations.timingAnimation} forwards ${animations.easing};
+`;
 
 const FadeOut = () => styled.div`
-@keyframes fadeout {
+  @keyframes fadeout {
     from {
-        opacity: 1;
+      opacity: 1;
     }
     to {
-        opacity: 0;
+      opacity: 0;
     }
-}
-animation: fadeout ${animations.timingAnimation} forwards ${animations.easing};
-`
+  }
+  animation: fadeout ${animations.timingAnimation} forwards ${animations.easing};
+`;
 
 const FadeAndSlideInFromBottom = () => styled.div`
-@keyframes fade-and-slide-in-from-bottom {
+  @keyframes fade-and-slide-in-from-bottom {
     from {
-        opacity: 0;
-        transform: translate3d(0, ${spacing.gutter*4}, 0);
+      opacity: 0;
+      transform: translate3d(0, ${spacing.gutter * 4}, 0);
     }
 
     to {
-        opacity: 1;
-        transform: none;
+      opacity: 1;
+      transform: none;
     }
-}
-opacity: 0;
-animation: fade-and-slide-in-from-bottom ${animations.timingAnimation} forwards
-  ${animations.easing};
-`
+  }
+  opacity: 0;
+  animation: fade-and-slide-in-from-bottom ${animations.timingAnimation}
+    forwards ${animations.easing};
+`;
 
 const FadeInAndSlideInFromBottomSm = () => styled.div`
-@keyframes fade-and-slide-in-from-bottom {
+  @keyframes fade-and-slide-in-from-bottom {
     from {
-        opacity: 0;
-        transform: translate3d(0, ${spacing.unit}, 0);
+      opacity: 0;
+      transform: translate3d(0, ${spacing.unit}, 0);
     }
 
     to {
-        opacity: 1;
-        transform: none;
+      opacity: 1;
+      transform: none;
     }
-}
-opacity: 0;
-animation: fade-and-slide-in-from-top-sm ${animations.timingAnimation} forwards
-  ${animations.easing};
-`
+  }
+  opacity: 0;
+  animation: fade-and-slide-in-from-top-sm ${animations.timingAnimation}
+    forwards ${animations.easing};
+`;
 
 const FadeInAndSlideInFromTop = () => styled.div`
-@keyframes fade-and-slide-in-from-top {
+  @keyframes fade-and-slide-in-from-top {
     from {
-        opacity: 0;
-        transform: translate3d(0, -${spacing.gutter*4}, 0);
+      opacity: 0;
+      transform: translate3d(0, -${spacing.gutter * 4}, 0);
     }
     to {
-        opacity: 1;
-        transform: none;
+      opacity: 1;
+      transform: none;
     }
-}
-opacity: 0;
-animation: fade-and-slide-in-from-top ${animations.timingAnimation} forwards
+  }
+  opacity: 0;
+  animation: fade-and-slide-in-from-top ${animations.timingAnimation} forwards
     ${animations.easing};
-`
+`;
 
 const FadeInAndSlideInFromTopSm = () => css`
-@keyframes fade-and-slide-in-from-top-sm {
+  @keyframes fade-and-slide-in-from-top-sm {
     from {
-        opacity: 0;
-        transform: translate3d(0, -${spacing.unit}, 0);
+      opacity: 0;
+      transform: translate3d(0, -${spacing.unit}, 0);
     }
 
     to {
-        opacity: 1;
-        transform: none;
+      opacity: 1;
+      transform: none;
     }
-}
-opacity: 0;
-animation: fade-and-slide-in-from-top-sm ${animations.timingAnimation} forwards
-  ${animations.easing};
-`
-
-
+  }
+  opacity: 0;
+  animation: fade-and-slide-in-from-top-sm ${animations.timingAnimation}
+    forwards ${animations.easing};
+`;
diff --git a/common/colors.js b/common/colors.js
index a43b3c4f..737340e8 100644
--- a/common/colors.js
+++ b/common/colors.js
@@ -1,59 +1,57 @@
+function shadeColor(color, percent, rgb) {
+  if (color == null) {
+    console.error("Null color is getting passed to darken");
+  }
+  var R = parseInt(color.substring(1, 3), 16);
+  var G = parseInt(color.substring(3, 5), 16);
+  var B = parseInt(color.substring(5, 7), 16);
 
+  R = parseInt((R * (100 + percent)) / 100);
+  G = parseInt((G * (100 + percent)) / 100);
+  B = parseInt((B * (100 + percent)) / 100);
 
-function shadeColor(color, percent, rgb) {
-    if (color == null) {
-      console.error('Null color is getting passed to darken')
-    }  
-    var R = parseInt(color.substring(1,3),16);
-    var G = parseInt(color.substring(3,5),16);
-    var B = parseInt(color.substring(5,7),16);
-  
-    R = parseInt(R * (100 + percent) / 100);
-    G = parseInt(G * (100 + percent) / 100);
-    B = parseInt(B * (100 + percent) / 100);
-  
-    R = (R<255)?R:255;  
-    G = (G<255)?G:255;  
-    B = (B<255)?B:255;  
-    if (rgb == true) {
-      return `${R}, ${G}, ${B}`
-    }
-    var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
-    var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
-    var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
-  
-    return "#"+RR+GG+BB;
+  R = R < 255 ? R : 255;
+  G = G < 255 ? G : 255;
+  B = B < 255 ? B : 255;
+  if (rgb == true) {
+    return `${R}, ${G}, ${B}`;
   }
+  var RR = R.toString(16).length == 1 ? "0" + R.toString(16) : R.toString(16);
+  var GG = G.toString(16).length == 1 ? "0" + G.toString(16) : G.toString(16);
+  var BB = B.toString(16).length == 1 ? "0" + B.toString(16) : B.toString(16);
 
+  return "#" + RR + GG + BB;
+}
 
-export const darken = (color, percent, rgb) => shadeColor(color, -1*percent, rgb)
-export const lighten = (color, percent, rgb) => shadeColor(color, percent, rgb)
-let mainColor = '#334865';
-let colorTextBase = '#313131'; // Default text color
-let primaryColor =  '#5764c6';
+export const darken = (color, percent, rgb) =>
+  shadeColor(color, -1 * percent, rgb);
+export const lighten = (color, percent, rgb) => shadeColor(color, percent, rgb);
+let mainColor = "#334865";
+let colorTextBase = "#313131"; // Default text color
+let primaryColor = "#5764c6";
 let darkPrimaryColor = darken(primaryColor, 5);
-let lightPrimaryColor =  lighten(primaryColor, 42);
-let darkColor = '#333';
-let darkGrayColor ='#666';
-let darkerGrayColor = '#2B2B2B'
-let grayColor = '#999'
-let darkNavyColor = '#334865;';
-let lightGrayColor = '#ccc';
-let lightColor = '#fff';
-let linkColor =  primaryColor;
-let darkLinkColor =  darken(linkColor, 10);
-let borderColor = '#efefef';
-let bgColor = '#f8f8f8';
+let lightPrimaryColor = lighten(primaryColor, 42);
+let darkColor = "#333";
+let darkGrayColor = "#666";
+let darkerGrayColor = "#2B2B2B";
+let grayColor = "#999";
+let darkNavyColor = "#334865;";
+let lightGrayColor = "#ccc";
+let lightColor = "#fff";
+let linkColor = primaryColor;
+let darkLinkColor = darken(linkColor, 10);
+let borderColor = "#efefef";
+let bgColor = "#f8f8f8";
 let darkBgColor = darken(bgColor, 3);
-let lightBgColor = '#fff';
+let lightBgColor = "#fff";
 // Control colors
-let controlColorSuccess = '#32b643';
-let controlColorWarning =  '#ffb700';
-let controlColorDanger =  '#e85600';
+let controlColorSuccess = "#32b643";
+let controlColorWarning = "#ffb700";
+let controlColorDanger = "#e85600";
 // Meta colors
-let codeColor = '#e06870';
-let highlightColor =  '#ffe9b3';
-let lightCodeColor = '#BABABA'
+let codeColor = "#e06870";
+let highlightColor = "#ffe9b3";
+let lightCodeColor = "#BABABA";
 
 export const colors = {
   // Core colors
@@ -83,5 +81,5 @@ export const colors = {
   // Meta colors
   codeColor,
   lightCodeColor,
-  highlightColor,
+  highlightColor
 };
diff --git a/common/constants.js b/common/constants.js
index 45a1240f..94ba0f53 100644
--- a/common/constants.js
+++ b/common/constants.js
@@ -1,46 +1,69 @@
-import { colors, darken, lighten } from '@common/colors'
+import { colors, darken, lighten } from "@common/colors";
 const unit = 12;
 const gutter = unit * 2;
 const globalWidth = 1250;
-const globalEasing = `cubic-bezier(0.24, 0.8, 0, 0.97)`
+const globalEasing = `cubic-bezier(0.24, 0.8, 0, 0.97)`;
 const headerHeight = 100;
 
 const timing = 0.38;
 const easing = globalEasing;
-const transition =  `${timing} all ${easing}`;
-const timingAnimation = `${0.38*2.5}`;
-const timingAnimationDelay = `${0.38*2.5/2}`;
+const transition = `${timing} all ${easing}`;
+const timingAnimation = `${0.38 * 2.5}`;
+const timingAnimationDelay = `${(0.38 * 2.5) / 2}`;
 const animations = {
   timing,
   timingAnimation,
   timingAnimationDelay,
   easing,
   transition
-}
+};
 
 const fonts = {
   headings: `"Nunito", sans-serif`,
   body: `-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
-  Roboto`,
+  Roboto`
 };
 
 const spacing = {
   unit,
   gutter,
   globalWidth,
-  headerHeight,
+  headerHeight
 };
 
-
-const effects = { 
+const effects = {
   dropShadow: `0px 2px 8px rgba(${darken(colors.mainColor, 25, true)}, 0.4)`,
-  dropShadowLight: `0px 2px 6px rgba(${darken(colors.mainColor, 25, true)}, 0.08)`,
-  dropShadowXL: `0px 10px 20px rgba(${darken(colors.mainColor, 25, true)}, 0.4)`,
-  dropShadowXLLight: `0px 10px 20px rgba(${darken(colors.mainColor, 25, true)}, 0.2)`,
+  dropShadowLight: `0px 2px 6px rgba(${darken(
+    colors.mainColor,
+    25,
+    true
+  )}, 0.08)`,
+  dropShadowXL: `0px 10px 20px rgba(${darken(
+    colors.mainColor,
+    25,
+    true
+  )}, 0.4)`,
+  dropShadowXLLight: `0px 10px 20px rgba(${darken(
+    colors.mainColor,
+    25,
+    true
+  )}, 0.2)`,
   dropShadowL: `0px 6px 14px rgba(${darken(colors.mainColor, 25, true)}, 0.4)`,
-  dropShadowLLight: `0px 6px 14px rgba(${darken(colors.mainColor, 25, true)}, 0.1)`,
-  dropShadowPressed: `0px 2px 2px rgba(${darken(colors.mainColor, 25, true)}, 0.2);`,
-  textShadowDefault: `0px 1px 2px rgba(${darken(colors.mainColor, 25, true)}, 0.5)`,
-}
+  dropShadowLLight: `0px 6px 14px rgba(${darken(
+    colors.mainColor,
+    25,
+    true
+  )}, 0.1)`,
+  dropShadowPressed: `0px 2px 2px rgba(${darken(
+    colors.mainColor,
+    25,
+    true
+  )}, 0.2);`,
+  textShadowDefault: `0px 1px 2px rgba(${darken(
+    colors.mainColor,
+    25,
+    true
+  )}, 0.5)`
+};
 
 export { spacing, fonts, effects, animations };
diff --git a/common/css-paint-polyfill.js b/common/css-paint-polyfill.js
index b5b0ef3e..81b162dd 100644
--- a/common/css-paint-polyfill.js
+++ b/common/css-paint-polyfill.js
@@ -1,2 +1,441 @@
-!function(){function e(e,t){var n=new XMLHttpRequest;n.onreadystatechange=function(){4===n.readyState&&t(n.responseText)},n.open("GET",e,!0),n.send()}function t(e,t,n){Object.defineProperty?Object.defineProperty(e,t,n):e[t]=n.get()}var n;window.CSS||(window.CSS={}),"paintWorklet"in window.CSS||t(window.CSS,"paintWorklet",{get:function(){return n||(n=new F)}});var r="css-paint-polyfill",i=document.createElement(r);i.style.cssText="display: none;",document.documentElement.appendChild(i);var o=document.createElement("style");o.id=r,i.appendChild(o);var a=o.sheet,s=i.style,l=[],u=/(paint\(|-moz-element\(#paint-|-webkit-canvas\(paint-|[('"]blob:[^'"#]+#paint=|[('"]data:image\/paint-)/,c="getCSSCanvasContext"in document,d=(s.backgroundImage="-moz-element(#"+r+")")===s.backgroundImage;s.cssText="";var p=!0,v=window.requestAnimationFrame||setTimeout,f="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,h=function(){return window.devicePixelRatio||1},g={},m={},y=0;function $(e){var t=e.bit^=1;return e.instances[t]||(e.instances[t]=new e.Painter)}function b(e,t){var n=e.cssText;!0===t.isNew&&u.test(n)&&n!==(n=T(n))&&(e=x(e,n));var r,i,o,a=e.selectorText,s=A(e.style);if(r=null==t.counters[a]?t.counters[a]=1:++t.counters[a],null!=m[i="sheet"+t.sheetId+"\n"+a+"\n"+r]){if((o=m[i]).selector===a)return o.rule=e,void(o.cssText!==s&&t.toProcess.push(o));t.toRemove.push(o)}else o=m[i]={key:i,selector:a,cssText:s,properties:{},rule:e},t.toProcess.push(o.selector)}function w(){for(var e=[].slice.call(document.styleSheets),t={toProcess:[],toRemove:[],counters:{},isNew:!1,sheetId:null},n=0;n<e.length;n++){var r=e[n].ownerNode;t.sheetId=r.$$paintid,t.isNew=null==t.sheetId,t.isNew&&(t.sheetId=r.$$paintid=++y,!1===R(r))||P(r.sheet,b,t)}for(var i=t.toRemove.length;i--;)delete m[t.toRemove[i].key];t.toProcess.length>0&&function(e){for(var t=document.querySelectorAll(e),n=0;n<t.length;n++)N(t[n])}(t.toProcess.join(", "))}function P(e,t,n){var r=[[0,e.cssRules]],i=r[0],o=i[1];if(o)for(var a=0;r.length>0;a++)if(a>=o.length){r.pop();var s=r.length;s>0&&(o=(i=r[s-1])[1],a=i[0])}else{i[0]=a;var l=o[a];if(1===l.type){var u=t(l,n);void 0!==u&&(n=u)}else l.cssRules&&l.cssRules.length>0&&r.push([0,l.cssRules])}return n}function x(e,t){for(var n=e.parentStyleSheet,r=e.parentRule,i=(r||n).cssRules,o=i.length-1,a=0;a<=o;a++)if(i[a]===e){(r||n).deleteRule(a),o=a;break}if(null!=t){if(r){var s=r.appendRule(t);return r.cssRules[s]}return n.insertRule(t,o),n.cssRules[o]}}function R(t,n){if(t.href)return e(t.href,C),!1;for(var r=t.childNodes.length;r--;){var i=t.childNodes[r].nodeValue,o=T(i);o!==i&&(t.childNodes[r].nodeValue=o)}}function C(e){var t=document.createElement("style");t.disabled=!0,t.$$paintid=++y,t.appendChild(document.createTextNode(T(e))),(document.head||document.createElement("head")).appendChild(t);var n,r=[];for(P(t.sheet,S,r);n=r.pop();)x(n,null);w(),t.disabled=!1}function S(e,t){u.test(e.cssText)||t.push(e)}function T(e){return e.replace(/(;|,|\b)paint\s*\(\s*(['"]?)(.+?)\2\s*\)(;|,|!|\b)/,"$1url(data:image/paint-$3,=)$4")}var k,E,O=[];function N(e){!0!==e.$$paintPending&&(e.$$paintPending=!0,1===O.push(e)&&f(I))}function I(){for(var e;e=O.pop();)U(e)}function L(e,t,n){for(var r=e.length,i=function(){--r||t.apply(null,n||l)},o=0;o<e.length;o++){var a=new Image;a.onload=i,a.onerror=onerror,a.src=e[o]}}function V(e){var n=e.$$paintId;return null==n&&(n=e.$$paintId=++D,function(e){if(!0===p)return;if(e.style.ownerElement===e)return;t(e.style,"ownerElement",{value:e})}(e)),n}function j(e){var t=e.$$paintRule,n=V(e);if(null==t){e.hasAttribute("data-css-paint")||e.setAttribute("data-css-paint",n);var r=a.insertRule('[data-css-paint="'+D+'"] {}',a.cssRules.length);t=e.$$paintRule=a.cssRules[r]}return t}function A(e){var t=e.cssText;if(t)return t;t="";for(var n=0,r=void 0;n<e.length;n++)0!==n&&(t+=" "),t+=r=e[n],t+=":",t+=e.getPropertyValue(r),t+=";";return t}function U(e){var t=getComputedStyle(e);if(e.$$paintObservedProperties)for(var n=0;n<e.$$paintObservedProperties.length;n++){var r=e.$$paintObservedProperties[n];if(t.getPropertyValue(r)!==e.$$paintedPropertyValues[r]){M(e,t);break}}else if(e.$$paintId||u.test(A(t)))return void M(e,t);e.$$paintPending=!1}var z={get:function(e){return e in E?E[e]:E[e]=k.getPropertyValue(e)}},D=0;function M(e,t){o.disabled=!0;var n,r=k=null==t?getComputedStyle(e):t;E={};var a=[];e.$$paintPending=!1;for(var s={width:parseFloat(z.get("width")),height:parseFloat(z.get("height"))},l=h(),u=e.$$paintedProperties,p=0;p<r.length;p++){for(var v=r[p],f=z.get(v),m=/(,|\b|^)url\((['"]?)((?:-moz-element\(#|-webkit-canvas\()paint-\d+-([^;,]+)\)|(?:data:image\/paint-|blob:[^'"#]+#paint=)([^"';, ]+)[;,].*?)\2\)(,|\b|$)/g,y="",b=0,w=[],P=!1,x=!1,R=void 0,C=void 0;C=m.exec(f);){!1===x&&(R=V(e)),x=!0,y+=f.substring(0,C.index);var S=C[4]||C[5],T=C[3],O=g[S];O.Painter.inputProperties&&a.push.apply(a,O.Painter.inputProperties);var N=O.Painter.contextOptions||{},I=$(O),A=!1===N.scaling?1:l;!0===N.nativePixels&&(s.width*=l,s.height*=l,A=1);var U=A*s.width,D=A*s.height,M=e.$$paintContext,F="paint-"+R+"-"+S;if(M&&M.canvas&&M.canvas.width==U&&M.canvas.height==D)M.clearRect(0,0,U,D);else{if(!0===c)M=document.getCSSCanvasContext("2d",F,U,D);else{var W=document.createElement("canvas");W.id=F,W.width=U,W.height=D,!0===d&&(W.style.display="none",i.appendChild(W)),M=W.getContext("2d")}e.$$paintContext=M,M.imageSmoothingEnabled=!1,1!==A&&M.scale(A,A)}if(M.save(),M.beginPath(),I.paint(M,s,z),M.closePath(),M.restore(),"resetTransform"in M&&M.resetTransform(),y+=C[1],!0===c)y+="-webkit-canvas("+F+")",P=null==C[4];else if(!0===d)y+="-moz-element(#"+F+")",P=null==C[4];else{var G=M.canvas.toDataURL("image/png").replace("/png","/paint-"+S);if("function"==typeof MSBlobBuilder&&(G=q(G,S)),w.push(G),y+='url("'+G+'")',G!==T||!n){var H=T?T.indexOf("#"):-1;~H&&URL.revokeObjectURL(T.substring(0,H)),P=!0}T=G}y+=C[6],b=C.index+C[0].length}!1!==x||null==u||null==u[v]?(y+=f.substring(b),P&&(n||(n=j(e)),null==u&&(u=e.$$paintedProperties={}),u[v]=!0,0===w.length?B(n.style,v,y):L(w,B,[n.style,v,y]))):(n||(n=j(e)),n.style.removeProperty(v))}e.$$paintObservedProperties=0===a.length?null:a;for(var X=e.$$paintedPropertyValues={},J=0;J<a.length;J++){var K=a[J];X[K]=z.get(K)}o.disabled=!1}function q(e,t){for(var n=atob(e.split(",")[1]),r=new Uint8Array(n.length),i=0;i<n.length;i++)r[i]=n.charCodeAt(i);return URL.createObjectURL(new Blob([r]))+"#paint="+t}function B(e,t,n){e.setProperty(t,n,"important")}var F=function(){v(w);var e=document.createElement("x-a");document.body.appendChild(e);var n=!1;new MutationObserver(function(e){if(!0!==n){n=!0;for(var t=0;t<e.length;t++){var r=e[t];if(r.addedNodes)for(var i=r.addedNodes,o=0;o<i.length;o++)1===i[o].nodeType&&N(i[o]);1===r.target.nodeType&&N(r.target)}n=!1}}).observe(document.body,{childList:!0,attributes:!0,subtree:!0}),e.style.cssText="color: red;",setTimeout(function(){if(p="$$paintPending"in e,document.body.removeChild(e),!p){var n=Object.getOwnPropertyDescriptor(CSSStyleDeclaration.prototype,"cssText"),r=n.set;n.set=function(e){return this.ownerElement&&N(this.ownerElement),r.call(this,e)},t(CSSStyleDeclaration.prototype,"cssText",n)}})};F.prototype.addModule=function(n){var r=this;e(n,function(e){var n={registerPaint:function(e,t){!function(e,t,n){g[e]={worklet:n,Painter:t,properties:t.inputProperties?[].slice.call(t.inputProperties):[],bit:0,instances:[]}}(e,t,{context:n,realm:o})}};t(n,"devicePixelRatio",{get:h}),n.self=n;var o=new function(e,t){var n=document.createElement("iframe");n.style.cssText="position:absolute; left:0; top:-999px; width:1px; height:1px;",t.appendChild(n);var r=n.contentWindow,i=r.document,o="var window,$hook";for(var a in r)a in e||"eval"===a||(o+=",",o+=a);for(var s in e)o+=",",o+=s,o+="=self.",o+=s;var l=i.createElement("script");l.appendChild(i.createTextNode('function $hook(self,console) {"use strict";\n\t\t'+o+";return function() {return eval(arguments[0])}}")),i.body.appendChild(l),this.exec=r.$hook(e,console)}(n,i);e=(r.transpile||String)(e),o.exec(e)})}}();
+!(function() {
+  function e(e, t) {
+    var n = new XMLHttpRequest();
+    (n.onreadystatechange = function() {
+      4 === n.readyState && t(n.responseText);
+    }),
+      n.open("GET", e, !0),
+      n.send();
+  }
+  function t(e, t, n) {
+    Object.defineProperty ? Object.defineProperty(e, t, n) : (e[t] = n.get());
+  }
+  var n;
+  window.CSS || (window.CSS = {}),
+    "paintWorklet" in window.CSS ||
+      t(window.CSS, "paintWorklet", {
+        get: function() {
+          return n || (n = new F());
+        }
+      });
+  var r = "css-paint-polyfill",
+    i = document.createElement(r);
+  (i.style.cssText = "display: none;"), document.documentElement.appendChild(i);
+  var o = document.createElement("style");
+  (o.id = r), i.appendChild(o);
+  var a = o.sheet,
+    s = i.style,
+    l = [],
+    u = /(paint\(|-moz-element\(#paint-|-webkit-canvas\(paint-|[('"]blob:[^'"#]+#paint=|[('"]data:image\/paint-)/,
+    c = "getCSSCanvasContext" in document,
+    d = (s.backgroundImage = "-moz-element(#" + r + ")") === s.backgroundImage;
+  s.cssText = "";
+  var p = !0,
+    v = window.requestAnimationFrame || setTimeout,
+    f =
+      "function" == typeof Promise
+        ? Promise.prototype.then.bind(Promise.resolve())
+        : setTimeout,
+    h = function() {
+      return window.devicePixelRatio || 1;
+    },
+    g = {},
+    m = {},
+    y = 0;
+  function $(e) {
+    var t = (e.bit ^= 1);
+    return e.instances[t] || (e.instances[t] = new e.Painter());
+  }
+  function b(e, t) {
+    var n = e.cssText;
+    !0 === t.isNew && u.test(n) && n !== (n = T(n)) && (e = x(e, n));
+    var r,
+      i,
+      o,
+      a = e.selectorText,
+      s = A(e.style);
+    if (
+      ((r = null == t.counters[a] ? (t.counters[a] = 1) : ++t.counters[a]),
+      null != m[(i = "sheet" + t.sheetId + "\n" + a + "\n" + r)])
+    ) {
+      if ((o = m[i]).selector === a)
+        return (o.rule = e), void (o.cssText !== s && t.toProcess.push(o));
+      t.toRemove.push(o);
+    } else
+      (o = m[i] = { key: i, selector: a, cssText: s, properties: {}, rule: e }),
+        t.toProcess.push(o.selector);
+  }
+  function w() {
+    for (
+      var e = [].slice.call(document.styleSheets),
+        t = {
+          toProcess: [],
+          toRemove: [],
+          counters: {},
+          isNew: !1,
+          sheetId: null
+        },
+        n = 0;
+      n < e.length;
+      n++
+    ) {
+      var r = e[n].ownerNode;
+      (t.sheetId = r.$$paintid),
+        (t.isNew = null == t.sheetId),
+        (t.isNew && ((t.sheetId = r.$$paintid = ++y), !1 === R(r))) ||
+          P(r.sheet, b, t);
+    }
+    for (var i = t.toRemove.length; i--; ) delete m[t.toRemove[i].key];
+    t.toProcess.length > 0 &&
+      (function(e) {
+        for (var t = document.querySelectorAll(e), n = 0; n < t.length; n++)
+          N(t[n]);
+      })(t.toProcess.join(", "));
+  }
+  function P(e, t, n) {
+    var r = [[0, e.cssRules]],
+      i = r[0],
+      o = i[1];
+    if (o)
+      for (var a = 0; r.length > 0; a++)
+        if (a >= o.length) {
+          r.pop();
+          var s = r.length;
+          s > 0 && ((o = (i = r[s - 1])[1]), (a = i[0]));
+        } else {
+          i[0] = a;
+          var l = o[a];
+          if (1 === l.type) {
+            var u = t(l, n);
+            void 0 !== u && (n = u);
+          } else l.cssRules && l.cssRules.length > 0 && r.push([0, l.cssRules]);
+        }
+    return n;
+  }
+  function x(e, t) {
+    for (
+      var n = e.parentStyleSheet,
+        r = e.parentRule,
+        i = (r || n).cssRules,
+        o = i.length - 1,
+        a = 0;
+      a <= o;
+      a++
+    )
+      if (i[a] === e) {
+        (r || n).deleteRule(a), (o = a);
+        break;
+      }
+    if (null != t) {
+      if (r) {
+        var s = r.appendRule(t);
+        return r.cssRules[s];
+      }
+      return n.insertRule(t, o), n.cssRules[o];
+    }
+  }
+  function R(t, n) {
+    if (t.href) return e(t.href, C), !1;
+    for (var r = t.childNodes.length; r--; ) {
+      var i = t.childNodes[r].nodeValue,
+        o = T(i);
+      o !== i && (t.childNodes[r].nodeValue = o);
+    }
+  }
+  function C(e) {
+    var t = document.createElement("style");
+    (t.disabled = !0),
+      (t.$$paintid = ++y),
+      t.appendChild(document.createTextNode(T(e))),
+      (document.head || document.createElement("head")).appendChild(t);
+    var n,
+      r = [];
+    for (P(t.sheet, S, r); (n = r.pop()); ) x(n, null);
+    w(), (t.disabled = !1);
+  }
+  function S(e, t) {
+    u.test(e.cssText) || t.push(e);
+  }
+  function T(e) {
+    return e.replace(
+      /(;|,|\b)paint\s*\(\s*(['"]?)(.+?)\2\s*\)(;|,|!|\b)/,
+      "$1url(data:image/paint-$3,=)$4"
+    );
+  }
+  var k,
+    E,
+    O = [];
+  function N(e) {
+    !0 !== e.$$paintPending &&
+      ((e.$$paintPending = !0), 1 === O.push(e) && f(I));
+  }
+  function I() {
+    for (var e; (e = O.pop()); ) U(e);
+  }
+  function L(e, t, n) {
+    for (
+      var r = e.length,
+        i = function() {
+          --r || t.apply(null, n || l);
+        },
+        o = 0;
+      o < e.length;
+      o++
+    ) {
+      var a = new Image();
+      (a.onload = i), (a.onerror = onerror), (a.src = e[o]);
+    }
+  }
+  function V(e) {
+    var n = e.$$paintId;
+    return (
+      null == n &&
+        ((n = e.$$paintId = ++D),
+        (function(e) {
+          if (!0 === p) return;
+          if (e.style.ownerElement === e) return;
+          t(e.style, "ownerElement", { value: e });
+        })(e)),
+      n
+    );
+  }
+  function j(e) {
+    var t = e.$$paintRule,
+      n = V(e);
+    if (null == t) {
+      e.hasAttribute("data-css-paint") || e.setAttribute("data-css-paint", n);
+      var r = a.insertRule(
+        '[data-css-paint="' + D + '"] {}',
+        a.cssRules.length
+      );
+      t = e.$$paintRule = a.cssRules[r];
+    }
+    return t;
+  }
+  function A(e) {
+    var t = e.cssText;
+    if (t) return t;
+    t = "";
+    for (var n = 0, r = void 0; n < e.length; n++)
+      0 !== n && (t += " "),
+        (t += r = e[n]),
+        (t += ":"),
+        (t += e.getPropertyValue(r)),
+        (t += ";");
+    return t;
+  }
+  function U(e) {
+    var t = getComputedStyle(e);
+    if (e.$$paintObservedProperties)
+      for (var n = 0; n < e.$$paintObservedProperties.length; n++) {
+        var r = e.$$paintObservedProperties[n];
+        if (t.getPropertyValue(r) !== e.$$paintedPropertyValues[r]) {
+          M(e, t);
+          break;
+        }
+      }
+    else if (e.$$paintId || u.test(A(t))) return void M(e, t);
+    e.$$paintPending = !1;
+  }
+  var z = {
+      get: function(e) {
+        return e in E ? E[e] : (E[e] = k.getPropertyValue(e));
+      }
+    },
+    D = 0;
+  function M(e, t) {
+    o.disabled = !0;
+    var n,
+      r = (k = null == t ? getComputedStyle(e) : t);
+    E = {};
+    var a = [];
+    e.$$paintPending = !1;
+    for (
+      var s = {
+          width: parseFloat(z.get("width")),
+          height: parseFloat(z.get("height"))
+        },
+        l = h(),
+        u = e.$$paintedProperties,
+        p = 0;
+      p < r.length;
+      p++
+    ) {
+      for (
+        var v = r[p],
+          f = z.get(v),
+          m = /(,|\b|^)url\((['"]?)((?:-moz-element\(#|-webkit-canvas\()paint-\d+-([^;,]+)\)|(?:data:image\/paint-|blob:[^'"#]+#paint=)([^"';, ]+)[;,].*?)\2\)(,|\b|$)/g,
+          y = "",
+          b = 0,
+          w = [],
+          P = !1,
+          x = !1,
+          R = void 0,
+          C = void 0;
+        (C = m.exec(f));
 
+      ) {
+        !1 === x && (R = V(e)), (x = !0), (y += f.substring(0, C.index));
+        var S = C[4] || C[5],
+          T = C[3],
+          O = g[S];
+        O.Painter.inputProperties && a.push.apply(a, O.Painter.inputProperties);
+        var N = O.Painter.contextOptions || {},
+          I = $(O),
+          A = !1 === N.scaling ? 1 : l;
+        !0 === N.nativePixels && ((s.width *= l), (s.height *= l), (A = 1));
+        var U = A * s.width,
+          D = A * s.height,
+          M = e.$$paintContext,
+          F = "paint-" + R + "-" + S;
+        if (M && M.canvas && M.canvas.width == U && M.canvas.height == D)
+          M.clearRect(0, 0, U, D);
+        else {
+          if (!0 === c) M = document.getCSSCanvasContext("2d", F, U, D);
+          else {
+            var W = document.createElement("canvas");
+            (W.id = F),
+              (W.width = U),
+              (W.height = D),
+              !0 === d && ((W.style.display = "none"), i.appendChild(W)),
+              (M = W.getContext("2d"));
+          }
+          (e.$$paintContext = M),
+            (M.imageSmoothingEnabled = !1),
+            1 !== A && M.scale(A, A);
+        }
+        if (
+          (M.save(),
+          M.beginPath(),
+          I.paint(M, s, z),
+          M.closePath(),
+          M.restore(),
+          "resetTransform" in M && M.resetTransform(),
+          (y += C[1]),
+          !0 === c)
+        )
+          (y += "-webkit-canvas(" + F + ")"), (P = null == C[4]);
+        else if (!0 === d)
+          (y += "-moz-element(#" + F + ")"), (P = null == C[4]);
+        else {
+          var G = M.canvas
+            .toDataURL("image/png")
+            .replace("/png", "/paint-" + S);
+          if (
+            ("function" == typeof MSBlobBuilder && (G = q(G, S)),
+            w.push(G),
+            (y += 'url("' + G + '")'),
+            G !== T || !n)
+          ) {
+            var H = T ? T.indexOf("#") : -1;
+            ~H && URL.revokeObjectURL(T.substring(0, H)), (P = !0);
+          }
+          T = G;
+        }
+        (y += C[6]), (b = C.index + C[0].length);
+      }
+      !1 !== x || null == u || null == u[v]
+        ? ((y += f.substring(b)),
+          P &&
+            (n || (n = j(e)),
+            null == u && (u = e.$$paintedProperties = {}),
+            (u[v] = !0),
+            0 === w.length ? B(n.style, v, y) : L(w, B, [n.style, v, y])))
+        : (n || (n = j(e)), n.style.removeProperty(v));
+    }
+    e.$$paintObservedProperties = 0 === a.length ? null : a;
+    for (var X = (e.$$paintedPropertyValues = {}), J = 0; J < a.length; J++) {
+      var K = a[J];
+      X[K] = z.get(K);
+    }
+    o.disabled = !1;
+  }
+  function q(e, t) {
+    for (
+      var n = atob(e.split(",")[1]), r = new Uint8Array(n.length), i = 0;
+      i < n.length;
+      i++
+    )
+      r[i] = n.charCodeAt(i);
+    return URL.createObjectURL(new Blob([r])) + "#paint=" + t;
+  }
+  function B(e, t, n) {
+    e.setProperty(t, n, "important");
+  }
+  var F = function() {
+    v(w);
+    var e = document.createElement("x-a");
+    document.body.appendChild(e);
+    var n = !1;
+    new MutationObserver(function(e) {
+      if (!0 !== n) {
+        n = !0;
+        for (var t = 0; t < e.length; t++) {
+          var r = e[t];
+          if (r.addedNodes)
+            for (var i = r.addedNodes, o = 0; o < i.length; o++)
+              1 === i[o].nodeType && N(i[o]);
+          1 === r.target.nodeType && N(r.target);
+        }
+        n = !1;
+      }
+    }).observe(document.body, { childList: !0, attributes: !0, subtree: !0 }),
+      (e.style.cssText = "color: red;"),
+      setTimeout(function() {
+        if (((p = "$$paintPending" in e), document.body.removeChild(e), !p)) {
+          var n = Object.getOwnPropertyDescriptor(
+              CSSStyleDeclaration.prototype,
+              "cssText"
+            ),
+            r = n.set;
+          (n.set = function(e) {
+            return this.ownerElement && N(this.ownerElement), r.call(this, e);
+          }),
+            t(CSSStyleDeclaration.prototype, "cssText", n);
+        }
+      });
+  };
+  F.prototype.addModule = function(n) {
+    var r = this;
+    e(n, function(e) {
+      var n = {
+        registerPaint: function(e, t) {
+          !(function(e, t, n) {
+            g[e] = {
+              worklet: n,
+              Painter: t,
+              properties: t.inputProperties
+                ? [].slice.call(t.inputProperties)
+                : [],
+              bit: 0,
+              instances: []
+            };
+          })(e, t, { context: n, realm: o });
+        }
+      };
+      t(n, "devicePixelRatio", { get: h }), (n.self = n);
+      var o = new function(e, t) {
+        var n = document.createElement("iframe");
+        (n.style.cssText =
+          "position:absolute; left:0; top:-999px; width:1px; height:1px;"),
+          t.appendChild(n);
+        var r = n.contentWindow,
+          i = r.document,
+          o = "var window,$hook";
+        for (var a in r) a in e || "eval" === a || ((o += ","), (o += a));
+        for (var s in e) (o += ","), (o += s), (o += "=self."), (o += s);
+        var l = i.createElement("script");
+        l.appendChild(
+          i.createTextNode(
+            'function $hook(self,console) {"use strict";\n\t\t' +
+              o +
+              ";return function() {return eval(arguments[0])}}"
+          )
+        ),
+          i.body.appendChild(l),
+          (this.exec = r.$hook(e, console));
+      }(n, i);
+      (e = (r.transpile || String)(e)), o.exec(e);
+    });
+  };
+})();
diff --git a/common/mixins.js b/common/mixins.js
index bb0726e4..050b1ec6 100644
--- a/common/mixins.js
+++ b/common/mixins.js
@@ -1,70 +1,71 @@
-import { css } from 'styled-components';
-import { animations, spacing } from '@common/constants';
-import { sif } from '@common/styled';
+import { css } from "styled-components";
+import { animations, spacing } from "@common/constants";
+import { sif } from "@common/styled";
 
 export const widthTablet = 768;
 export const widthDesktop = 1024;
 export const widthMidSized = 1200;
 
-export const handheld = (content) => css`  
-@media (max-width: ${widthTablet -1}px) {
+export const handheld = content => css`
+  @media (max-width: ${widthTablet - 1}px) {
     ${content};
-}
-`
-export const handheldUp = (content) => css`
-@media (min-width: ${widthTablet - 1}px) {
+  }
+`;
+export const handheldUp = content => css`
+  @media (min-width: ${widthTablet - 1}px) {
     ${content};
-}`
+  }
+`;
 
-export const tablet = (content) => css`
-@media (max-width: ${widthDesktop - 1}px) {
+export const tablet = content => css`
+  @media (max-width: ${widthDesktop - 1}px) {
     ${content};
-}`
-export const tabletUp = (content) => css`
-@media (min-width: ${widthDesktop - 1}px) {
+  }
+`;
+export const tabletUp = content => css`
+  @media (min-width: ${widthDesktop - 1}px) {
     ${content};
-}
-`
-export const desktop = (content) => css`
-@media (min-width: ${widthDesktop}px) {
+  }
+`;
+export const desktop = content => css`
+  @media (min-width: ${widthDesktop}px) {
     ${content};
-}
-`
+  }
+`;
 
-export const largeDisplay = (content) => css`
-@media (min-width: ${spacing.globalWidth}px) {
+export const largeDisplay = content => css`
+  @media (min-width: ${spacing.globalWidth}px) {
     ${content};
-}
-`
-export const midDown = (content) => css`
-@media (max-width: 1240px) {
+  }
+`;
+export const midDown = content => css`
+  @media (max-width: 1240px) {
     ${content};
-}
-`
+  }
+`;
 
-export const belowLargeDisplay = (content) => css`
-    @media (max-width: ${spacing.globalWidth * 1.2}px) {
-        ${content};
-    }
-`
+export const belowLargeDisplay = content => css`
+  @media (max-width: ${spacing.globalWidth * 1.2}px) {
+    ${content};
+  }
+`;
 export const centerContent = () => css`
-    margin-right: auto;
-    margin-left: auto;
-`
+  margin-right: auto;
+  margin-left: auto;
+`;
 export const globalWrapper = () => css`
     ${centerContent()}
-    padding-left: ${spacing.gutter*2}px;
-    padding-right: ${spacing.gutter*2}px;
+    padding-left: ${spacing.gutter * 2}px;
+    padding-right: ${spacing.gutter * 2}px;
     max-width: ${spacing.globalWidth}px;
-`
-export const barHighlight = () => ``
-export const activeStateTransform = () => ``
-export const fullSizePosAbsolute = () => ``
-export const typographyTitleXl = () => ``
-export const typographyTitleL = () => ``
-export const typographyTitleMed = () => ``
-export const typographyTitleSm = () => ``
-export const alignContentCenter = () => ``
-export const fullPseudoElement = () => ``
-export const addPseudoToHTML = () => ``
-
+`;
+export const barHighlight = () => ``;
+export const activeStateTransform = () => ``;
+export const fullSizePosAbsolute = () => ``;
+export const typographyTitleXl = () => ``;
+export const typographyTitleL = () => ``;
+export const typographyTitleMed = () => ``;
+export const typographyTitleSm = () => ``;
+export const alignContentCenter = () => ``;
+export const fullPseudoElement = () => ``;
+export const addPseudoToHTML = () => ``;
diff --git a/common/rip.js b/common/rip.js
index 414b4b46..5f4e4063 100644
--- a/common/rip.js
+++ b/common/rip.js
@@ -1,4 +1,6 @@
-CSS.paintWorklet.addModule('https://googlechromelabs.github.io/css-paint-polyfill/ripple-worklet.js');
+CSS.paintWorklet.addModule(
+  "https://googlechromelabs.github.io/css-paint-polyfill/ripple-worklet.js"
+);
 
 if (!window.performance) window.performance = { now: Date.now.bind(Date) };
 
@@ -8,25 +10,25 @@ function ripple(evt) {
     x = evt.clientX - rect.left,
     y = evt.clientY - rect.top,
     start = performance.now();
-  button.classList.add('animating');
+  button.classList.add("animating");
   requestAnimationFrame(function raf(now) {
     let count = Math.floor(now - start);
     button.style.cssText =
-      '--ripple-x: ' +
+      "--ripple-x: " +
       x +
-      '; --ripple-y: ' +
+      "; --ripple-y: " +
       y +
-      '; --animation-tick: ' +
+      "; --animation-tick: " +
       count +
-      ';';
+      ";";
     if (count > 1200) {
-      button.classList.remove('animating');
-      button.style.cssText = '--animation-tick: 0;';
+      button.classList.remove("animating");
+      button.style.cssText = "--animation-tick: 0;";
       return;
     }
     requestAnimationFrame(raf);
   });
 }
-[].forEach.call(document.querySelectorAll('.ripple'), function(el) {
-  el.addEventListener('click', ripple);
+[].forEach.call(document.querySelectorAll(".ripple"), function(el) {
+  el.addEventListener("click", ripple);
 });
diff --git a/common/ripple-worklet.js b/common/ripple-worklet.js
index 90c7f15b..31fd8656 100644
--- a/common/ripple-worklet.js
+++ b/common/ripple-worklet.js
@@ -1,15 +1,15 @@
 if (registerPaint) {
   registerPaint(
-    'ripple',
+    "ripple",
     class {
       static get inputProperties() {
         return [
-          'background-color',
-          '--ripple-color',
-          '--animation-tick',
-          '--ripple-x',
-          '--ripple-y',
-          '--ripple-speed',
+          "background-color",
+          "--ripple-color",
+          "--animation-tick",
+          "--ripple-x",
+          "--ripple-y",
+          "--ripple-speed"
         ];
       }
       static get contextOptions() {
@@ -22,17 +22,17 @@ if (registerPaint) {
            *  Note: if animating and crisp lines are less important, disabling scaling
            *  improves polyfill performance, since it reduces the canvas size by 75%.
            */
-          scaling: false,
+          scaling: false
         };
       }
       paint(ctx, geom, properties) {
-        const bgColor = properties.get('background-color').toString();
-        const rippleColor = properties.get('--ripple-color').toString();
-        const x = parseFloat(properties.get('--ripple-x').toString());
-        const y = parseFloat(properties.get('--ripple-y').toString());
+        const bgColor = properties.get("background-color").toString();
+        const rippleColor = properties.get("--ripple-color").toString();
+        const x = parseFloat(properties.get("--ripple-x").toString());
+        const y = parseFloat(properties.get("--ripple-y").toString());
         const speed =
-          parseFloat((properties.get('--ripple-speed') || '').toString()) || 1;
-        let tick = parseFloat(properties.get('--animation-tick').toString());
+          parseFloat((properties.get("--ripple-speed") || "").toString()) || 1;
+        let tick = parseFloat(properties.get("--animation-tick").toString());
         tick *= speed;
         if (tick < 0) tick = 0;
         if (tick > 1000) tick = 1000;
@@ -45,12 +45,12 @@ if (registerPaint) {
         ctx.arc(
           x,
           y, // center
-          geom.width * tick / 1000, // radius
+          (geom.width * tick) / 1000, // radius
           0, // startAngle
-          2 * Math.PI, //endAngle
+          2 * Math.PI //endAngle
         );
         ctx.fill();
       }
-    },
+    }
   );
 }
diff --git a/common/styled.js b/common/styled.js
index 776e0baf..8c979032 100644
--- a/common/styled.js
+++ b/common/styled.js
@@ -1,8 +1,8 @@
-import styled, { css } from 'styled-components';
-import { spacing } from '@common/constants';
+import styled, { css } from "styled-components";
+import { spacing } from "@common/constants";
 
-const sif = (prop) => (styles) => (props) => props[prop] && styles;
-const bgColor = ({ bgColor }) => 
+const sif = prop => styles => props => props[prop] && styles;
+const bgColor = ({ bgColor }) =>
   bgColor &&
   css`
     background: ${bgColor};
diff --git a/components/app/index.js b/components/app/index.js
index 3b2d1fa6..c261eb4d 100644
--- a/components/app/index.js
+++ b/components/app/index.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import { injectGlobal } from 'styled-components';
-import { StyledApp } from '@components/app/styled';
+import React from "react";
+import { injectGlobal } from "styled-components";
+import { StyledApp } from "@components/app/styled";
 
-const App = (props) => {
+const App = props => {
   injectGlobal`
   body, html{
     font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;=
diff --git a/components/app/styled/index.js b/components/app/styled/index.js
index cb84007d..b806b3db 100644
--- a/components/app/styled/index.js
+++ b/components/app/styled/index.js
@@ -1,5 +1,5 @@
-import styled, { css } from 'styled-components';
-import { sif } from '@common/styled';
+import styled, { css } from "styled-components";
+import { sif } from "@common/styled";
 
 const StyledApp = styled.div`
   color: rgb(51, 72, 101);
diff --git a/components/button/index.js b/components/button/index.js
index 1fdb4441..289591b3 100644
--- a/components/button/index.js
+++ b/components/button/index.js
@@ -1,9 +1,9 @@
-import React from 'react';
+import React from "react";
 
-import { StyledButton, StyledButtons } from '@components/button/styled';
+import { StyledButton, StyledButtons } from "@components/button/styled";
 
 const Icon = ({ icon }) => {
-  if (icon && icon.includes('http')) {
+  if (icon && icon.includes("http")) {
     return <img src={icon} role="presentational" />;
   }
   return null;
diff --git a/components/button/styled/index.js b/components/button/styled/index.js
index 98874c2a..b5d8272e 100644
--- a/components/button/styled/index.js
+++ b/components/button/styled/index.js
@@ -1,8 +1,8 @@
-import styled, { css } from 'styled-components';
-import { spacing } from '@common/constants';
-import { colors } from '@common/colors';
-import { sif, padding, margin } from '@common/styled';
-import { lighten } from 'polished';
+import styled, { css } from "styled-components";
+import { spacing } from "@common/constants";
+import { colors } from "@common/colors";
+import { sif, padding, margin } from "@common/styled";
+import { lighten } from "polished";
 const StyledButtons = styled.div`
   display: flex;
   ${padding};
@@ -10,7 +10,7 @@ const StyledButtons = styled.div`
 `;
 
 const StyledButton = styled.a.attrs({
-  className: 'ripple',
+  className: "ripple"
 })`
   display: flex;
   align-items: center;
@@ -42,7 +42,7 @@ const StyledButton = styled.a.attrs({
   --ripple-color: rgba(255, 255, 255, 0.5);
   --animation-tick: 200;
 
-  ${sif('primary')(
+  ${sif("primary")(
     css`
       background-color: #f02563;
       color: white;
@@ -50,11 +50,11 @@ const StyledButton = styled.a.attrs({
       text-shadow: 0 1px 2px rgba(8, 12, 16, 0.5);
 
       &:hover {
-        background-color: ${lighten(0.05, '#f02563')};
+        background-color: ${lighten(0.05, "#f02563")};
       }
     `
   )};
-  ${sif('secondary')(css`
+  ${sif("secondary")(css`
     background: rgba(163, 183, 213, 0.15);
     color: #c8d4e5;
     padding-left: 18px;
@@ -63,7 +63,7 @@ const StyledButton = styled.a.attrs({
     box-shadow: 0px 2px 6px rgba(8, 12, 16, 0.08);
     text-shadow: 0px 1px 2px rgba(8, 12, 16, 0.5);
   `)}
-  ${sif('active')(css`
+  ${sif("active")(css`
     background-color: ${colors.darkPrimaryColor};
   `)}
   ${StyledButton}:not(:first-child) {
diff --git a/components/content-section/index.js b/components/content-section/index.js
index 4953de2a..5d3a2ab8 100644
--- a/components/content-section/index.js
+++ b/components/content-section/index.js
@@ -1,12 +1,12 @@
 // @flow
-import * as React from 'react';
-import { Type } from '@components/typography';
-import { StyledContentSection } from './styled';
+import * as React from "react";
+import { Type } from "@components/typography";
+import { StyledContentSection } from "./styled";
 
 type TitleProps = {
   children: React.Node,
   typeProps?: *,
-  titleProps?: *,
+  titleProps?: *
 };
 
 const Title = ({ children, typeProps, ...titleProps }: TitleProps) => (
@@ -17,7 +17,7 @@ const Title = ({ children, typeProps, ...titleProps }: TitleProps) => (
 
 type ContentSectionProps = {
   index: number,
-  children?: React.Node,
+  children?: React.Node
 };
 
 const ContentSection = ({ index, children, ...rest }: ContentSectionProps) => {
@@ -26,7 +26,7 @@ const ContentSection = ({ index, children, ...rest }: ContentSectionProps) => {
     <StyledContentSection {...rest}>
       <StyledContentSection.Wrapper>
         {React.Children.map(children, (child, index) =>
-          React.cloneElement(child, { isOdd }),
+          React.cloneElement(child, { isOdd })
         )}
       </StyledContentSection.Wrapper>
     </StyledContentSection>
@@ -34,7 +34,7 @@ const ContentSection = ({ index, children, ...rest }: ContentSectionProps) => {
 };
 
 ContentSection.defaultProps = {
-  index: 0,
+  index: 0
 };
 
 ContentSection.Pane = StyledContentSection.Pane;
@@ -42,12 +42,12 @@ ContentSection.Title = Title;
 ContentSection.Title.Section = StyledContentSection.Title.Section;
 
 type ContentSectionsProps = {
-  children: React.Node,
+  children: React.Node
 };
 
 const ContentSections = ({ children }: ContentSectionsProps) =>
   React.Children.map(children, (child, index) =>
-    React.cloneElement(child, { index }),
+    React.cloneElement(child, { index })
   );
 
 export { ContentSection, ContentSections };
diff --git a/components/content-section/styled/index.js b/components/content-section/styled/index.js
index 55ca1733..d292b8e4 100644
--- a/components/content-section/styled/index.js
+++ b/components/content-section/styled/index.js
@@ -1,13 +1,13 @@
 // @flow
-import styled, { css } from 'styled-components';
-import { sif, wrapperStyles } from '@common/styled';
-import { colors } from '@common/colors';
+import styled, { css } from "styled-components";
+import { sif, wrapperStyles } from "@common/styled";
+import { colors } from "@common/colors";
 const gutter = 40;
 
 const Title = styled.div`
   padding-bottom: 20px;
   max-width: 80%;
-  ${sif('kernel')(
+  ${sif("kernel")(
     css`
       max-width: 100%;
       width: 100%;
@@ -15,12 +15,12 @@ const Title = styled.div`
       display: flex;
       justify-content: space-between;
       align-items: center;
-    `,
+    `
   )};
 `;
 
 const Pane = styled.div`
-  ${sif('center')(css`
+  ${sif("center")(css`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -29,13 +29,12 @@ const Pane = styled.div`
     p {
       max-width: 580px;
     }
-  `)}
-  @media (min-width: 801px) {
+  `)} @media (min-width: 801px) {
     width: 50%;
-    ${sif('full')(
+    ${sif("full")(
       css`
         width: 100%;
-      `,
+      `
     )};
   }
   img {
@@ -43,12 +42,12 @@ const Pane = styled.div`
     display: block;
   }
 
-  ${sif('visual')(
+  ${sif("visual")(
     css`
       @media (max-width: 800px) {
         padding-top: 80px;
       }
-    `,
+    `
   )};
 
   @media (min-width: 801px) {
@@ -62,12 +61,12 @@ const Pane = styled.div`
       padding-left: ${gutter}px;
       padding-right: 0;
     }
-    ${sif('visual')(
+    ${sif("visual")(
       css`
         width: 48%;
-      `,
+      `
     )};
-    ${sif('isOdd')(
+    ${sif("isOdd")(
       css`
         &:nth-of-type(1) {
           order: 2;
@@ -79,7 +78,7 @@ const Pane = styled.div`
           padding-right: ${gutter}px;
           padding-left: 0;
         }
-      `,
+      `
     )};
   }
 `;
diff --git a/components/cutoff-image/index.js b/components/cutoff-image/index.js
index 4a183453..4f008813 100644
--- a/components/cutoff-image/index.js
+++ b/components/cutoff-image/index.js
@@ -1,7 +1,7 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 
-import { StyledCutoffImage } from '@components/cutoff-image/styled';
+import { StyledCutoffImage } from "@components/cutoff-image/styled";
 
 const CutoffImage = StyledCutoffImage;
 export { CutoffImage };
diff --git a/components/cutoff-image/styled/index.js b/components/cutoff-image/styled/index.js
index 7e8b377d..b94cc320 100644
--- a/components/cutoff-image/styled/index.js
+++ b/components/cutoff-image/styled/index.js
@@ -1,8 +1,8 @@
 // @flow
-import styled, { css } from 'styled-components';
-import { spacing } from '@common/constants';
-import { sif, padding, margin } from '@common/styled';
-import { lighten } from 'polished';
+import styled, { css } from "styled-components";
+import { spacing } from "@common/constants";
+import { sif, padding, margin } from "@common/styled";
+import { lighten } from "polished";
 
 const StyledCutoffImage = styled.img`
   position: absolute;
diff --git a/components/download-buttons.js b/components/download-buttons.js
index 1c338f69..93fe0cfa 100644
--- a/components/download-buttons.js
+++ b/components/download-buttons.js
@@ -1,12 +1,10 @@
 // @flow
-import React from 'react';
-import { Button, Buttons } from '@components/button';
-import { Type } from '@components/typography';
-import { WindowsIcon, LinuxIcon, AppleIcon } from 'mdi-react';
-import styled, { css } from 'styled-components';
-export const StyledFeaturette = styled.div`
-
-`
+import React from "react";
+import { Button, Buttons } from "@components/button";
+import { Type } from "@components/typography";
+import { WindowsIcon, LinuxIcon, AppleIcon } from "mdi-react";
+import styled, { css } from "styled-components";
+export const StyledFeaturette = styled.div``;
 export const DownloadFeaturette = ({ platform, assetUrl }: OSProps) => {
   return (
     <>
@@ -19,7 +17,7 @@ export const DownloadFeaturette = ({ platform, assetUrl }: OSProps) => {
         />
       </Buttons>
       <Type.p small padding="10px 0 0 0">
-        <span style={{ display: 'flex', alignItems: 'center' }}>
+        <span style={{ display: "flex", alignItems: "center" }}>
           Download for&nbsp;
           <a
             href="https://github.com/nteract/nteract/releases/latest"
diff --git a/components/footer/index.js b/components/footer/index.js
index a657fe64..7afda075 100644
--- a/components/footer/index.js
+++ b/components/footer/index.js
@@ -1,9 +1,9 @@
-import React from 'react';
+import React from "react";
 import Link from "next/link";
-import { navigation, NavItems } from '@components/header';
-import { StyledFooter } from '@components/footer/styled';
+import { navigation, NavItems } from "@components/header";
+import { StyledFooter } from "@components/footer/styled";
 
-const Footer = (props) => (
+const Footer = props => (
   <StyledFooter>
     <StyledFooter.Wrapper>
       <StyledFooter.Section>
diff --git a/components/footer/styled/index.js b/components/footer/styled/index.js
index b16989ca..b4381a9c 100644
--- a/components/footer/styled/index.js
+++ b/components/footer/styled/index.js
@@ -1,5 +1,5 @@
-import styled, { css } from 'styled-components';
-import { sif, defaultWrapper } from '@common/styled';
+import styled, { css } from "styled-components";
+import { sif, defaultWrapper } from "@common/styled";
 
 const Wrapper = styled(defaultWrapper)``;
 const Section = styled.div`
diff --git a/components/head/index.js b/components/head/index.js
index 83cf2922..8f6f7d12 100644
--- a/components/head/index.js
+++ b/components/head/index.js
@@ -1,14 +1,14 @@
 // @flow
-import React from 'react';
-import Head from 'next/head';
+import React from "react";
+import Head from "next/head";
 type HeadProps = {
   pageTitle: string,
-  themeColor: string,
+  themeColor: string
 };
 
 export default ({
-  pageTitle = ':  write your next code-driven story.',
-  themeColor = '#334865',
+  pageTitle = ":  write your next code-driven story.",
+  themeColor = "#334865"
 }: HeadProps) => (
   <Head>
     <title>
diff --git a/components/header/index.js b/components/header/index.js
index 4ca39e40..2e4481f5 100644
--- a/components/header/index.js
+++ b/components/header/index.js
@@ -1,69 +1,69 @@
-import React from 'react';
-import { StyledHeader } from '@components/header/styled';
-import { StyledHero } from '@components/hero/styled';
-import Pattern from '@components/hero/pattern';
+import React from "react";
+import { StyledHeader } from "@components/header/styled";
+import { StyledHero } from "@components/hero/styled";
+import Pattern from "@components/hero/pattern";
 import {
   SlackIcon,
   GithubCircleIcon,
   TwitterCircleIcon,
   MenuIcon,
-  CloseIcon,
-} from 'mdi-react';
-import Link from 'next/link';
+  CloseIcon
+} from "mdi-react";
+import Link from "next/link";
 
 const leftNav = {
   items: [
     {
-      label: 'Blog',
-      href: 'https://blog.nteract.io/',
-      target: '_blank',
+      label: "Blog",
+      href: "https://blog.nteract.io/",
+      target: "_blank"
     },
     {
-      label: 'About',
-      href: '/about',
-      prefetch: true,
-    },
-  ],
+      label: "About",
+      href: "/about",
+      prefetch: true
+    }
+  ]
 };
 
 const rightNav = {
   items: [
     {
-      label: 'Desktop',
-      href: '/desktop',
-      prefetch: true,
+      label: "Desktop",
+      href: "/desktop",
+      prefetch: true
     },
     {
-      label: 'Atom',
-      href: '/atom',
-      prefetch: true,
+      label: "Atom",
+      href: "/atom",
+      prefetch: true
     },
     {
-      label: 'Kernels',
-      href: '/kernels',
-      prefetch: true,
-    },
-  ],
+      label: "Kernels",
+      href: "/kernels",
+      prefetch: true
+    }
+  ]
 };
 
 const socialItems = {
   items: [
     {
       icon: <SlackIcon color="currentColor" />,
-      href: 'https://slackin-nteract.now.sh/',
-      target: '_blank',
+      href: "https://slackin-nteract.now.sh/",
+      target: "_blank"
     },
     {
       icon: <GithubCircleIcon color="currentColor" />,
-      href: 'https://github.com/nteract',
-      target: '_blank',
+      href: "https://github.com/nteract",
+      target: "_blank"
     },
     {
       icon: <TwitterCircleIcon color="currentColor" />,
-      href: 'https://twitter.com/nteractio',
-      target: '_blank',
-    },
-  ],
+      href: "https://twitter.com/nteractio",
+      target: "_blank"
+    }
+  ]
 };
 
 const MobileMenu = ({ open, ...rest }) =>
@@ -81,11 +81,9 @@ const NavItems = ({ items, ...rest }) => {
         <a href={href}>{content}</a>
       </Link>
     );
-  })
-  return (<StyledHeader.NavWrapper {...rest}>
-    {links}
-  </StyledHeader.NavWrapper>)
-}
+  });
+  return <StyledHeader.NavWrapper {...rest}>{links}</StyledHeader.NavWrapper>;
+};
 
 const MobileMenuButton = ({ open, ...rest }) => {
   const IconComponent = open ? CloseIcon : MenuIcon;
@@ -97,22 +95,22 @@ const MobileMenuButton = ({ open, ...rest }) => {
 };
 class Header extends React.PureComponent {
   state = {
-    mobileMenuOpen: false,
+    mobileMenuOpen: false
   };
   openMenu = () => {
     if (!this.state.mobileMenuOpen) {
       this.setState({
-        mobileMenuOpen: true,
+        mobileMenuOpen: true
       });
     }
   };
   handleClick = () => {
-    this.closeMenu()
-  }
+    this.closeMenu();
+  };
   closeMenu = () => {
     if (this.state.mobileMenuOpen) {
       this.setState({
-        mobileMenuOpen: false,
+        mobileMenuOpen: false
       });
     }
   };
@@ -143,8 +141,8 @@ class Header extends React.PureComponent {
           </StyledHeader>
           <MobileMenu open={this.state.mobileMenuOpen}>
             <NavItems onClick={this.handleClick} {...leftNav} />
-            <NavItems onClick ={this.handleClick} {...rightNav} />
-            <NavItems onClick ={this.handleClick} {...socialItems} row />
+            <NavItems onClick={this.handleClick} {...rightNav} />
+            <NavItems onClick={this.handleClick} {...socialItems} row />
             <StyledHero.Background>
               <Pattern />
             </StyledHero.Background>
@@ -165,6 +163,6 @@ class Header extends React.PureComponent {
 const navigation = {
   left: leftNav,
   right: rightNav,
-  social: socialItems,
+  social: socialItems
 };
 export { Header, navigation, NavItems };
diff --git a/components/header/styled/index.js b/components/header/styled/index.js
index e5843704..4e4fd0cd 100644
--- a/components/header/styled/index.js
+++ b/components/header/styled/index.js
@@ -1,16 +1,16 @@
-import styled, { css } from 'styled-components';
-import { spacing } from '@common/constants';
-import { wrapperStyles, sif } from '@common/styled';
+import styled, { css } from "styled-components";
+import { spacing } from "@common/constants";
+import { wrapperStyles, sif } from "@common/styled";
 
 const NavWrapper = styled.div`
-  ${sif('desktop')(
+  ${sif("desktop")(
     css`
       @media (max-width: 800px) {
         display: none;
       }
-    `,
+    `
   )};
-  ${sif('row')(
+  ${sif("row")(
     css`
       @media (min-width: 801px) {
         padding-left: 10px;
@@ -25,7 +25,7 @@ const NavWrapper = styled.div`
           padding-left: 10px;
         }
       }
-    `,
+    `
   )};
   display: flex;
 `;
diff --git a/components/hero/index.js b/components/hero/index.js
index 25ca90b8..2f5d0746 100644
--- a/components/hero/index.js
+++ b/components/hero/index.js
@@ -1,13 +1,13 @@
 // @flow
-import * as React from 'react';
-import { StyledHero } from '@components/hero/styled';
-import { Type } from '@components/typography';
-import HeroPattern from './pattern';
+import * as React from "react";
+import { StyledHero } from "@components/hero/styled";
+import { Type } from "@components/typography";
+import HeroPattern from "./pattern";
 
-import { colors } from '@common/colors';
+import { colors } from "@common/colors";
 
 type TitleProps = {
-  component: string,
+  component: string
 };
 
 const Title = ({ component, ...rest }: TitleProps) => {
@@ -16,12 +16,12 @@ const Title = ({ component, ...rest }: TitleProps) => {
 };
 
 Title.defaultProps = {
-  component: 'h1',
+  component: "h1"
 };
 
 type HeroProps = {
   color: string,
-  children: React.Node,
+  children: React.Node
 };
 
 const Hero = ({ color, children, ...rest }: HeroProps) => {
diff --git a/components/hero/pattern.js b/components/hero/pattern.js
index 1feb4b73..29a2e2d2 100644
--- a/components/hero/pattern.js
+++ b/components/hero/pattern.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
 
 const StyledSVG = styled.svg`
   display: block;
diff --git a/components/hero/styled/index.js b/components/hero/styled/index.js
index 176397b7..9a6ab996 100644
--- a/components/hero/styled/index.js
+++ b/components/hero/styled/index.js
@@ -1,8 +1,8 @@
-import styled, { css } from 'styled-components';
-import { spacing } from '@common/constants';
-import { colors } from '@common/colors';
-import { margin, padding, wrapperStyles } from '@common/styled';
-import { Type } from '@components/typography';
+import styled, { css } from "styled-components";
+import { spacing } from "@common/constants";
+import { colors } from "@common/colors";
+import { margin, padding, wrapperStyles } from "@common/styled";
+import { Type } from "@components/typography";
 
 const Background = styled.div`
   position: absolute;
@@ -51,7 +51,7 @@ const Pane = styled.div`
     max-width: 100%;
   }
   ${({ width }) => css`
-    width: ${width ? width : '50%'};
+    width: ${width ? width : "50%"};
   `};
 
   ${padding};
diff --git a/components/kernels/c++.js b/components/kernels/c++.js
index 24927fd6..b35e10c9 100644
--- a/components/kernels/c++.js
+++ b/components/kernels/c++.js
@@ -25,8 +25,11 @@ export default class NodePage extends React.Component<*, *> {
             <p>
               Kernels connect your favorite languages to nteract projects for an
               improved REPL experience. To date, there are over
-              <a href="https://github.com/jupyter/jupyter/wiki/Jupyter-kernels"> 100
-              community-developed kernels</a> available on GitHub.
+              <a href="https://github.com/jupyter/jupyter/wiki/Jupyter-kernels">
+                {" "}
+                100 community-developed kernels
+              </a>{" "}
+              available on GitHub.
             </p>
             <div className="buttons">
               <Link href="/kernels/python">
diff --git a/components/kernels/julia.js b/components/kernels/julia.js
index c657e44b..34089697 100644
--- a/components/kernels/julia.js
+++ b/components/kernels/julia.js
@@ -25,8 +25,11 @@ export default class PythonPage extends React.Component<*, *> {
             <p>
               Kernels connect your favorite languages to nteract projects for an
               improved REPL experience. To date, there are over
-              <a href="https://github.com/jupyter/jupyter/wiki/Jupyter-kernels"> 100
-              community-developed kernels</a> available on GitHub.
+              <a href="https://github.com/jupyter/jupyter/wiki/Jupyter-kernels">
+                {" "}
+                100 community-developed kernels
+              </a>{" "}
+              available on GitHub.
             </p>
             <div className="buttons">
               <Link href="/kernels/python">
diff --git a/components/kernels/kernel-page.js b/components/kernels/kernel-page.js
index c03efdd3..1754884f 100644
--- a/components/kernels/kernel-page.js
+++ b/components/kernels/kernel-page.js
@@ -1,24 +1,24 @@
 // @flow
-import * as React from 'react';
-import Head from 'next/head';
-import LanguageToggle from '../kernels/language-toggle';
-import { ContentSection } from '../content-section';
-import PageHeader from './page-header';
+import * as React from "react";
+import Head from "next/head";
+import LanguageToggle from "../kernels/language-toggle";
+import { ContentSection } from "../content-section";
+import PageHeader from "./page-header";
 
 export type KernelPageProps = {
   language: string,
-  Kernel: any,
+  Kernel: any
 };
 
 export const kernels = [
-  { name: 'python', path: '/kernels/python' },
-  { name: 'r', path: '/kernels/r' },
-  { name: 'node.js', path: '/kernels/node' },
-  { name: 'julia', path: '/kernels/julia' },
-  { name: 'c++', path: '/kernels/c++' },
+  { name: "python", path: "/kernels/python" },
+  { name: "r", path: "/kernels/r" },
+  { name: "node.js", path: "/kernels/node" },
+  { name: "julia", path: "/kernels/julia" },
+  { name: "c++", path: "/kernels/c++" }
 ];
 
-export default (props: KernelPageProps, themeColor: '#444') => (
+export default (props: KernelPageProps, themeColor: "#444") => (
   <>
     <PageHeader themeColor={themeColor} />
     <ContentSection>
diff --git a/components/kernels/kernel.js b/components/kernels/kernel.js
index fea74718..11c5e9c7 100644
--- a/components/kernels/kernel.js
+++ b/components/kernels/kernel.js
@@ -1,6 +1,13 @@
 // @flow
 import * as React from "react";
-import { Kernel, KernelWrapper, KernelHeader, KernelHeaderButtons, KernelHeaderButton, LangLogo } from './styled'
+import {
+  Kernel,
+  KernelWrapper,
+  KernelHeader,
+  KernelHeaderButtons,
+  KernelHeaderButton,
+  LangLogo
+} from "./styled";
 export type KernelProps = {
   displayName: string,
   installURL: string,
@@ -23,10 +30,7 @@ export default (props: KernelProps) => (
         </div>
         <div className="kernel-header-section">
           <KernelHeaderButtons>
-            <KernelHeaderButton
-              href={props.repository}
-              target="_blank"
-            >
+            <KernelHeaderButton href={props.repository} target="_blank">
               {`GitHub Repository`}
             </KernelHeaderButton>{" "}
             <KernelHeaderButton
@@ -36,7 +40,7 @@ export default (props: KernelProps) => (
             >
               Installation Docs
             </KernelHeaderButton>
-          </ KernelHeaderButtons>
+          </KernelHeaderButtons>
         </div>
       </KernelHeader>
       <div className="kernel-body">
diff --git a/components/kernels/language-toggle.js b/components/kernels/language-toggle.js
index d29744a3..b6c1ab2b 100644
--- a/components/kernels/language-toggle.js
+++ b/components/kernels/language-toggle.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import Link from "next/link";
-import { StyledLanguageToggle, StyledKernelListItem } from './styled'
+import { StyledLanguageToggle, StyledKernelListItem } from "./styled";
 type KernelSelect = {
   path: string,
   name: string
@@ -12,7 +12,7 @@ type LanguageToggleProps = {
   current: string
 };
 
-const LanguageToggle = ({kernels, current}: LanguageToggleProps) => (
+const LanguageToggle = ({ kernels, current }: LanguageToggleProps) => (
   <StyledLanguageToggle>
     <ul>
       {kernels.map((kernel: KernelSelect) => (
diff --git a/components/kernels/node.js b/components/kernels/node.js
index 9681d546..e68b50fb 100644
--- a/components/kernels/node.js
+++ b/components/kernels/node.js
@@ -4,9 +4,7 @@ import * as React from "react";
 import Kernel from "./kernel";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { github } from "react-syntax-highlighter/styles/hljs";
-import {
-  ContentSection,
-} from "../content-section";
+import { ContentSection } from "../content-section";
 
 const install = `npm install -g ijavascript`;
 
diff --git a/components/kernels/page-header.js b/components/kernels/page-header.js
index f96aaa1c..078695af 100644
--- a/components/kernels/page-header.js
+++ b/components/kernels/page-header.js
@@ -1,7 +1,5 @@
 import Head from "next/head";
-import {
-  PageHeader,
-} from "../page-header";
+import { PageHeader } from "../page-header";
 
 export default themeColor => (
   <PageHeader themeColor={themeColor}>
diff --git a/components/kernels/python.js b/components/kernels/python.js
index 75618c23..472e0b0f 100644
--- a/components/kernels/python.js
+++ b/components/kernels/python.js
@@ -4,9 +4,7 @@ import * as React from "react";
 import Kernel from "./kernel";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { github } from "react-syntax-highlighter/styles/hljs";
-import {
-  ContentSection,
-} from "../content-section";
+import { ContentSection } from "../content-section";
 
 const pipInstall = `python -m pip install ipykernel virtualenv
 python -m ipykernel install
@@ -35,8 +33,7 @@ export default () => (
         <h3>Installation</h3>
         <p>
           Python environments are added as kernels with ipykernel. Install
-          ipykernel into your environment to add it to
-          your list of kernels.
+          ipykernel into your environment to add it to your list of kernels.
         </p>
         <div className="columns">
           <div className="column">
diff --git a/components/kernels/r.js b/components/kernels/r.js
index dc5c40b1..b8bbc3d9 100644
--- a/components/kernels/r.js
+++ b/components/kernels/r.js
@@ -1,12 +1,10 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 
-import Kernel from './kernel';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { github } from 'react-syntax-highlighter/styles/hljs';
-import {
-  ContentSection
-} from '../content-section';
+import Kernel from "./kernel";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { github } from "react-syntax-highlighter/styles/hljs";
+import { ContentSection } from "../content-section";
 
 const install = `install.packages(c('repr', 'IRdisplay', 'evaluate', 'crayon', 'pbdZMQ', 'devtools', 'uuid', 'digest'))
 devtools::install_github('IRkernel/IRkernel')
diff --git a/components/kernels/styled/index.js b/components/kernels/styled/index.js
index 574e3058..2983ab29 100644
--- a/components/kernels/styled/index.js
+++ b/components/kernels/styled/index.js
@@ -1,89 +1,86 @@
-import styled, { css } from 'styled-components';
-import { spacing, effects, animations } from '@common/constants'
-import { colors } from '@common/colors';
-import { sif } from '@common/styled'
-import { handheld } from '@common/mixins'
+import styled, { css } from "styled-components";
+import { spacing, effects, animations } from "@common/constants";
+import { colors } from "@common/colors";
+import { sif } from "@common/styled";
+import { handheld } from "@common/mixins";
 export const KernelListItem = styled.li`
-    ${sif('selected')(css`
-            background: 'linear-gradient(180deg,#8518f2,#8518f2)';
-            color: '#EDF1F7';
-            a:visited, .kernel-selected a {
-                color: white;
-            }
-        `)
+  ${sif("selected")(css`
+    background: "linear-gradient(180deg,#8518f2,#8518f2)";
+    color: "#EDF1F7";
+    a:visited,
+    .kernel-selected a {
+      color: white;
     }
-`
+  `)};
+`;
 export const Kernel = styled.div`
-    width: 100%;
-    display: flex;
-    padding: ${spacing.gutter*2} 0;
-    max-width: 100%;
-`
+  width: 100%;
+  display: flex;
+  padding: ${spacing.gutter * 2} 0;
+  max-width: 100%;
+`;
 export const KernelWrapper = styled.div`
-    flex: 1;
-    max-width: 100%;
-`
-export const LangLogo = styled.div`
-`
+  flex: 1;
+  max-width: 100%;
+`;
+export const LangLogo = styled.div``;
 export const KernelHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding-bottom: ${spacing.unit};
+  border-bottom: 1px solid rgba(${colors.colorTextBase}, 0.15);
+  margin-bottom: ${spacing.gutter};
+  ${handheld(css`
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  `)} h2 {
+    margin: 0;
     display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    padding-bottom: ${spacing.unit};
-    border-bottom: 1px solid rgba(${colors.colorTextBase}, 0.15);
-    margin-bottom: ${spacing.gutter};
+    align-items: center;
     ${handheld(css`
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-    `)}
-    h2 {
-        margin: 0;
-        display: flex;
-        align-items: center;
-        ${handheld(css`
-            margin-bottom: ${spacing.gutter};
-        `)}
-        ${LangLogo} {
-            margin-right: ${spacing.unit};
-            max-width: 48px;
-        }
+      margin-bottom: ${spacing.gutter};
+    `)} ${LangLogo} {
+      margin-right: ${spacing.unit};
+      max-width: 48px;
     }
-`
+  }
+`;
 
 export const KernelHeaderButtons = styled.div`
-    display: flex;
-`
+  display: flex;
+`;
 
 export const KernelHeaderButton = styled.a`
-    border: 1px solid rgba(${colors.colorTextBase}, 0.15);
-    background: white;
-    box-shadow: ${effects.dropShadowLight};
-    border-radius: 8px;
-    padding: ${spacing.unit};
-    display: block;
-    transition: ${animations.transition};
-    :hover {
-        transform: translateY(-4px);
-        box-shadow: ${effects.dropShadowLLight};
-    }
-`
+  border: 1px solid rgba(${colors.colorTextBase}, 0.15);
+  background: white;
+  box-shadow: ${effects.dropShadowLight};
+  border-radius: 8px;
+  padding: ${spacing.unit};
+  display: block;
+  transition: ${animations.transition};
+  :hover {
+    transform: translateY(-4px);
+    box-shadow: ${effects.dropShadowLLight};
+  }
+`;
 
 export const LanguageToggle = styled.section`
+  height: 41px;
+  background: #334866;
+  color: #edf1f7;
+  ul {
+    list-style: none;
+    margin-top: 0px;
+  }
+  li {
+    display: inline-block;
+    float: none;
+    margin: 0;
+    position: relative;
     height: 41px;
-    background: #334866;
-    color: #EDF1F7;
-    ul {
-        list-style: none;
-        margin-top: 0px;
-    }
-    li {
-        display: inline-block;
-        float: none;
-        margin: 0;
-        position: relative;
-        height: 41px;
-        line-height: 41px;
-        text-align: center;
-    }
-`
+    line-height: 41px;
+    text-align: center;
+  }
+`;
diff --git a/components/layout/index.js b/components/layout/index.js
index 519c5fb9..68ad8626 100644
--- a/components/layout/index.js
+++ b/components/layout/index.js
@@ -1,11 +1,13 @@
-import React from "react"
-import Head from '../head'
-import { StyledLayout, StyledPage } from "./styled"
-import { Header } from '../header'
-import { Footer } from '../footer'
-export default ({ pageTitle, themeColor, children }) => { 
-    return (<StyledLayout>
-                <Head pageTitle={pageTitle} />
-                <StyledPage>{children}</StyledPage>
-            </StyledLayout>)
-}
+import React from "react";
+import Head from "../head";
+import { StyledLayout, StyledPage } from "./styled";
+import { Header } from "../header";
+import { Footer } from "../footer";
+export default ({ pageTitle, themeColor, children }) => {
+  return (
+    <StyledLayout>
+      <Head pageTitle={pageTitle} />
+      <StyledPage>{children}</StyledPage>
+    </StyledLayout>
+  );
+};
diff --git a/components/layout/styled/index.js b/components/layout/styled/index.js
index 02540f5c..909f14d6 100644
--- a/components/layout/styled/index.js
+++ b/components/layout/styled/index.js
@@ -1,102 +1,101 @@
-
-import styled, { css } from 'styled-components';
-import { spacing, effects, animations } from '@common/constants'
-import { colors } from '@common/colors';
-import { handheld } from '@common/mixins';
+import styled, { css } from "styled-components";
+import { spacing, effects, animations } from "@common/constants";
+import { colors } from "@common/colors";
+import { handheld } from "@common/mixins";
 export const StyledPage = styled.div`
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`;
 
 export const StyledGridWrapper = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: flex-start;
-`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+`;
 export const StyledPerson = styled.div`
-    max-width: calc(25% - 60px);
-    width: calc(25% - 60px);
-    @media screen and (max-width: 575px) {
-        width: 100%;
-    }
-    min-width: 180px;
-    margin: 30px;
-    padding: 10px;
-`
+  max-width: calc(25% - 60px);
+  width: calc(25% - 60px);
+  @media screen and (max-width: 575px) {
+    width: 100%;
+  }
+  min-width: 180px;
+  margin: 30px;
+  padding: 10px;
+`;
 export const StyledPersonAvatar = styled.div`
-    overflow: hidden;
-    border-radius: 50%;
-    border: 1px solid rgba(0, 0, 0, 0.12);
-    box-shadow: 0px 3px 18px rgba(42, 42, 42, 0.09);
-    img {
-        display: block;
-    }
-`
+  overflow: hidden;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 3px 18px rgba(42, 42, 42, 0.09);
+  img {
+    display: block;
+  }
+`;
 
 export const StyledPersonDetails = styled.div`
-    text-align: center;
-    padding-top: 20px;
-`
+  text-align: center;
+  padding-top: 20px;
+`;
 
 export const StyledPersonName = styled.div`
-    font-size: 1.45rem;
-`
+  font-size: 1.45rem;
+`;
 
 export const StyledPersonTitle = styled.div`
-    padding-top: 8px;
-    font-style: italic;
-`
+  padding-top: 8px;
+  font-style: italic;
+`;
 
 export const StyledPersonSocial = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: 10px;
-`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 10px;
+`;
 
 export const StyledPersonSocialItem = styled.div`
-    font-size: 1.5rem;
-    padding: 5px;
-    display: block;
-`
+  font-size: 1.5rem;
+  padding: 5px;
+  display: block;
+`;
 
 export const StyledKernelHeaderButton = styled.div`
-    border: 1px solid rgba(${colors.colorTextBase}, 0.15);
-    background: white;
-    box-shadow: ${effects.dropShadowLight};
-    border-radius: 8px;
-    padding: ${spacing.unit}px;
-    display: block;
-    transition: ${animations.transition}s;
-    :hover {
-        transform: translateY(-4px);
-        box-shadow: ${effects.dropShadowLLight};
-    }
-    & + & {
-        margin-left: ${spacing.gutter};
-    }
-`
+  border: 1px solid rgba(${colors.colorTextBase}, 0.15);
+  background: white;
+  box-shadow: ${effects.dropShadowLight};
+  border-radius: 8px;
+  padding: ${spacing.unit}px;
+  display: block;
+  transition: ${animations.transition}s;
+  :hover {
+    transform: translateY(-4px);
+    box-shadow: ${effects.dropShadowLLight};
+  }
+  & + & {
+    margin-left: ${spacing.gutter};
+  }
+`;
 export const StyledLayout = styled.div`
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    body {
-        @include animationFadein-sm();
-        background: #ffffff;
-    }
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  body {
+    @include animationFadein-sm();
+    background: #ffffff;
+  }
 
-    * {
-        box-sizing: border-box;
-    }
-    img {
-        max-width: 100%;
-    }
-    pre {
-        padding: ${spacing.gutter}px;
-        max-width: 100% !important;
-        overflow-x: scroll;
-        box-shadow: ${effects.dropShadowPressed};
-    }
+  * {
+    box-sizing: border-box;
+  }
+  img {
+    max-width: 100%;
+  }
+  pre {
+    padding: ${spacing.gutter}px;
+    max-width: 100% !important;
+    overflow-x: scroll;
+    box-shadow: ${effects.dropShadowPressed};
+  }
 `;
diff --git a/components/page-header/index.js b/components/page-header/index.js
index 9083ea52..e7b12c6a 100644
--- a/components/page-header/index.js
+++ b/components/page-header/index.js
@@ -1,18 +1,22 @@
-import React from "react"
-import { StyledPageHeader } from './styled'
-import { Type } from './../typography'
-const Title = ({ children }) => (<Type.h1>{children}</Type.h1>)
-const Left = ({ children }) => (<StyledPageHeader.Left>{children}</StyledPageHeader.Left>)
-const Right = ({ children }) => (<StyledPageHeader.Right>{children}</StyledPageHeader.Right>)
+import React from "react";
+import { StyledPageHeader } from "./styled";
+import { Type } from "./../typography";
+const Title = ({ children }) => <Type.h1>{children}</Type.h1>;
+const Left = ({ children }) => (
+  <StyledPageHeader.Left>{children}</StyledPageHeader.Left>
+);
+const Right = ({ children }) => (
+  <StyledPageHeader.Right>{children}</StyledPageHeader.Right>
+);
 
 const PageHeader = ({ children, themeColor }) => (
-    <StyledPageHeader style={{ backgroundColor: themeColor }}>
-        <StyledPageHeader.Wrapper>{children}</StyledPageHeader.Wrapper>
-    </StyledPageHeader>
-)
+  <StyledPageHeader style={{ backgroundColor: themeColor }}>
+    <StyledPageHeader.Wrapper>{children}</StyledPageHeader.Wrapper>
+  </StyledPageHeader>
+);
 
-PageHeader.Title = Title
-PageHeader.Left = Left
-PageHeader.Right = Right
+PageHeader.Title = Title;
+PageHeader.Left = Left;
+PageHeader.Right = Right;
 
-export { PageHeader }
+export { PageHeader };
diff --git a/components/page-header/styled/index.js b/components/page-header/styled/index.js
index 1e975aeb..ea608784 100644
--- a/components/page-header/styled/index.js
+++ b/components/page-header/styled/index.js
@@ -1,23 +1,29 @@
-import styled, { css } from 'styled-components';
-import { sif, wrapperStyles } from '@common/styled';
-import { colors } from '@common/colors';
-import { spacing, effects, animations } from '@common/constants'
-import { globalWrapper, handheld, tablet, desktop, tabletUp } from '@common/mixins';
-import { StyledButton, StyledButtons } from '@components/button/styled';
-import { CutoffImage } from '@components/cutoff-image'
-import { StyledFeaturette } from '@components/download-buttons'
+import styled, { css } from "styled-components";
+import { sif, wrapperStyles } from "@common/styled";
+import { colors } from "@common/colors";
+import { spacing, effects, animations } from "@common/constants";
+import {
+  globalWrapper,
+  handheld,
+  tablet,
+  desktop,
+  tabletUp
+} from "@common/mixins";
+import { StyledButton, StyledButtons } from "@components/button/styled";
+import { CutoffImage } from "@components/cutoff-image";
+import { StyledFeaturette } from "@components/download-buttons";
 
-const StyledVideoPlaceholder = styled.div``
-const PageHeaderMobileMessage = styled.div``
-const PageHeaderWrapper = styled.div``
-const Left = styled.div``
-const Right = styled.div``
+const StyledVideoPlaceholder = styled.div``;
+const PageHeaderMobileMessage = styled.div``;
+const PageHeaderWrapper = styled.div``;
+const Left = styled.div``;
+const Right = styled.div``;
 const PageHeader = styled.div`
 background-color: transparent;
 background-image: url(https://nteract.github.io/assets/images/hero_header_bg@2x.png);
 background-position: top center;
 background-attachment: fixed;
-background-size: ${spacing.globalWidth+200}px;
+background-size: ${spacing.globalWidth + 200}px;
 background-repeat: no-repeat;
 padding-top: ${spacing.headerHeight}px;
 overflow: hidden;
@@ -27,17 +33,17 @@ ${PageHeaderWrapper} {
     font-weight: 300;
     display: flex;
     justify-content: space-between;
-    padding-top: ${spacing.gutter*2}px;
+    padding-top: ${spacing.gutter * 2}px;
     overflow: hidden;
     h1 {
       animation-delay: ${animations.timingAnimationDelay}s;
       color: white;
     }
     ${handheld(css`
-        flex-direction: column;
+      flex-direction: column;
     `)}
     ${StyledFeaturette} {
-        margin-bottom: ${spacing.gutter*2}px;
+        margin-bottom: ${spacing.gutter * 2}px;
     }
 }
 ${Left} {
@@ -45,31 +51,33 @@ ${Left} {
     flex-direction: column;
     align-itmes: flex-start;
     justify-content: flex-end;
-    padding-right: ${spacing.gutter*2}px;
-    padding-bottom: ${spacing.gutter*2}px;
+    padding-right: ${spacing.gutter * 2}px;
+    padding-bottom: ${spacing.gutter * 2}px;
     p, ${StyledButtons} {
-        animation-delay: ${animations.timingAnimationDelay/3}s;
+        animation-delay: ${animations.timingAnimationDelay / 3}s;
 
     }
     ${tabletUp(css`
-        max-width: 550px;
+      max-width: 550px;
     `)}
     ${tablet(css`
-        max-width: 50%;
+      max-width: 50%;
     `)}
     ${handheld(css`
-        padding-right: 0;
-        padding-bottom: 0;
-        padding-top: ${spacing.gutter}px;
-        align-items: flex-start;
-        max-width: 100%;
-        h1, p, ${StyledButtons} {
-            max-width: 480px;
-        }
-        ${StyledButtons} {
-            width: 100%;
-            justify-content: flex-start;
-        }
+      padding-right: 0;
+      padding-bottom: 0;
+      padding-top: ${spacing.gutter}px;
+      align-items: flex-start;
+      max-width: 100%;
+      h1,
+      p,
+      ${StyledButtons} {
+        max-width: 480px;
+      }
+      ${StyledButtons} {
+        width: 100%;
+        justify-content: flex-start;
+      }
     `)}
 }
 ${Right} {
@@ -85,39 +93,39 @@ ${Right} {
       left: 0;
       width: 100%;
       ${tablet(css`
-        top: 80px;  
+        top: 80px;
         width: 120%;
         max-width: 200%;
       `)}
       :hover {
         top: -40px;
         ${tablet(css`
-            top: 50px;  
+          top: 50px;
         `)}
       }
     }
     ${tablet(css`
-        ${StyledVideoPlaceholder} {
-            display: none !important;
-        }
+      ${StyledVideoPlaceholder} {
+        display: none !important;
+      }
     `)}
     ${handheld(css`
-        ${StyledVideoPlaceholder} {
-            display: block !important;
-        }
+      ${StyledVideoPlaceholder} {
+        display: block !important;
+      }
     `)}
     video, ${StyledVideoPlaceholder} {
-      margin-top: ${spacing.gutter*2}px;
+      margin-top: ${spacing.gutter * 2}px;
       display: block;
       max-width: 100%;
-      animation-delay: ${animations.timingAnimationDelay/3}s;
+      animation-delay: ${animations.timingAnimationDelay / 3}s;
     }
 }
 
-`
+`;
 
-PageHeader.Left = Left
-PageHeader.Right = Right
-PageHeader.Wrapper = PageHeaderWrapper 
+PageHeader.Left = Left;
+PageHeader.Right = Right;
+PageHeader.Wrapper = PageHeaderWrapper;
 
-export { PageHeader as StyledPageHeader }
+export { PageHeader as StyledPageHeader };
diff --git a/components/typography/index.js b/components/typography/index.js
index bcf651c6..a2668726 100644
--- a/components/typography/index.js
+++ b/components/typography/index.js
@@ -1,3 +1,3 @@
-import { StyledType as Type, BashPre } from '@components/typography/styled';
+import { StyledType as Type, BashPre } from "@components/typography/styled";
 
 export { Type, BashPre };
diff --git a/components/typography/styled/index.js b/components/typography/styled/index.js
index 632cf47d..fa74d853 100644
--- a/components/typography/styled/index.js
+++ b/components/typography/styled/index.js
@@ -1,7 +1,7 @@
-import styled, { css } from 'styled-components';
-import { fonts } from '@common/constants';
-import { colors } from '@common/colors';
-import { bgColor, color, padding, margin, sif } from '@common/styled';
+import styled, { css } from "styled-components";
+import { fonts } from "@common/constants";
+import { colors } from "@common/colors";
+import { bgColor, color, padding, margin, sif } from "@common/styled";
 
 export const headingDefaults = () => css`
   font-family: ${fonts.headings};
@@ -29,17 +29,16 @@ const bodyDefaults = css`
   ${margin};
 `;
 const BashPre = styled.pre`
-    white-space: pre-wrap;       /* Since CSS 2.1 */
-    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-    white-space: -pre-wrap;      /* Opera 4-6 */
-    white-space: -o-pre-wrap;    /* Opera 7 */
-    word-wrap: break-word; 
-    display: block;
-    overflow-x: auto !important;
-    padding: 0.5em;
-    color: ${colors.colorTextBase};
-    ${color}
-    ${bgColor};
+  white-space: pre-wrap; /* Since CSS 2.1 */
+  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+  white-space: -pre-wrap; /* Opera 4-6 */
+  white-space: -o-pre-wrap; /* Opera 7 */
+  word-wrap: break-word;
+  display: block;
+  overflow-x: auto !important;
+  padding: 0.5em;
+  color: ${colors.colorTextBase};
+  ${color} ${bgColor};
 `;
 const StyledType = styled.div``;
 
@@ -76,7 +75,7 @@ const p = styled.p`
     margin-top: 20px;
   }
 
-  ${sif('small')(css`
+  ${sif("small")(css`
     font-size: 12px;
   `)};
 `;
diff --git a/components/video/index.js b/components/video/index.js
index a5fddb45..dd88aeb4 100644
--- a/components/video/index.js
+++ b/components/video/index.js
@@ -1,5 +1,5 @@
-import styled, { css } from 'styled-components';
-import { handheld, desktop } from '@common/mixins'
+import styled, { css } from "styled-components";
+import { handheld, desktop } from "@common/mixins";
 const Video = ({ mp4, webm, poster }) => (
   <video poster={poster} preload="auto" autoPlay muted loop="loop">
     {mp4 ? <source src={mp4} type="video/mp4" /> : null}
diff --git a/next.config.js b/next.config.js
index bf4e2cfc..e36a5df4 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,8 +1,8 @@
-const webpack = require('./webpack.config');
+const webpack = require("./webpack.config");
 
 module.exports = {
   webpack: (config, { dev }) => {
     config.resolve = webpack.resolve;
     return config;
-  },
+  }
 };
diff --git a/package.json b/package.json
index faa92f98..15725055 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
   "homepage": "https://github.com/nteract/nteract.io#readme",
   "license": "BSD-3-Clause",
   "lint-staged": {
-    "{lib,spec}/**/*.{js,scss}": [
+    "./**/*.js": [
       "prettier --write",
       "git add"
     ]
@@ -42,7 +42,7 @@
     "build": "next build",
     "dev": "node server.js",
     "flow": "flow",
-    "prettier": "prettier --write './**/*.{js}'",
+    "prettier": "prettier --write './**/*.js'",
     "start": "NODE_ENV=production node server.js"
   }
 }
diff --git a/pages/_app.js b/pages/_app.js
index 01966237..b705d0b9 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,18 +1,18 @@
 // @flow
-import App, { Container } from 'next/app';
-import React from 'react';
-import { App as AppWrapper } from '@components/app';
-import { Header } from '@components/header';
-import { Footer } from '@components/footer';
-import { WindowSize } from 'react-fns';
+import App, { Container } from "next/app";
+import React from "react";
+import { App as AppWrapper } from "@components/app";
+import { Header } from "@components/header";
+import { Footer } from "@components/footer";
+import { WindowSize } from "react-fns";
 
 // Should these types come from next.js directly somehow?
 type AppProps<P> = {
   Component: React.Component<*, *> & {
-    getInitialProps: ?(ctx: Context<*>) => P,
+    getInitialProps: ?(ctx: Context<*>) => P
   },
   router: *,
-  ctx: Context<*>,
+  ctx: Context<*>
 };
 
 class MyApp extends App {
@@ -26,8 +26,8 @@ class MyApp extends App {
   }
 
   componentDidMount() {
-    require('@common/css-paint-polyfill');
-    require('@common/rip');
+    require("@common/css-paint-polyfill");
+    require("@common/rip");
   }
 
   render() {
@@ -36,7 +36,7 @@ class MyApp extends App {
       <AppWrapper>
         <Container>
           <WindowSize>
-            {(size) => (
+            {size => (
               <>
                 <Header />
                 <Component
diff --git a/pages/_document.js b/pages/_document.js
index cb7c47dd..9b253d3d 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,8 +1,8 @@
 // @flow
-import * as React from 'react';
-import Document, { Head, Main, NextScript } from 'next/document';
-import styled, { ServerStyleSheet, injectGlobal } from 'styled-components';
-import { normalize } from 'polished';
+import * as React from "react";
+import Document, { Head, Main, NextScript } from "next/document";
+import styled, { ServerStyleSheet, injectGlobal } from "styled-components";
+import { normalize } from "polished";
 /**
  * Reset our styles
  */
@@ -34,8 +34,8 @@ const DocWrapper = styled.div`
 export default class MyDocument extends Document {
   static getInitialProps({ renderPage }: DocumentContext<*>) {
     const sheet = new ServerStyleSheet();
-    const page = renderPage((App) => (props) =>
-      sheet.collectStyles(<App {...props} />),
+    const page = renderPage(App => props =>
+      sheet.collectStyles(<App {...props} />)
     );
     const styleTags = sheet.getStyleElement();
     return { ...page, styleTags };
diff --git a/pages/about.js b/pages/about.js
index 103d33e9..7fb6a7cc 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -1,8 +1,8 @@
 // @flow
-import * as React from 'react';
-import { GithubCircleIcon, WebIcon } from 'mdi-react';
+import * as React from "react";
+import { GithubCircleIcon, WebIcon } from "mdi-react";
 
-import Layout from '../components/layout';
+import Layout from "../components/layout";
 import {
   StyledPerson,
   StyledPersonAvatar,
@@ -12,12 +12,12 @@ import {
   StyledPersonSocial,
   StyledPersonSocialItem,
   StyledGridWrapper,
-  StyledGrid,
-} from '../components/layout/styled';
-import { ContentSection } from '../components/content-section';
-import { PageHeader } from '../components/page-header';
-import { Type } from '../components/typography';
-const contributorsData = require('nteract-members');
+  StyledGrid
+} from "../components/layout/styled";
+import { ContentSection } from "../components/content-section";
+import { PageHeader } from "../components/page-header";
+import { Type } from "../components/typography";
+const contributorsData = require("nteract-members");
 
 const Mission = () => (
   <ContentSection>
@@ -41,7 +41,7 @@ const ContributorsList = contributorsData.map((person, index) => {
         <img src={person.avatar_url} />
       </StyledPersonAvatar>
       <StyledPersonDetails>
-        <StyledPersonName>{person.name || '@' + person.login}</StyledPersonName>
+        <StyledPersonName>{person.name || "@" + person.login}</StyledPersonName>
       </StyledPersonDetails>
       <StyledPersonSocial>
         <StyledPersonSocialItem key={index}>
@@ -72,7 +72,7 @@ const Contributors = () => (
 
 export default class AboutPage extends React.Component<OSProps, void> {
   render() {
-    let themeColor = '#334865';
+    let themeColor = "#334865";
     return (
       <Layout>
         <PageHeader themeColor={themeColor}>
diff --git a/pages/atom.js b/pages/atom.js
index e739e390..ce44238b 100644
--- a/pages/atom.js
+++ b/pages/atom.js
@@ -1,12 +1,12 @@
 // @flow
-import * as React from 'react';
-import { colors } from '@common/colors'
-import Layout from '@components/layout'
-import { Hero } from '@components/hero';
-import { Type, BashPre } from '@components/typography';
-import { ContentSection, ContentSections } from '@components/content-section';
-import { Button, Buttons } from '@components/button';
-import { CutoffImage } from '@components/cutoff-image';
+import * as React from "react";
+import { colors } from "@common/colors";
+import Layout from "@components/layout";
+import { Hero } from "@components/hero";
+import { Type, BashPre } from "@components/typography";
+import { ContentSection, ContentSections } from "@components/content-section";
+import { Button, Buttons } from "@components/button";
+import { CutoffImage } from "@components/cutoff-image";
 
 const Video = ({ mp4, webm, poster }) => (
   <video poster={poster} preload="auto" autoPlay muted loop="loop">
@@ -17,65 +17,67 @@ const Video = ({ mp4, webm, poster }) => (
 
 const InspectCode = () => (
   <ContentSection center>
-      <ContentSection.Pane visual>
-          <Video
-            style={{ boxShadow: "0 4px 14px 0 rgba(0,0,0,.1)" }}
-            mp4="static/atom/inspect.mp4"
-            poster="static/atom/inspect.png"
-            alt="Demo of code completion using atom, hydrogen and python"
-          />
-      </ContentSection.Pane>
+    <ContentSection.Pane visual>
+      <Video
+        style={{ boxShadow: "0 4px 14px 0 rgba(0,0,0,.1)" }}
+        mp4="static/atom/inspect.mp4"
+        poster="static/atom/inspect.png"
+        alt="Demo of code completion using atom, hydrogen and python"
+      />
+    </ContentSection.Pane>
 
-      <ContentSection.Pane>
-        <ContentSection.Title>Code Completion and Documentation</ContentSection.Title>
-        <Type.p>
-          Code completion and an inspector for displaying metadata, like
-          documentation, are there to make your coding experience seamless.
-        </Type.p>
-        <Type.p>
-          There’s no need to leave your favorite text editor to get the
-          information you need to fuel your development process.
-        </Type.p>
-      </ContentSection.Pane>
-  </ContentSection>)
+    <ContentSection.Pane>
+      <ContentSection.Title>
+        Code Completion and Documentation
+      </ContentSection.Title>
+      <Type.p>
+        Code completion and an inspector for displaying metadata, like
+        documentation, are there to make your coding experience seamless.
+      </Type.p>
+      <Type.p>
+        There’s no need to leave your favorite text editor to get the
+        information you need to fuel your development process.
+      </Type.p>
+    </ContentSection.Pane>
+  </ContentSection>
+);
 const InteractiveComputing = () => (
-          <ContentSection>
-            <ContentSection.Pane visual>
-              <Video
-                mp4="/static/atom/interactive.mp4"
-                poster="/static/atom/interactive.png"
-                alt="Demo of interactive computing using atom, hydrogen, and python"
-              />
-            </ContentSection.Pane>
-            <ContentSection.Pane>
-              <ContentSection.Title>
-                Interactive computing in Atom
-              </ContentSection.Title>
-              <Type.p>Choose which code to execute based on your needs.</Type.p>
-              <Type.p>
-                Run the whole file, a single line, a selection, or let Hydrogen
-                decide which code to run based on the current cursor position.
-              </Type.p>
-            </ContentSection.Pane>
-          </ContentSection>
-)
+  <ContentSection>
+    <ContentSection.Pane visual>
+      <Video
+        mp4="/static/atom/interactive.mp4"
+        poster="/static/atom/interactive.png"
+        alt="Demo of interactive computing using atom, hydrogen, and python"
+      />
+    </ContentSection.Pane>
+    <ContentSection.Pane>
+      <ContentSection.Title>Interactive computing in Atom</ContentSection.Title>
+      <Type.p>Choose which code to execute based on your needs.</Type.p>
+      <Type.p>
+        Run the whole file, a single line, a selection, or let Hydrogen decide
+        which code to run based on the current cursor position.
+      </Type.p>
+    </ContentSection.Pane>
+  </ContentSection>
+);
 const WatchExpressions = () => (
   <ContentSection center>
-      <ContentSection.Pane>
-        <ContentSection.Title>Watch Expressions</ContentSection.Title>
-        <Type.p>
-          Get instant feedback on your written code every time you hit execute.
-        </Type.p>
-      </ContentSection.Pane>
-      <ContentSection.Pane visual>
-          <Video
-            style={{ boxShadow: "0 4px 14px 0 rgba(0,0,0,.1)" }}
-            mp4="static/atom/watch-expressions.mp4"
-            poster="static/atom/watch-expressions.png"
-            alt="Demo of watching expressions using hydrogen in atom."
-          />
-      </ContentSection.Pane>
-  </ContentSection>)
+    <ContentSection.Pane>
+      <ContentSection.Title>Watch Expressions</ContentSection.Title>
+      <Type.p>
+        Get instant feedback on your written code every time you hit execute.
+      </Type.p>
+    </ContentSection.Pane>
+    <ContentSection.Pane visual>
+      <Video
+        style={{ boxShadow: "0 4px 14px 0 rgba(0,0,0,.1)" }}
+        mp4="static/atom/watch-expressions.mp4"
+        poster="static/atom/watch-expressions.png"
+        alt="Demo of watching expressions using hydrogen in atom."
+      />
+    </ContentSection.Pane>
+  </ContentSection>
+);
 
 class Atom extends React.Component<null, null> {
   static async getInitialProps(ctx: *) {
@@ -99,12 +101,23 @@ class Atom extends React.Component<null, null> {
               editor.
             </Type.p>
 
-            <Type.h4 style={{color: 'rgba(255,255,255, 0.8)'}} padding="20px 0 0 0">Install Hydrogen now with</Type.h4>
-            <BashPre bgColor={colors.darkerGrayColor} color={colors.lightCodeColor}>{`apm install hydrogen`}</BashPre>
+            <Type.h4
+              style={{ color: "rgba(255,255,255, 0.8)" }}
+              padding="20px 0 0 0"
+            >
+              Install Hydrogen now with
+            </Type.h4>
+            <BashPre
+              bgColor={colors.darkerGrayColor}
+              color={colors.lightCodeColor}
+            >{`apm install hydrogen`}</BashPre>
           </Hero.Pane>
 
           <Hero.Pane visual padding="40px 0 0 0">
-            <CutoffImage src="/static/atom/featured.png" alt="Atom Hero Image" />
+            <CutoffImage
+              src="/static/atom/featured.png"
+              alt="Atom Hero Image"
+            />
           </Hero.Pane>
         </Hero>
         <ContentSections>
diff --git a/pages/desktop.js b/pages/desktop.js
index e582fce7..11fd692a 100644
--- a/pages/desktop.js
+++ b/pages/desktop.js
@@ -1,13 +1,13 @@
 // @flow
-import * as React from 'react';
-import { Hero } from '@components/hero';
-import { Type } from '@components/typography';
-import { ContentSection, ContentSections } from '@components/content-section';
-import { Button, Buttons } from '@components/button';
-import { Video } from '@components/video';
-import { detectPlatform, getDownloadUrl } from '@lib';
-import { DownloadFeaturette } from '@components/download-buttons';
-import { CutoffImage } from '@components/cutoff-image';
+import * as React from "react";
+import { Hero } from "@components/hero";
+import { Type } from "@components/typography";
+import { ContentSection, ContentSections } from "@components/content-section";
+import { Button, Buttons } from "@components/button";
+import { Video } from "@components/video";
+import { detectPlatform, getDownloadUrl } from "@lib";
+import { DownloadFeaturette } from "@components/download-buttons";
+import { CutoffImage } from "@components/cutoff-image";
 
 class Atom extends React.Component<null, null> {
   static async getInitialProps(ctx: Context<EmptyQuery>): Promise<OSProps> {
diff --git a/pages/index.js b/pages/index.js
index 902952bd..a7cd65a4 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,12 +1,12 @@
 // @flow
-import * as React from 'react';
-import Layout from '@components/layout';
-import { Hero } from '@components/hero';
-import { Type } from '@components/typography';
-import { ContentSections, ContentSection } from '@components/content-section';
-import { Button, Buttons } from '@components/button';
-import { DownloadFeaturette } from '@components/download-buttons';
-import { detectPlatform, getDownloadUrl } from '@lib';
+import * as React from "react";
+import Layout from "@components/layout";
+import { Hero } from "@components/hero";
+import { Type } from "@components/typography";
+import { ContentSections, ContentSection } from "@components/content-section";
+import { Button, Buttons } from "@components/button";
+import { DownloadFeaturette } from "@components/download-buttons";
+import { detectPlatform, getDownloadUrl } from "@lib";
 
 const DemoVideo = () => (
   <video
@@ -27,13 +27,12 @@ const DemoVideo = () => (
   </video>
 );
 
-type HomeProps = { 
+type HomeProps = {
   platform: Platforms,
-  assetUrl: string,
-}
+  assetUrl: string
+};
 
 class Home extends React.Component<HomeProps, null> {
-  
   static async getInitialProps(ctx: Context<EmptyQuery>): Promise<OSProps> {
     const platform = detectPlatform(ctx);
     const assetUrl = await getDownloadUrl(platform);
@@ -42,7 +41,7 @@ class Home extends React.Component<HomeProps, null> {
 
   render() {
     return (
-      <Layout >
+      <Layout>
         <Hero>
           <Hero.Pane padding="0 20px 0 0">
             <Hero.Title>
diff --git a/pages/kernels.js b/pages/kernels.js
index 1cf09bd7..f7091432 100644
--- a/pages/kernels.js
+++ b/pages/kernels.js
@@ -1,48 +1,45 @@
 // @flow
-import * as React from 'react';
-import  Layout from '@components/layout';
-import Python from '@components/kernels/python';
-import R from '@components/kernels/r';
-import Node from '@components/kernels/node';
-import { Hero } from '@components/hero';
-import { Type, BashPre } from '@components/typography';
-import { ContentSection, ContentSections } from '@components/content-section';
-import { PageHeader } from '@components/page-header';
-import { Button, Buttons } from '@components/button';
-import { CutoffImage } from '@components/cutoff-image';
-import { colors } from '@common/colors';
-import { withRouter } from 'next/router';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { github } from 'react-syntax-highlighter/styles/hljs';
-
-
-type Languages = 'python' | 'node' | 'r';
-
-type Slugs = 'kernels/python' | 'kernels/node' | 'kernels/r';
+import * as React from "react";
+import Layout from "@components/layout";
+import Python from "@components/kernels/python";
+import R from "@components/kernels/r";
+import Node from "@components/kernels/node";
+import { Hero } from "@components/hero";
+import { Type, BashPre } from "@components/typography";
+import { ContentSection, ContentSections } from "@components/content-section";
+import { PageHeader } from "@components/page-header";
+import { Button, Buttons } from "@components/button";
+import { CutoffImage } from "@components/cutoff-image";
+import { colors } from "@common/colors";
+import { withRouter } from "next/router";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { github } from "react-syntax-highlighter/styles/hljs";
+
+type Languages = "python" | "node" | "r";
+
+type Slugs = "kernels/python" | "kernels/node" | "kernels/r";
 type ViewsType = { [key: ?Languages]: Slugs };
 
 const VIEWS: ViewsType = {
-  python: 'kernels/python',
-  node: 'kernels/node',
-  r: 'kernels/r',
+  python: "kernels/python",
+  node: "kernels/node",
+  r: "kernels/r"
 };
 
 const rCode = `install.packages(c('repr', 'IRdisplay', 'evaluate', 'crayon', 'pbdZMQ', 'devtools', 'uuid', 'digest'))
 devtools::install_github('IRkernel/IRkernel')
 IRkernel::installspec()`;
 
-
-
 const RenderContentImproved = ({ view }) => {
   switch (view) {
     case VIEWS.node:
-      return <Node />
+      return <Node />;
     case VIEWS.r:
-      return <R />
-    default: 
-      return <Python />
+      return <R />;
+    default:
+      return <Python />;
   }
-}
+};
 const RenderContent = ({ view }) => {
   switch (view) {
     case VIEWS.node:
@@ -51,7 +48,8 @@ const RenderContent = ({ view }) => {
           <ContentSection.Pane>
             <ContentSection.Title kernel>
               <ContentSection.Title.Section>
-                <img src="/static/nodejs-icon.svg" />Node.js Installation
+                <img src="/static/nodejs-icon.svg" />
+                Node.js Installation
               </ContentSection.Title.Section>
             </ContentSection.Title>
             <Type.p>
@@ -91,14 +89,14 @@ const RenderContent = ({ view }) => {
               </ContentSection.Title.Section>
             </ContentSection.Title>
 
-              <Type.h3> Installation</Type.h3>
-              <Type.h4 padding="10px 0 0 0">pip based</Type.h4>
-              <BashPre bgColor={colors.bgColor}>
-                {`python -m pip install ipykernel\npython -m ipykernel install --user`}
-              </BashPre>
-              <Type.h4 padding="40px 0 0 0">Using Conda</Type.h4>
+            <Type.h3> Installation</Type.h3>
+            <Type.h4 padding="10px 0 0 0">pip based</Type.h4>
             <BashPre bgColor={colors.bgColor}>
-                {`conda install ipykernel\npython -m ipykernel install --user`}
+              {`python -m pip install ipykernel\npython -m ipykernel install --user`}
+            </BashPre>
+            <Type.h4 padding="40px 0 0 0">Using Conda</Type.h4>
+            <BashPre bgColor={colors.bgColor}>
+              {`conda install ipykernel\npython -m ipykernel install --user`}
             </BashPre>
           </ContentSection.Pane>
         </ContentSection>
@@ -106,32 +104,33 @@ const RenderContent = ({ view }) => {
   }
 };
 
-class KernelsPage extends React.Component<{ slug: ?Languages, url: Array<string> }, { view: ?string}> {
+class KernelsPage extends React.Component<
+  { slug: ?Languages, url: Array<string> },
+  { view: ?string }
+> {
   static async getInitialProps(ctx: *) {
     const {
-      query: { slug },
+      query: { slug }
     } = ctx;
     return { slug };
   }
 
   state = {
-    view: VIEWS[this.props.slug] || VIEWS.python,
+    view: VIEWS[this.props.slug] || VIEWS.python
   };
 
-  changeView = (view) => {
-    this.setState(
-      (state) => (state.view !== view ? { ...state, view } : state),
-    );
+  changeView = view => {
+    this.setState(state => (state.view !== view ? { ...state, view } : state));
     this.props.router.push(`/${view}`, `/${view}`);
   };
 
-  activeView = (view) => view === this.state.view;
+  activeView = view => view === this.state.view;
 
   render() {
     return (
       <Layout>
         <PageHeader themeColor="rgb(44, 31, 57)">
-          <PageHeader.Left>         
+          <PageHeader.Left>
             <PageHeader.Title>Kernels</PageHeader.Title>
             <Type.p color={colors.lightGrayColor}>
               Kernels connect your favorite languages to nteract projects for an
@@ -160,7 +159,10 @@ class KernelsPage extends React.Component<{ slug: ?Languages, url: Array<string>
           </PageHeader.Left>
 
           <PageHeader.Right visual padding="40px 0 0 0">
-            <CutoffImage src="/static/kernels-terminal.png" alt="Kernels hero image" />
+            <CutoffImage
+              src="/static/kernels-terminal.png"
+              alt="Kernels hero image"
+            />
           </PageHeader.Right>
         </PageHeader>
         <ContentSections>
diff --git a/server.js b/server.js
index a4e21e38..a6d808a3 100644
--- a/server.js
+++ b/server.js
@@ -1,7 +1,7 @@
-const express = require('express');
-const next = require('next');
-const dev = process.env.NODE_ENV !== 'production';
-const app = next({ dir: '.', dev });
+const express = require("express");
+const next = require("next");
+const dev = process.env.NODE_ENV !== "production";
+const app = next({ dir: ".", dev });
 const handle = app.getRequestHandler();
 
 app.prepare().then(() => {
@@ -11,31 +11,31 @@ app.prepare().then(() => {
     /**
      * Static Files
      */
-    server.get('/robots.txt', (req, res) => {
-      return res.sendFile('/static/robots.txt');
+    server.get("/robots.txt", (req, res) => {
+      return res.sendFile("/static/robots.txt");
     });
-    server.get('/sitemap.xml', (req, res) => {
-      return res.sendFile('/static/sitemap.xm');
+    server.get("/sitemap.xml", (req, res) => {
+      return res.sendFile("/static/sitemap.xm");
     });
   }
 
   /**
    * Kernels
    */
-  server.get('/kernels/:slug', (req, res) => {
+  server.get("/kernels/:slug", (req, res) => {
     const queryParams = { slug: req.params.slug };
-    return app.render(req, res, '/kernels', queryParams);
+    return app.render(req, res, "/kernels", queryParams);
   });
 
   /**
    * Catch all
    */
-  server.get('*', (req, res) => {
+  server.get("*", (req, res) => {
     return handle(req, res);
   });
 
-  server.listen(8080, (err) => {
+  server.listen(8080, err => {
     if (err) throw err;
-    console.log('> Ready on http://localhost:8080');
+    console.log("> Ready on http://localhost:8080");
   });
 });
diff --git a/types/context.flow.js b/types/context.flow.js
index cd75c3ff..8af1bf62 100644
--- a/types/context.flow.js
+++ b/types/context.flow.js
@@ -3,7 +3,7 @@ export type ServerContext<Query> = {
   res: {},
   pathname: string,
   query: Query,
-  err: Error,
+  err: Error
 };
 
 export type ClientContext<Query> = {
@@ -11,7 +11,7 @@ export type ClientContext<Query> = {
   pathname: string,
   query: Query,
   jsonPageRes?: Response,
-  err: Error,
+  err: Error
 };
 
 export type Context<Query> = ClientContext<Query> | ServerContext<Query>;
@@ -20,8 +20,8 @@ export type DocumentContext<Query> = Context<Query> & { renderPage: Function };
 
 export type EmptyQuery = {};
 
-export type Platforms = 'macOS' | 'Linux' | 'Windows';
+export type Platforms = "macOS" | "Linux" | "Windows";
 export type OSProps = {
   platform: Platforms,
-  assetUrl: string,
+  assetUrl: string
 };
diff --git a/webpack.config.js b/webpack.config.js
index 9cb24d85..c821d123 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,16 +6,16 @@
  * This is imported into next.config.js
  */
 
-const path = require('path');
+const path = require("path");
 
 module.exports = {
   resolve: {
     alias: {
-      '@pages': path.resolve(__dirname, 'pages'),
-      '@components': path.resolve(__dirname, 'components'),
-      '@lib': path.resolve(__dirname, 'common/lib'),
-      '@common': path.resolve(__dirname, 'common'),
-      '@static': path.resolve(__dirname, 'static')
+      "@pages": path.resolve(__dirname, "pages"),
+      "@components": path.resolve(__dirname, "components"),
+      "@lib": path.resolve(__dirname, "common/lib"),
+      "@common": path.resolve(__dirname, "common"),
+      "@static": path.resolve(__dirname, "static")
     }
   }
 };