diff --git a/package.json b/package.json
index 8d4fb7b53f4..2277f4f68d4 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "start:fast": "lerna run start --scope app --stream",
     "start:vscode": "VSCODE=1 yarn start:fast & cd standalone-packages/monaco-editor && yarn simpleserver & cd standalone-packages/vscode && yarn watch",
     "start:dynamic": "lerna run dev --scope dynamic-pages --stream",
+    "start:common": "lerna run start --scope common --stream",
     "start:home": "lerna run start --scope homepage --stream",
     "start:test": "lerna run start:test --scope app --stream",
     "start:dev_api": "lerna run start:dev_api --scope app --stream",
diff --git a/packages/app/src/app/components/CodeEditor/ImageViewer/index.tsx b/packages/app/src/app/components/CodeEditor/ImageViewer/index.tsx
index 89d24180656..3e642357066 100644
--- a/packages/app/src/app/components/CodeEditor/ImageViewer/index.tsx
+++ b/packages/app/src/app/components/CodeEditor/ImageViewer/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import React from 'react';
 import Input from '@codesandbox/common/lib/components/Input';
 import { Button } from '@codesandbox/common/lib/components/Button';
diff --git a/packages/app/src/app/components/CodeEditor/VSCode/Configuration/index.tsx b/packages/app/src/app/components/CodeEditor/VSCode/Configuration/index.tsx
index 85992745a37..a893e1a6506 100644
--- a/packages/app/src/app/components/CodeEditor/VSCode/Configuration/index.tsx
+++ b/packages/app/src/app/components/CodeEditor/VSCode/Configuration/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import React from 'react';
 import { TextOperation } from 'ot';
 import { Module } from '@codesandbox/common/lib/types';
diff --git a/packages/app/src/app/components/CodeEditor/VSCode/index.tsx b/packages/app/src/app/components/CodeEditor/VSCode/index.tsx
index f2dda4da21a..9e9b570d4c1 100644
--- a/packages/app/src/app/components/CodeEditor/VSCode/index.tsx
+++ b/packages/app/src/app/components/CodeEditor/VSCode/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import * as React from 'react';
 import { render } from 'react-dom';
 import { ThemeProvider } from 'styled-components';
diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/TestBlock/TestName/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/TestBlock/TestName/index.tsx
index 42ad2e279fb..9db7e2712b7 100644
--- a/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/TestBlock/TestName/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/TestBlock/TestName/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import * as React from 'react';
 import { Test } from '../../../';
 
diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/TestBlock/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/TestBlock/index.tsx
index fc2ca674d1a..da808aab171 100644
--- a/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/TestBlock/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/TestBlock/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import * as React from 'react';
 import FileIcon from 'react-icons/lib/md/insert-drive-file';
 
diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/index.tsx
index 80f43280a12..808625d6878 100644
--- a/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import * as React from 'react';
 import FileIcon from 'react-icons/lib/md/insert-drive-file';
 import PlayIcon from 'react-icons/lib/go/playback-play';
diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestElement/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/TestElement/index.tsx
index a51d4c4bbf3..6aa8a3fb65c 100644
--- a/packages/app/src/app/components/Preview/DevTools/Tests/TestElement/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/Tests/TestElement/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 
 import * as React from 'react';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestOverview/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/TestOverview/index.tsx
index 21e958c6b8e..f4e7cfbd999 100644
--- a/packages/app/src/app/components/Preview/DevTools/Tests/TestOverview/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/Tests/TestOverview/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 
 import * as React from 'react';
 
diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestProgressBar/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/TestProgressBar/index.tsx
index 070644365e3..3c89c430dbc 100644
--- a/packages/app/src/app/components/Preview/DevTools/Tests/TestProgressBar/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/Tests/TestProgressBar/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 
 import * as React from 'react';
 import { ProgressBar, FailedBar, SuccessBar, IdleBar } from './elements';
diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestSummary/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/TestSummary/index.tsx
index bde48de5cab..faee3fb0021 100644
--- a/packages/app/src/app/components/Preview/DevTools/Tests/TestSummary/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/Tests/TestSummary/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import * as React from 'react';
 import PlayIcon from 'react-icons/lib/go/playback-play';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestSummaryText/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/TestSummaryText/index.tsx
index d9d1e7a2939..c951d084e3a 100644
--- a/packages/app/src/app/components/Preview/DevTools/Tests/TestSummaryText/index.tsx
+++ b/packages/app/src/app/components/Preview/DevTools/Tests/TestSummaryText/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import * as React from 'react';
 import {
   TestDetails,
diff --git a/packages/app/src/app/index.html b/packages/app/src/app/index.html
index 04325da9978..e2a1ef0841b 100644
--- a/packages/app/src/app/index.html
+++ b/packages/app/src/app/index.html
@@ -1,42 +1,44 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta property="og:type" content="website">
-    <meta property="og:author" content='https://ivesvh.com'>
-    <meta property="og:title" content="CodeSandbox">
-    <meta property="og:site_name" content="CodeSandbox">
-    <meta property="og:description" content="CodeSandbox is an online editor tailored for web applications.">
-    <meta property="og:image" content="https://codesandbox.io/static/img/banner.png">
-    <meta property="og:image:width" content="1200">
-    <meta property="og:image:height" content="630">
-    <meta property="twitter:card" content="summary_large_image">
-    <meta property="twitter:site" content="@codesandbox">
-    <meta property="twitter:title" content="CodeSandbox">
-    <meta property="twitter:description" content="An online editor tailored for web application development.">
-    <meta property="twitter:image:src" content="https://codesandbox.io/static/img/banner.png">
-    <meta property="twitter:image:width" content="1200">
-    <meta property="twitter:image:height" content="630">
-    <meta name="theme-color" content="#40A9F3">
-    <meta name="description" content="CodeSandbox is an online editor tailored for web applications.">
-    <link rel="shortcut icon" href="/favicon.ico">
-    <link rel="manifest" href="/manifest.json">
-    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
-    <script>
-      WebFont.load({
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta property="og:type" content="website">
+	<meta property="og:author" content='https://ivesvh.com'>
+	<meta property="og:title" content="CodeSandbox">
+	<meta property="og:site_name" content="CodeSandbox">
+	<meta property="og:description" content="CodeSandbox is an online editor tailored for web applications.">
+	<meta property="og:image" content="https://codesandbox.io/static/img/banner.png">
+	<meta property="og:image:width" content="1200">
+	<meta property="og:image:height" content="630">
+	<meta property="twitter:card" content="summary_large_image">
+	<meta property="twitter:site" content="@codesandbox">
+	<meta property="twitter:title" content="CodeSandbox">
+	<meta property="twitter:description" content="An online editor tailored for web application development.">
+	<meta property="twitter:image:src" content="https://codesandbox.io/static/img/banner.png">
+	<meta property="twitter:image:width" content="1200">
+	<meta property="twitter:image:height" content="630">
+	<meta name="theme-color" content="#40A9F3">
+	<meta name="description" content="CodeSandbox is an online editor tailored for web applications.">
+	<link rel="shortcut icon" href="/favicon.ico">
+	<link rel="manifest" href="/manifest.json">
+	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
+	<script>
+		WebFont.load({
         google: {
-          families: ['Source Code Pro:500', 'Roboto:300,400,500,700', 'Poppins:300,400,500,600,700']
+          families: ['Source Code Pro:500', 'Roboto:300,400,500,700', 'Poppins:300,400,500,600,700', 'Open Sans:400']
         }
       });
-    </script>
-    <!-- Injected by server: -->
-    <!-- {{OEMBED TAG}} -->
-    <title>CodeSandbox</title>
-    <link href="/static/fonts/dmvendor.css" rel="stylesheet"></link>
-    <!-- Google Tag Manager -->
-    <script>
-      (function (w, d, s, l, i) {
+	</script>
+	<!-- Injected by server: -->
+	<!-- {{OEMBED TAG}} -->
+	<title>CodeSandbox</title>
+	<link href="/static/fonts/dmvendor.css" rel="stylesheet">
+	</link>
+	<!-- Google Tag Manager -->
+	<script>
+		(function (w, d, s, l, i) {
         w[l] = w[l] || []; w[l].push({
           'gtm.start':
             new Date().getTime(), event: 'gtm.js'
@@ -44,16 +46,16 @@
           j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
             'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
       })(window, document, 'script', 'dataLayer', 'GTM-T3L6RFK');
-    </script>
-    <!-- End Google Tag Manager -->
-    <!-- <script async src="//cdn.headwayapp.co/widget.js"></script> -->
-    <script async rel="prefetch" src="https://js.stripe.com/v3/"></script>
-    <script src="<%= webpackConfig.output.publicPath %>static/browserfs3/browserfs<%=process.env.NODE_ENV
+	</script>
+	<!-- End Google Tag Manager -->
+	<!-- <script async src="//cdn.headwayapp.co/widget.js"></script> -->
+	<script async rel="prefetch" src="https://js.stripe.com/v3/"></script>
+	<script src="<%= webpackConfig.output.publicPath %>static/browserfs3/browserfs<%=process.env.NODE_ENV
       === 'development' ? '' : '.min'%>.js"
-      type="text/javascript"></script>
+	 type="text/javascript"></script>
 
-    <script>
-      if (BrowserFS) {
+	<script>
+		if (BrowserFS) {
         window.process = {
           env: {
             VSCODE_DEV: false
@@ -66,23 +68,22 @@
         };
         window.Buffer = BrowserFS.BFSRequire('buffer').Buffer;
       }
-    </script>
+	</script>
+
+	<link data-name="/public/vscode21/vs/editor/editor.main" rel="preload" as="style" href="/public/vscode21/vs/editor/codesandbox.editor.main.css">
+	</link>
+	<link rel="preload" as="script" href="/public/vscode21/vs/editor/codesandbox.editor.main.js">
+	</link>
+</head>
+
+<body style="margin: 0; padding: 0;">
+	<!-- Google Tag Manager (noscript) -->
+	<noscript>
+		<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T3L6RFK" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+	</noscript>
+	<!-- End Google Tag Manager (noscript) -->
+	<div id="root">
+	</div>
+</body>
 
-    <link data-name="/public/vscode21/vs/editor/editor.main"
-      rel="preload"
-      as="style"
-      href="/public/vscode21/vs/editor/codesandbox.editor.main.css">
-    </link>
-    <link rel="preload" as="script" href="/public/vscode21/vs/editor/codesandbox.editor.main.js"></link>
-  </head>
-  <body style="margin: 0; padding: 0;">
-    <!-- Google Tag Manager (noscript) -->
-    <noscript>
-      <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T3L6RFK"
-        height="0" width="0" style="display:none;visibility:hidden"></iframe>
-    </noscript>
-    <!-- End Google Tag Manager (noscript) -->
-    <div id="root">
-    </div>
-  </body>
 </html>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/Status.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/Status.tsx
index bbba84098af..ea0781d222c 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/Status.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/Status.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import React from 'react';
 import styled from 'styled-components';
 
diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/index.js b/packages/app/src/app/pages/Sandbox/SearchDependencies/index.js
index 4ea4155021b..40145da0f2b 100644
--- a/packages/app/src/app/pages/Sandbox/SearchDependencies/index.js
+++ b/packages/app/src/app/pages/Sandbox/SearchDependencies/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { InstantSearch, Configure, PoweredBy } from 'react-instantsearch/dom';
 import { connectAutoComplete } from 'react-instantsearch/connectors';
 
-import 'app/pages/Search/search.css';
+import Style from 'app/pages/Search/search';
 import DependenciesCSS from './dependencies';
 
 import RawAutoComplete from './RawAutoComplete';
@@ -48,6 +48,7 @@ export default class SearchDependencies extends React.PureComponent {
   render() {
     return (
       <div className="search-dependencies">
+        <Style />
         <DependenciesCSS />
         <InstantSearch
           appId="OFCNCOG2CU"
diff --git a/packages/app/src/app/pages/Search/Filters/Filter/Sort.js b/packages/app/src/app/pages/Search/Filters/Filter/Sort.js
new file mode 100644
index 00000000000..b9bc6bbb81e
--- /dev/null
+++ b/packages/app/src/app/pages/Search/Filters/Filter/Sort.js
@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import Down from 'react-icons/lib/md/expand-more';
+import Up from 'react-icons/lib/md/expand-less';
+import { SortBy } from 'react-instantsearch-dom';
+
+import { Container, Title, Button } from './elements';
+
+class Filter extends Component {
+  state = { open: false };
+
+  toggle = () => this.setState(({ open }) => ({ open: !open }));
+  render() {
+    const { title, defaultRefinement, items } = this.props;
+    const { open } = this.state;
+    return (
+      <Container open={open}>
+        <Title>
+          <span>{title}</span>
+          <Button onClick={this.toggle}>{open ? <Up /> : <Down />}</Button>
+        </Title>
+        <SortBy defaultRefinement={defaultRefinement} items={items} />
+      </Container>
+    );
+  }
+}
+export default Filter;
diff --git a/packages/app/src/app/pages/Search/Filters/Filter/elements.js b/packages/app/src/app/pages/Search/Filters/Filter/elements.js
index 500c8b4dec7..529b7c0fee4 100644
--- a/packages/app/src/app/pages/Search/Filters/Filter/elements.js
+++ b/packages/app/src/app/pages/Search/Filters/Filter/elements.js
@@ -2,8 +2,8 @@ import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
   padding: 1rem;
-  background-color: ${props => props.theme.background};
-  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.24);
+  background-color: ${props => props.theme.background2};
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border-radius: 2px;
   margin-bottom: 1rem;
 
@@ -31,12 +31,13 @@ export const Container = styled.div`
 `;
 
 export const Title = styled.div`
-  font-weight: 300;
-  font-size: 1.25rem;
   margin-bottom: 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  font-size: 18px;
+  line-height: 25px;
+  font-weight: normal;
 
   svg {
     display: none;
diff --git a/packages/app/src/app/pages/Search/Filters/elements.js b/packages/app/src/app/pages/Search/Filters/elements.js
index cd99342a0c3..b4456de6dbb 100644
--- a/packages/app/src/app/pages/Search/Filters/elements.js
+++ b/packages/app/src/app/pages/Search/Filters/elements.js
@@ -2,7 +2,9 @@ import styled from 'styled-components';
 
 export const Container = styled.aside`
   flex: 1;
+  max-width: 340px;
   @media (max-width: 768px) {
     width: 100%;
+    max-width: 100%;
   }
 `;
diff --git a/packages/app/src/app/pages/Search/Filters/index.js b/packages/app/src/app/pages/Search/Filters/index.js
index fb3b91966a4..e1bafd36fb5 100644
--- a/packages/app/src/app/pages/Search/Filters/index.js
+++ b/packages/app/src/app/pages/Search/Filters/index.js
@@ -1,12 +1,22 @@
 import React from 'react';
 import getTemplate from '@codesandbox/common/lib/templates';
+import { ALGOLIA_DEFAULT_INDEX } from '@codesandbox/common/lib/utils/config';
 
 import Filter from './Filter';
+import Sort from './Filter/Sort';
 import { Container } from './elements';
 
 function Filters() {
   return (
     <Container>
+      <Sort
+        title="Sort By"
+        items={[
+          { value: ALGOLIA_DEFAULT_INDEX, label: 'Views' },
+          { value: `${ALGOLIA_DEFAULT_INDEX}_likes`, label: 'Likes' },
+        ]}
+        defaultRefinement={ALGOLIA_DEFAULT_INDEX}
+      />
       <Filter
         title="Templates"
         operator="or"
diff --git a/packages/app/src/app/pages/Search/ResultInfo/index.js b/packages/app/src/app/pages/Search/ResultInfo/index.js
index eee84dd8679..4155a0d4e4e 100644
--- a/packages/app/src/app/pages/Search/ResultInfo/index.js
+++ b/packages/app/src/app/pages/Search/ResultInfo/index.js
@@ -6,7 +6,11 @@ import { ClearAllContainer } from './elements';
 function ResultInfo() {
   return (
     <div style={{ marginBottom: '1rem', fontSize: '.875rem' }}>
-      <Stats />
+      <Stats
+        translations={{
+          stats: nbHits => `${nbHits.toLocaleString()} results found`,
+        }}
+      />
       <ClearAllContainer>
         <ClearRefinements />
       </ClearAllContainer>
diff --git a/packages/app/src/app/pages/Search/Results/elements.js b/packages/app/src/app/pages/Search/Results/elements.js
index 9a8e32b7472..dfe95f96585 100644
--- a/packages/app/src/app/pages/Search/Results/elements.js
+++ b/packages/app/src/app/pages/Search/Results/elements.js
@@ -2,8 +2,7 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   flex: 2;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  margin-right: 2rem;
+  border-top: 1px solid #828282;
   padding-top: 1rem;
 
   color: rgba(255, 255, 255, 0.6);
diff --git a/packages/app/src/app/pages/Search/Results/index.js b/packages/app/src/app/pages/Search/Results/index.js
index b427ab20311..a3cb1bdf428 100644
--- a/packages/app/src/app/pages/Search/Results/index.js
+++ b/packages/app/src/app/pages/Search/Results/index.js
@@ -2,17 +2,31 @@ import React from 'react';
 
 import { Hits, Pagination } from 'react-instantsearch/dom';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
+import WideSandbox from '@codesandbox/common/lib/components/WideSandbox';
+import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 
 import ResultInfo from '../ResultInfo';
-import SandboxCard from '../SandboxCard';
-
 import { Container } from './elements';
 
 function Results() {
   return (
     <Container>
       <ResultInfo />
-      <Hits hitComponent={SandboxCard} />
+      <Hits
+        hitComponent={({ hit }) => (
+          <WideSandbox
+            selectSandbox={() =>
+              window.open(sandboxUrl({ id: hit.objectID, git: hit.git }))
+            }
+            noHeight
+            sandbox={{
+              ...hit,
+              title: hit.title || hit.objectID,
+              id: hit.objectID,
+            }}
+          />
+        )}
+      />
       <Centered horizontal>
         <Pagination />
       </Centered>
diff --git a/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/elements.js b/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/elements.js
deleted file mode 100644
index 80d0287eba2..00000000000
--- a/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/elements.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-
-export const CenteredText = styled.div`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-`;
diff --git a/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/index.js b/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/index.js
deleted file mode 100644
index 776734a83e9..00000000000
--- a/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { CenteredText } from './elements';
-
-function Stat({ Icon, count }) {
-  return (
-    <CenteredText style={{ fontSize: '.875rem' }}>
-      <Icon />
-      <span
-        style={{
-          marginLeft: '0.5rem',
-          marginRight: '1rem',
-          fontWeight: 300,
-        }}
-      >
-        {count.toLocaleString()}
-      </span>
-    </CenteredText>
-  );
-}
-
-export default Stat;
diff --git a/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/elements.js b/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/elements.js
deleted file mode 100644
index ea9ccbc4587..00000000000
--- a/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/elements.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import styled from 'styled-components';
-import { UserWithAvatar } from '@codesandbox/common/lib/components/UserWithAvatar';
-
-export const CenteredText = styled.div`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-`;
-
-export const UpdatedAt = styled.em`
-  font-size: 0.75rem;
-
-  @media (max-width: 768px) {
-    display: none;
-  }
-`;
-
-export const Stats = styled.div`
-  position: absolute;
-  right: 0;
-
-  font-size: 0.875rem;
-  display: flex;
-
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-`;
-
-export const StyledUser = styled(UserWithAvatar)`
-  font-size: 0.75rem;
-`;
diff --git a/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/index.js b/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/index.js
deleted file mode 100644
index c99c0c82229..00000000000
--- a/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import moment from 'moment';
-
-import FullHeartIcon from 'react-icons/lib/fa/heart';
-import EyeIcon from 'react-icons/lib/fa/eye';
-import ForkIcon from 'react-icons/lib/go/repo-forked';
-
-import GithubBadge from '@codesandbox/common/lib/components/GithubBadge';
-
-import Stat from './Stat';
-import { CenteredText, UpdatedAt, Stats, StyledUser } from './elements';
-
-function SandboxInfo({
-  author,
-  updatedAt,
-  viewCount,
-  forkCount,
-  likeCount,
-  git,
-}) {
-  return (
-    <CenteredText>
-      {author && (
-        <StyledUser avatarUrl={author.avatar_url} username={author.username} />
-      )}
-      {git && <GithubBadge username={git.username} repo={git.repo} />}
-
-      <UpdatedAt>{moment(updatedAt * 1000).fromNow()}</UpdatedAt>
-
-      <Stats>
-        <Stat Icon={EyeIcon} count={viewCount} />
-        <Stat Icon={FullHeartIcon} count={likeCount} />
-        <Stat Icon={ForkIcon} count={forkCount} />
-      </Stats>
-    </CenteredText>
-  );
-}
-
-export default SandboxInfo;
diff --git a/packages/app/src/app/pages/Search/SandboxCard/elements.js b/packages/app/src/app/pages/Search/SandboxCard/elements.js
deleted file mode 100644
index 47b4c823ece..00000000000
--- a/packages/app/src/app/pages/Search/SandboxCard/elements.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import styled from 'styled-components';
-import { Link } from 'react-router-dom';
-import Row from '@codesandbox/common/lib/components/flex/Row';
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
-
-export const Container = styled.div`
-  transition: 0.3s ease all;
-
-  position: relative;
-  background-color: ${props => props.theme.background};
-  padding: 1em;
-  padding-bottom: 0.9em; /* strange styling issue, need to compensate */
-  width: 100%;
-  margin-bottom: 1rem;
-  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.24);
-  border-radius: 2px;
-  box-sizing: border-box;
-
-  border-left: 2px solid
-    ${props => getTemplateDefinition(props.template).color.clearer(0.3)};
-
-  cursor: pointer;
-
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.24);
-    background-color: ${props => props.theme.background.lighten(0.1)};
-  }
-`;
-
-export const StyledLink = styled(Link)`
-  text-transform: none;
-  text-decoration: none;
-  color: inherit;
-`;
-
-export const Title = styled.h2`
-  font-weight: 400;
-  font-size: 1.25em;
-  margin: 0;
-  margin-bottom: 1rem;
-  width: 70%;
-  color: white;
-`;
-
-export const Description = styled.p`
-  font-size: 0.875rem;
-  color: rgba(255, 255, 255, 0.8);
-  margin-bottom: 1.5rem;
-`;
-
-export const TagContainer = styled.div`
-  font-size: 0.75rem;
-  width: 30%;
-
-  @media (max-width: 768px) {
-    width: auto;
-  }
-`;
-
-export const Header = styled(Row)`
-  @media (max-width: 768px) {
-    flex-direction: column;
-  }
-`;
diff --git a/packages/app/src/app/pages/Search/SandboxCard/index.js b/packages/app/src/app/pages/Search/SandboxCard/index.js
deleted file mode 100644
index 83724e5bd01..00000000000
--- a/packages/app/src/app/pages/Search/SandboxCard/index.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import { Highlight } from 'react-instantsearch/dom';
-
-import Tags from '@codesandbox/common/lib/components/Tags';
-
-import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
-
-import SandboxInfo from './SandboxInfo';
-
-import {
-  Container,
-  StyledLink,
-  Title,
-  Description,
-  TagContainer,
-  Header,
-} from './elements';
-
-function SandboxCard({ hit }) {
-  return (
-    <StyledLink to={sandboxUrl({ id: hit.objectID, git: hit.git })}>
-      <Container template={hit.template}>
-        <Header alignItems="flex-start">
-          <Title>
-            {hit.title ? (
-              <Highlight attribute="title" hit={hit} />
-            ) : (
-              hit.objectID
-            )}
-          </Title>
-          <TagContainer>
-            <Tags
-              align="right"
-              style={{ margin: 0, marginTop: -2 }}
-              tags={(hit.tags || []).filter(tag => tag.length < 20)}
-            />
-          </TagContainer>
-        </Header>
-        <Description>
-          <Highlight attribute="description" hit={hit} />
-        </Description>
-
-        <SandboxInfo
-          git={hit.git}
-          author={hit.author}
-          updatedAt={hit.updated_at}
-          viewCount={hit.view_count}
-          forkCount={hit.fork_count}
-          likeCount={hit.like_count}
-        />
-      </Container>
-    </StyledLink>
-  );
-}
-
-export default SandboxCard;
diff --git a/packages/app/src/app/pages/Search/elements.js b/packages/app/src/app/pages/Search/elements.js
index 892fa20c1bb..178185da960 100644
--- a/packages/app/src/app/pages/Search/elements.js
+++ b/packages/app/src/app/pages/Search/elements.js
@@ -9,23 +9,25 @@ export const Content = styled.div`
 `;
 
 export const StyledTitle = styled(Title)`
-  display: inline-block;
-  text-align: left;
-  font-size: 2rem;
-
-  /* Algolia Icon */
-  + div {
-    @media (max-width: 768px) {
-      float: none;
-      margin-top: -10px;
-      padding: 0;
-      margin-bottom: 1.5rem;
-    }
-  }
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+  font-size: 36px;
+  display: flex;
+  color: ${props => props.theme.lightText};
+  margin-bottom: 16px;
 `;
 
 export const Main = styled(Row)`
+  display: grid;
+  grid-template-columns: 1fr 340px;
+  grid-gap: 24px;
   @media (max-width: 768px) {
-    flex-direction: column;
+    grid-template-columns: 1fr;
   }
 `;
+
+export const Container = styled.div`
+  background: ${props => props.theme.background5};
+  width: 100vw;
+  font-family: 'Open Sans', sans-serif;
+`;
diff --git a/packages/app/src/app/pages/Search/index.js b/packages/app/src/app/pages/Search/index.js
index d114067cd14..dbdb0c7324a 100644
--- a/packages/app/src/app/pages/Search/index.js
+++ b/packages/app/src/app/pages/Search/index.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import { inject } from 'mobx-react';
-import { InstantSearch, SearchBox, PoweredBy } from 'react-instantsearch/dom';
+import {
+  InstantSearch,
+  SearchBox,
+  PoweredBy,
+  Configure,
+} from 'react-instantsearch/dom';
 import qs from 'qs';
 
 import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
@@ -14,25 +19,14 @@ import {
 } from '@codesandbox/common/lib/utils/config';
 
 import 'instantsearch.css/themes/reset.css';
-import './search.css';
+import Styles from './search';
 
 import Results from './Results';
 import Filters from './Filters';
-import { Content, StyledTitle, Main } from './elements';
-
-const SEARCHABLE_THINGS = [
-  'dependency',
-  'user',
-  'sandbox title',
-  'sandbox tag',
-  'github repository',
-];
+import { Content, StyledTitle, Main, Container } from './elements';
 
 const updateAfter = 700;
 
-const getRandomSearch = () =>
-  SEARCHABLE_THINGS[Math.floor(Math.random() * SEARCHABLE_THINGS.length)];
-
 const createURL = state => `?${qs.stringify(state)}`;
 
 const searchStateToUrl = (props, searchState) =>
@@ -43,7 +37,6 @@ class Search extends React.PureComponent {
     super(props);
     this.state = {
       searchState: qs.parse(props.location.search.slice(1)),
-      randomSearch: getRandomSearch(),
     };
 
     this.unlisten = this.props.history.listen((location, action) => {
@@ -77,34 +70,41 @@ class Search extends React.PureComponent {
   render() {
     document.title = 'Search - CodeSandbox';
     return (
-      <MaxWidth>
-        <Margin vertical={1.5}>
-          <Navigation title="Search" searchNoInput />
-          <Content>
-            <InstantSearch
-              appId={ALGOLIA_APPLICATION_ID}
-              apiKey={ALGOLIA_API_KEY}
-              indexName={ALGOLIA_DEFAULT_INDEX}
-              searchState={this.state.searchState}
-              onSearchStateChange={this.onSearchStateChange}
-              createURL={createURL}
-            >
-              <StyledTitle>Sandbox Search</StyledTitle>
-              <PoweredBy />
-              <SearchBox
-                autoFocus
-                translations={{
-                  placeholder: `Search for a ${this.state.randomSearch}...`,
-                }}
-              />
-              <Main alignItems="flex-start">
-                <Results />
-                <Filters />
-              </Main>
-            </InstantSearch>
-          </Content>
-        </Margin>
-      </MaxWidth>
+      <Container>
+        <Styles />
+        <MaxWidth>
+          <Margin vertical={1.5}>
+            <Navigation title="Search" searchNoInput />
+            <Content>
+              <InstantSearch
+                appId={ALGOLIA_APPLICATION_ID}
+                apiKey={ALGOLIA_API_KEY}
+                indexName={ALGOLIA_DEFAULT_INDEX}
+                searchState={this.state.searchState}
+                onSearchStateChange={this.onSearchStateChange}
+                createURL={createURL}
+              >
+                <Configure hitsPerPage={12} />
+                <Main alignItems="flex-start">
+                  <div>
+                    <StyledTitle>Search</StyledTitle>
+                    <PoweredBy />
+                    <SearchBox
+                      autoFocus
+                      translations={{
+                        placeholder: `Search Sandboxes...`,
+                      }}
+                    />
+                    <Results />
+                  </div>
+
+                  <Filters />
+                </Main>
+              </InstantSearch>
+            </Content>
+          </Margin>
+        </MaxWidth>
+      </Container>
     );
   }
 }
diff --git a/packages/app/src/app/pages/Search/search.css b/packages/app/src/app/pages/Search/search.css
deleted file mode 100644
index ed239df306a..00000000000
--- a/packages/app/src/app/pages/Search/search.css
+++ /dev/null
@@ -1,323 +0,0 @@
-.ais-SearchBox-form {
-  position: relative;
-  margin-bottom: 2rem;
-}
-
-.ais-SearchBox-input {
-  transition: 0.3s ease border-color;
-  position: relative;
-  background-color: rgba(0, 0, 0, 0.3);
-  outline: none;
-  border-radius: 4px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  color: white;
-  padding: 0.5em;
-  padding-left: 2em;
-  width: inherit;
-  box-sizing: border-box;
-  font-size: 1.125em;
-  font-weight: 500;
-
-  width: 100%;
-}
-
-.ais-SearchBox-input:focus {
-  border-color: rgba(108, 174, 221, 0.5);
-}
-
-.ais-SearchBox-submit {
-  position: absolute;
-  top: 0;
-  right: inherit;
-  left: 0;
-  margin: 0;
-  border: 0;
-  border-radius: 3px 0 0 3px;
-  background-color: rgba(255, 255, 255, 0);
-  padding: 0;
-  width: 32px;
-  height: 100%;
-  vertical-align: middle;
-  text-align: center;
-  font-size: inherit;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding-left: 4px;
-  padding-bottom: 2px;
-}
-.ais-SearchBox-submit::before {
-  display: inline-block;
-  margin-right: -4px;
-  height: 100%;
-  vertical-align: middle;
-  content: '' 2;
-}
-.ais-SearchBox-submit:hover,
-.ais-SearchBox-submit:active {
-  cursor: pointer;
-}
-.ais-SearchBox-submit:focus {
-  outline: 0;
-}
-.ais-SearchBox-submit svg {
-  margin: 6px;
-  width: 14px;
-  height: 14px;
-  vertical-align: middle;
-  fill: rgba(255, 255, 255, 0.5);
-}
-
-.ais-SearchBox-reset {
-  display: none;
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  margin: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-  padding: 0;
-  font-size: inherit;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  fill: rgba(255, 255, 255, 0.5);
-}
-.ais-SearchBox-reset:focus {
-  outline: 0;
-}
-.ais-SearchBox-reset svg {
-  display: block;
-  margin: 6px;
-  width: 14px;
-  height: 14px;
-}
-
-.ais-SearchBox-input:valid ~ .ais-SearchBox-reset {
-  display: block;
-  -webkit-animation-name: sbx-reset-in;
-  animation-name: sbx-reset-in;
-  -webkit-animation-duration: 250ms;
-  animation-duration: 250ms;
-}
-
-@-webkit-keyframes sbx-reset-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes sbx-reset-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.ais-Highlight-highlighted {
-  color: #ffd399;
-  font-style: normal;
-}
-
-.ais-RefinementList-item {
-  color: rgba(255, 255, 255, 0.8);
-  margin-top: 6px;
-}
-.ais-RefinementList-item .ais-RefinementList-checkbox {
-  display: inline-block;
-  border-radius: 3.5px;
-  width: 16px;
-  height: 16px;
-  background: rgba(0, 0, 0, 0.3)
-    url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path fill='rgba(255, 255, 255, 0.2)' d='M1 4.88l2.378 2.435L9.046 1.6' stroke-width='1.6' stroke='%23FFF' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/></svg>")
-    no-repeat 50%/10px;
-  outline: none;
-  vertical-align: middle;
-  margin-right: 8px;
-  -webkit-transition: all 0.15s ease;
-  transition: all 0.15s ease;
-}
-.ais-RefinementList-item input[type='checkbox']:checked {
-  background: #40a9f3
-    url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.88l2.378 2.435L9.046 1.6' stroke-width='1.6' stroke='%23FFF' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/></svg>")
-    no-repeat 50%/10px;
-  border-color: #40a9f3;
-  box-shadow: none;
-}
-.ais-RefinementList-item:hover .ais-RefinementList-checkbox {
-  box-shadow: inset 0 0 0 1px rgba(108, 174, 221, 0.3);
-}
-
-.ais-RefinementList-label {
-  cursor: pointer;
-  font-weight: 300;
-}
-
-.ais-RefinementList-item--selected .ais-RefinementList-label {
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.ais-RefinementList-item--selected .ais-RefinementList-count {
-  font-weight: 600;
-  color: white;
-}
-
-.ais-RefinementList-item--selected .ais-RefinementList-count {
-  background-color: rgba(108, 174, 221, 1);
-}
-
-.ais-RefinementList-count {
-  border-radius: 2px;
-  background-color: rgba(0, 0, 0, 0.2);
-  float: right;
-  color: rgba(255, 255, 255, 0.2);
-  font-weight: 500;
-  font-size: 12px;
-  padding: 3px 10px;
-}
-
-.ais-RefinementList-showMore {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-  color: rgba(255, 255, 255, 0.8);
-
-  margin-top: 1rem;
-}
-
-.ais-RefinementList__showMoreDisabled[disabled],
-.ais-RefinementList__showMoreDisabled:disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.ais-ClearRefinements .ais-ClearRefinements-button {
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 4px;
-  border: none;
-  font-size: 12px;
-  color: #fff;
-  background: #40a9f3;
-}
-
-.ais-ClearRefinements-button:disabled[disabled],
-.ais-ClearRefinements-button:disabled:disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.ais-PoweredBy {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  float: right;
-  border-radius: 2px;
-  color: rgba(255, 255, 255, 0.8);
-  margin-top: 8px;
-  padding: 5px 7px;
-}
-
-.ais-PoweredBy-link {
-  padding: 0 5px;
-}
-
-.ais-PoweredBy-link svg {
-  height: 1.2em;
-  vertical-align: bottom;
-  fill: rgba(255, 255, 255, 0.8) !important;
-}
-
-.ais-PoweredBy-link svg path:nth-child(4) {
-  fill: rgba(255, 255, 255, 0.8) !important;
-}
-
-.ais-Pagination {
-  background-color: #24282a;
-  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-  width: auto;
-  margin: 0 auto;
-  box-sizing: border-box;
-  display: inline-block;
-  border-radius: 4px;
-  padding: 8px 16px;
-}
-
-.ais-Pagination-item {
-  transition: 0.3s ease all;
-  display: inline-block;
-  padding: 3px;
-  width: 28px;
-  border-radius: 4px;
-  text-align: center;
-  font-size: 14px;
-}
-.ais-Pagination-item:hover {
-  background: rgba(108, 174, 221, 0.2);
-}
-
-.ais-Pagination-item.ais-Pagination-item--selected.ais-Pagination-item--page:hover {
-  background: rgba(108, 174, 221, 1);
-}
-
-.ais-Pagination-item.ais-Pagination-item--selected.ais-Pagination-item--page:hover
-  .ais-Pagination-link.ais-Pagination__itemLinkSelected {
-  color: white;
-}
-
-.ais-Pagination__item:hover .ais-Pagination-link {
-  color: rgba(108, 174, 221, 1);
-}
-
-.ais-Pagination-item--selected {
-  color: #fff;
-  background: rgba(108, 174, 221, 1);
-}
-.ais-Pagination-item--selected .ais-Pagination-link {
-  color: currentColor;
-  font-weight: normal;
-}
-
-.ais-Pagination-item--disabled {
-  visibility: visible;
-  color: #bbbbbb;
-}
-.ais-Pagination-item--disabled[disabled],
-.ais-Pagination-item--disabled:disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.ais-Pagination-item--disabled:hover {
-  cursor: default;
-  text-decoration: none;
-}
-
-.ais-Pagination-link {
-  text-decoration: none;
-  color: rgba(255, 255, 255, 0.5);
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.ais-Stats {
-  display: inline-block;
-}
-
-[type='checkbox'],
-[type='radio'] {
-  -webkit-appearance: none;
-  outline-offset: -2px;
-}
diff --git a/packages/app/src/app/pages/Search/search.js b/packages/app/src/app/pages/Search/search.js
new file mode 100644
index 00000000000..67ddbaa0c82
--- /dev/null
+++ b/packages/app/src/app/pages/Search/search.js
@@ -0,0 +1,354 @@
+import { createGlobalStyle, css } from 'styled-components';
+
+const styles = css`
+  .ais-SearchBox-form {
+    position: relative;
+    margin-bottom: 24px;
+  }
+
+  .ais-RefinementList-searchBox .ais-SearchBox-input {
+    background: ${props => props.theme.background5};
+    width: 100%;
+  }
+
+  .ais-RefinementList-searchBox .ais-SearchBox-form .ais-SearchBox-submit {
+    height: 33px;
+  }
+
+  .ais-SearchBox-input {
+    transition: 0.3s ease border-color;
+    position: relative;
+    background: ${props => props.theme.background2};
+    border: 2px solid ${props => props.theme.background2};
+    border-radius: 4px;
+    outline: none;
+    color: white;
+    padding: 0.5em;
+    padding-left: 2em;
+    width: inherit;
+    box-sizing: border-box;
+    font-size: 1.125em;
+    font-weight: 500;
+    width: calc(100% - 170px);
+  }
+
+  .ais-SearchBox-input::placeholder {
+    display: flex;
+    align-items: center;
+    color: ${props => props.theme.placeholder};
+  }
+
+  .ais-SearchBox-input:focus {
+    border-color: rgba(108, 174, 221, 0.5);
+  }
+
+  .ais-SearchBox-form .ais-SearchBox-submit {
+    position: absolute;
+    height: 42px;
+    top: auto;
+    bottom: 0;
+    right: inherit;
+    left: 0;
+    margin: 0;
+    border: 0;
+    border-radius: 3px 0 0 3px;
+    background-color: rgba(255, 255, 255, 0);
+    padding: 0;
+    width: 32px;
+    vertical-align: middle;
+    text-align: center;
+    font-size: inherit;
+    user-select: none;
+    padding-left: 4px;
+    padding-bottom: 2px;
+
+    svg {
+      margin: 6px;
+      width: 14px;
+      height: 14px;
+      vertical-align: middle;
+      fill: rgba(255, 255, 255, 0.5);
+    }
+
+    &::before {
+      display: inline-block;
+      margin-right: -4px;
+      height: 100%;
+      vertical-align: middle;
+      content: '' 2;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  .ais-SearchBox-submit .ais-SearchBox-submit:hover,
+  .ais-SearchBox-submit:active {
+    cursor: pointer;
+  }
+
+  .ais-SearchBox-reset {
+    display: none;
+  }
+
+  .ais-Highlight-highlighted {
+    color: #ffd399;
+    font-style: normal;
+  }
+
+  .ais-RefinementList-item {
+    color: rgba(255, 255, 255, 0.8);
+    margin-top: 6px;
+
+    .ais-RefinementList-checkbox {
+      display: inline-block;
+      border-radius: 3.5px;
+      width: 16px;
+      height: 16px;
+      background: rgba(0, 0, 0, 0.3);
+      outline: none;
+      vertical-align: middle;
+      margin-right: 8px;
+      transition: all 0.15s ease;
+    }
+  }
+
+  .ais-RefinementList-item input[type='checkbox']:checked {
+    background-color: ${props => props.theme.secondary};
+    background-image: url("data:image/svg+xml,%0A%3Csvg width='11px' height='8px' viewBox='0 0 11 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.200000003' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='SVG-Layer' transform='translate(1.500000, 0.500000)' fill='%23FFFFFF' stroke='%231C2022' stroke-width='1.6'%3E%3Cpolyline id='Path' points='0 3.88 2.378 6.315 8.046 0.6'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+    background-position: 50% 4px;
+    background-repeat: no-repeat;
+    border-color: ${props => props.theme.secondary};
+    box-shadow: none;
+  }
+
+  .ais-RefinementList-item:hover .ais-RefinementList-checkbox {
+    box-shadow: inset 0 0 0 1px rgba(108, 174, 221, 0.3);
+  }
+
+  .ais-RefinementList-label {
+    cursor: pointer;
+    font-weight: 300;
+  }
+
+  .ais-RefinementList-item--selected .ais-RefinementList-label {
+    cursor: pointer;
+    font-weight: 500;
+  }
+
+  .ais-RefinementList-item--selected .ais-RefinementList-count {
+    font-weight: 600;
+    color: white;
+  }
+
+  .ais-RefinementList-item--selected .ais-RefinementList-count {
+    background-color: ${props => props.theme.secondary};
+  }
+
+  .ais-RefinementList-count {
+    border-radius: 2px;
+    background-color: rgba(0, 0, 0, 0.2);
+    float: right;
+    color: rgba(255, 255, 255, 0.2);
+    font-weight: 500;
+    font-size: 12px;
+    padding: 3px 10px;
+  }
+
+  .ais-RefinementList-showMore {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    color: rgba(255, 255, 255, 0.8);
+    margin-top: 1rem;
+    font-weight: normal;
+  }
+
+  .ais-RefinementList__showMoreDisabled[disabled],
+  .ais-RefinementList__showMoreDisabled:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .ais-ClearRefinements .ais-ClearRefinements-button {
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 4px;
+    border: none;
+    font-size: 12px;
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    color: white;
+    background: ${props => props.theme.secondary};
+
+    &:disabled[disabled],
+    &:disabled:disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  .ais-PoweredBy {
+    padding: 0;
+    display: flex;
+    float: right;
+    border-radius: 2px;
+    color: rgba(255, 255, 255, 0.8);
+    margin-top: 8px;
+    padding: 5px 7px;
+    padding-right: 0;
+    margin-right: -4px;
+
+    .ais-PoweredBy-link {
+      padding: 0 5px;
+      svg {
+        height: 1.2em;
+        vertical-align: bottom;
+        fill: rgba(255, 255, 255, 0.8) !important;
+
+        path:nth-child(4) {
+          fill: rgba(255, 255, 255, 0.8) !important;
+        }
+      }
+    }
+  }
+
+  .ais-Pagination {
+    width: auto;
+    margin: 0 auto;
+    box-sizing: border-box;
+    display: inline-block;
+    border-radius: 4px;
+    padding: 8px 16px;
+
+    .ais-Pagination-item {
+      transition: 0.3s ease all;
+      display: inline-block;
+      padding: 3px;
+      width: 28px;
+      border-radius: 4px;
+      text-align: center;
+      font-size: 14px;
+      font-weight: bold;
+    }
+
+    .ais-Pagination-item:hover {
+      background: rgba(108, 174, 221, 0.2);
+    }
+
+    .ais-Pagination-item.ais-Pagination-item--selected.ais-Pagination-item--page:hover {
+      background: ${props => props.theme.secondary};
+    }
+
+    .ais-Pagination-item.ais-Pagination-item--selected.ais-Pagination-item--page:hover
+      .ais-Pagination-link.ais-Pagination__itemLinkSelected {
+      color: white;
+    }
+
+    .ais-Pagination__item:hover .ais-Pagination-link {
+      color: ${props => props.theme.secondary};
+    }
+
+    .ais-Pagination-item--selected {
+      color: ${props => props.theme.white};
+      background: ${props => props.theme.secondary};
+    }
+
+    .ais-Pagination-item--selected .ais-Pagination-link {
+      color: currentColor;
+    }
+
+    .ais-Pagination-item--disabled {
+      visibility: visible;
+      color: #bbbbbb;
+    }
+
+    .ais-Pagination-item--disabled[disabled],
+    .ais-Pagination-item--disabled:disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .ais-Pagination-item--disabled:hover {
+      cursor: default;
+      text-decoration: none;
+    }
+
+    .ais-Pagination-link {
+      text-decoration: none;
+      color: rgba(255, 255, 255, 0.5);
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .ais-Stats {
+    display: inline-block;
+
+    .ais-Stats-text {
+      color: ${props => props.theme.placeholder};
+    }
+  }
+
+  [type='checkbox'],
+  [type='radio'] {
+    appearance: none;
+    outline-offset: -2px;
+  }
+
+  .ais-SortBy-select {
+    transition: 0.3s ease border-color;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNC45NSAxMCI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xLjQxIDQuNjdsMS4wNy0xLjQ5IDEuMDYgMS40OUgxLjQxek0zLjU0IDUuMzNMMi40OCA2LjgyIDEuNDEgNS4zM2gyLjEzeiI+PC9wYXRoPjwvc3ZnPg==);
+    background-color: rgba(0, 0, 0, 0.3);
+    background-position: right;
+    background-repeat: no-repeat;
+    width: 100%;
+    color: white;
+    border: none;
+    outline: none;
+    border-radius: 4px;
+    padding: 0.2em 1em 0.2em 0.2em;
+    box-sizing: border-box;
+    font-weight: 400;
+    height: 1.75em;
+    appearance: none;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  .ais-Hits .ais-Hits-list {
+    display: grid;
+    grid-gap: 2rem;
+    grid-template-columns: 1fr 1fr 1fr;
+    margin-top: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+
+    @media screen and (max-width: 1100px) {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    @media screen and (max-width: 900px) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media screen and (min-width: 1100px) {
+    .ais-Hits-item {
+      > div {
+        > img {
+          height: 147px !important;
+        }
+      }
+    }
+  }
+`;
+
+export default createGlobalStyle`
+  body {
+    ${styles}
+  }
+`;
diff --git a/packages/app/src/sandbox/eval/tests/jest-lite.ts b/packages/app/src/sandbox/eval/tests/jest-lite.ts
index 8b85f3b750d..7c3849d2f34 100644
--- a/packages/app/src/sandbox/eval/tests/jest-lite.ts
+++ b/packages/app/src/sandbox/eval/tests/jest-lite.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { dispatch, actions, listen } from 'codesandbox-api';
 import { react, reactTs } from '@codesandbox/common/lib/templates';
 import expect from 'jest-matchers';
diff --git a/packages/app/src/sandbox/eval/transpilers/angular2-template/index.ts b/packages/app/src/sandbox/eval/transpilers/angular2-template/index.ts
index d87c354269e..3c10a60f5f9 100644
--- a/packages/app/src/sandbox/eval/transpilers/angular2-template/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/angular2-template/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Transpiler from '../';
 import { LoaderContext } from '../../transpiled-module';
 
diff --git a/packages/app/src/sandbox/eval/transpilers/babel/index.ts b/packages/app/src/sandbox/eval/transpilers/babel/index.ts
index 3966f42a1dd..f6eea83c28d 100644
--- a/packages/app/src/sandbox/eval/transpilers/babel/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/babel/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 // @ts-ignore
 import BabelWorker from 'worker-loader?publicPath=/&name=babel-transpiler.[hash:8].worker.js!./worker/index.js';
 import { isBabel7 } from '@codesandbox/common/lib/utils/is-babel-7';
diff --git a/packages/app/src/sandbox/eval/transpilers/base64/index.ts b/packages/app/src/sandbox/eval/transpilers/base64/index.ts
index fd1e9a4d215..b48242e1275 100644
--- a/packages/app/src/sandbox/eval/transpilers/base64/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/base64/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Transpiler, { TranspilerResult } from '../';
 
 import mimes from './mimes.json';
diff --git a/packages/app/src/sandbox/eval/transpilers/binary/index.ts b/packages/app/src/sandbox/eval/transpilers/binary/index.ts
index 828acbde265..b4076a76f3d 100644
--- a/packages/app/src/sandbox/eval/transpilers/binary/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/binary/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Transpiler, { TranspilerResult } from '../';
 import { LoaderContext } from '../../transpiled-module';
 
diff --git a/packages/app/src/sandbox/eval/transpilers/json/index.ts b/packages/app/src/sandbox/eval/transpilers/json/index.ts
index b49c1ac0834..602d277e9ee 100644
--- a/packages/app/src/sandbox/eval/transpilers/json/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/json/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Transpiler from '../';
 
 class JSONTranspiler extends Transpiler {
diff --git a/packages/app/src/sandbox/eval/transpilers/noop/index.ts b/packages/app/src/sandbox/eval/transpilers/noop/index.ts
index 36797bf349a..bc12725d6a8 100644
--- a/packages/app/src/sandbox/eval/transpilers/noop/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/noop/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Transpiler from '../';
 
 class NoopTranspiler extends Transpiler {
diff --git a/packages/app/src/sandbox/eval/transpilers/raw/index.ts b/packages/app/src/sandbox/eval/transpilers/raw/index.ts
index 47089121c5a..661a64cdd8a 100644
--- a/packages/app/src/sandbox/eval/transpilers/raw/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/raw/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Transpiler from '../';
 
 class RawTranspiler extends Transpiler {
diff --git a/packages/app/src/sandbox/eval/transpilers/reason/index.ts b/packages/app/src/sandbox/eval/transpilers/reason/index.ts
index 0a22aa93859..036cbaee577 100644
--- a/packages/app/src/sandbox/eval/transpilers/reason/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/reason/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 
 import { basename, dirname, join } from 'path';
 import stripANSI from 'strip-ansi';
diff --git a/packages/app/src/sandbox/eval/transpilers/style/index.ts b/packages/app/src/sandbox/eval/transpilers/style/index.ts
index 3edc18cf731..482d5b7de03 100644
--- a/packages/app/src/sandbox/eval/transpilers/style/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/style/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import { dispatch } from 'codesandbox-api';
 import Transpiler from '../';
 import { LoaderContext } from '../../transpiled-module';
diff --git a/packages/app/src/sandbox/eval/transpilers/svgr/index.ts b/packages/app/src/sandbox/eval/transpilers/svgr/index.ts
index 8ed36ca595d..89db6ee4e34 100644
--- a/packages/app/src/sandbox/eval/transpilers/svgr/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/svgr/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Transpiler from '../';
 import { LoaderContext } from '../../../eval/transpiled-module';
 
diff --git a/packages/app/src/sandbox/eval/transpilers/vue/css-loader/index.ts b/packages/app/src/sandbox/eval/transpilers/vue/css-loader/index.ts
index a80538bdba9..69399051053 100644
--- a/packages/app/src/sandbox/eval/transpilers/vue/css-loader/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/vue/css-loader/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Transpiler from '../../';
 import { LoaderContext } from '../../../transpiled-module';
 
diff --git a/packages/app/src/sandbox/eval/transpilers/vue/index.ts b/packages/app/src/sandbox/eval/transpilers/vue/index.ts
index aa853bad688..f791d25ac9d 100644
--- a/packages/app/src/sandbox/eval/transpilers/vue/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/vue/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Transpiler from '../';
 import { LoaderContext } from '../../transpiled-module';
 
diff --git a/packages/app/src/sandbox/eval/transpilers/vue/selector/index.ts b/packages/app/src/sandbox/eval/transpilers/vue/selector/index.ts
index c62c09175c7..1989739c196 100644
--- a/packages/app/src/sandbox/eval/transpilers/vue/selector/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/vue/selector/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Transpiler from '../../';
 import { LoaderContext } from '../../../transpiled-module';
 
diff --git a/packages/app/src/sandbox/eval/transpilers/vue/style-compiler/index.ts b/packages/app/src/sandbox/eval/transpilers/vue/style-compiler/index.ts
index 4fd74a89269..9871dd0a244 100644
--- a/packages/app/src/sandbox/eval/transpilers/vue/style-compiler/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/vue/style-compiler/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Transpiler from '../../';
 import { LoaderContext } from '../../../transpiled-module';
 
diff --git a/packages/app/src/sandbox/eval/transpilers/vue/style-loader/index.ts b/packages/app/src/sandbox/eval/transpilers/vue/style-loader/index.ts
index 1230370a225..31d3b4dee46 100644
--- a/packages/app/src/sandbox/eval/transpilers/vue/style-loader/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/vue/style-loader/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Transpiler from '../../';
 import { LoaderContext } from '../../../transpiled-module';
 
diff --git a/packages/app/src/sandbox/eval/transpilers/vue/template-compiler/index.ts b/packages/app/src/sandbox/eval/transpilers/vue/template-compiler/index.ts
index a378279bfd4..451745acf31 100644
--- a/packages/app/src/sandbox/eval/transpilers/vue/template-compiler/index.ts
+++ b/packages/app/src/sandbox/eval/transpilers/vue/template-compiler/index.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Transpiler from '../../';
 import { LoaderContext } from '../../../transpiled-module';
 
diff --git a/packages/common/src/__snapshots__/theme.test.js.snap b/packages/common/src/__snapshots__/theme.test.js.snap
index 42b611f22e4..c99dbd528f7 100644
--- a/packages/common/src/__snapshots__/theme.test.js.snap
+++ b/packages/common/src/__snapshots__/theme.test.js.snap
@@ -22,6 +22,7 @@ Object {
     "description": [Function],
     "title": [Function],
   },
+  "placeholder": [Function],
   "primary": [Function],
   "primaryText": [Function],
   "red": [Function],
diff --git a/packages/common/src/components/Preview/index.tsx b/packages/common/src/components/Preview/index.tsx
index b46d1cea166..d4883720134 100644
--- a/packages/common/src/components/Preview/index.tsx
+++ b/packages/common/src/components/Preview/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import * as React from 'react';
 import {
   Sandbox,
diff --git a/packages/common/src/components/WideSandbox/elements.ts b/packages/common/src/components/WideSandbox/elements.ts
index 9f2dc5e9557..d453f5161bb 100644
--- a/packages/common/src/components/WideSandbox/elements.ts
+++ b/packages/common/src/components/WideSandbox/elements.ts
@@ -92,13 +92,17 @@ export const SandboxImage = styled.img`
   border-image-width: 0;
 `;
 
-export const SandboxInfo = styled.div`
+export const SandboxInfo = styled.div<{ noHeight?: boolean }>`
   left: -1px;
   right: -1px;
   padding: 0.75rem;
   min-height: 90px;
   z-index: 1;
   height: 130px;
+
+    ${props => props.noHeight && css`
+    height: auto;
+  `}:
 `;
 
 export const TemplateIcon = styled.div`
diff --git a/packages/common/src/components/WideSandbox/index.tsx b/packages/common/src/components/WideSandbox/index.tsx
index 0cdcc6db1d7..33db9ea14d9 100644
--- a/packages/common/src/components/WideSandbox/index.tsx
+++ b/packages/common/src/components/WideSandbox/index.tsx
@@ -32,9 +32,10 @@ export type Props = {
     };
   };
   small?: boolean;
+  noHeight?: boolean;
   defaultHeight?: number;
   noMargin?: boolean;
-  pickSandbox: (
+  selectSandbox: (
     params: {
       id: string;
       title: string;
@@ -66,7 +67,7 @@ export default class WideSandbox extends React.PureComponent<Props> {
   };
 
   toggleOpen = () => {
-    this.props.pickSandbox({
+    this.props.selectSandbox({
       id: this.props.sandbox.id,
       title: this.getTitle(),
       description: this.getDescription(),
@@ -81,7 +82,13 @@ export default class WideSandbox extends React.PureComponent<Props> {
   };
 
   render() {
-    const { sandbox, small, noMargin, defaultHeight = 245 } = this.props;
+    const {
+      sandbox,
+      small,
+      noMargin,
+      noHeight,
+      defaultHeight = 245,
+    } = this.props;
 
     if (!sandbox) {
       return (
@@ -118,7 +125,7 @@ export default class WideSandbox extends React.PureComponent<Props> {
             this.setState({ imageLoaded: true });
           }}
         />
-        <SandboxInfo>
+        <SandboxInfo noHeight={noHeight}>
           <SandboxTitle color={template.color()}>
             {this.getTitle()}
           </SandboxTitle>
diff --git a/packages/common/src/templates/configuration/prettierRC/ui.tsx b/packages/common/src/templates/configuration/prettierRC/ui.tsx
index 99694572aae..ec9d0327a44 100644
--- a/packages/common/src/templates/configuration/prettierRC/ui.tsx
+++ b/packages/common/src/templates/configuration/prettierRC/ui.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import * as React from 'react';
 
 import {
diff --git a/packages/common/src/templates/configuration/sandbox/ui.tsx b/packages/common/src/templates/configuration/sandbox/ui.tsx
index 63322f8819c..76d91c6c4f6 100644
--- a/packages/common/src/templates/configuration/sandbox/ui.tsx
+++ b/packages/common/src/templates/configuration/sandbox/ui.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import * as React from 'react';
 import sortBy from 'lodash/sortBy';
 
diff --git a/packages/common/src/templates/vuepress.ts b/packages/common/src/templates/vuepress.ts
index 0e6aad734d8..e5e85e17241 100644
--- a/packages/common/src/templates/vuepress.ts
+++ b/packages/common/src/templates/vuepress.ts
@@ -1,4 +1,4 @@
-// @flow
+
 import Template from './template';
 import { decorateSelector } from '../theme';
 
diff --git a/packages/common/src/theme.ts b/packages/common/src/theme.ts
index 17c6c3db695..bc9220a3e31 100644
--- a/packages/common/src/theme.ts
+++ b/packages/common/src/theme.ts
@@ -30,7 +30,7 @@ const colorMethods = [
  */
 const addModifier = (fn, method, ...modifierArgs) => (...args) =>
   Color(fn(...args))
-    [method](...modifierArgs)
+  [method](...modifierArgs)
     .rgbString();
 /**
  * Add useful methods directly to selector function, as well as put an rgbString() call at the end
@@ -79,6 +79,7 @@ const theme = {
     red: '#F27777',
     dangerBackground: '#DC3545',
     sidebar: '#191d1f',
+    placeholder: "#B8B9BA"
   }),
   vscodeTheme: codesandbox,
 
diff --git a/packages/dynamic-pages/pages/profile/index.js b/packages/dynamic-pages/pages/profile/index.js
index 809da736856..e02f3ae5b30 100644
--- a/packages/dynamic-pages/pages/profile/index.js
+++ b/packages/dynamic-pages/pages/profile/index.js
@@ -55,7 +55,7 @@ const Profile = ({ profile, liked, showcased }) =>
                 noMargin
                 small
                 key={sandbox.id}
-                pickSandbox={({ id }) => openSandbox(id)}
+                selectSandbox={({ id }) => openSandbox(id)}
                 sandbox={sandbox}
               />
             ))}
@@ -86,7 +86,7 @@ const Profile = ({ profile, liked, showcased }) =>
                   defaultHeight={170}
                   small
                   key={sandbox.id}
-                  pickSandbox={({ id }) => openSandbox(id)}
+                  selectSandbox={({ id }) => openSandbox(id)}
                   sandbox={sandbox}
                 />
               ))}
diff --git a/packages/dynamic-pages/pages/user-sandboxes/index.js b/packages/dynamic-pages/pages/user-sandboxes/index.js
index eaf1bfa1f2b..ecc1ce0e8cd 100644
--- a/packages/dynamic-pages/pages/user-sandboxes/index.js
+++ b/packages/dynamic-pages/pages/user-sandboxes/index.js
@@ -105,7 +105,7 @@ const Sandboxes = ({ data, fetchUrl, profile, currentTab }) => {
               <WideSandbox
                 small
                 key={sandbox.id}
-                pickSandbox={({ id }) => openSandbox(id)}
+                selectSandbox={({ id }) => openSandbox(id)}
                 sandbox={sandbox}
               />
             ))}
diff --git a/packages/homepage/src/pages/explore.js b/packages/homepage/src/pages/explore.js
index dca31a524c4..0c10a55ee13 100644
--- a/packages/homepage/src/pages/explore.js
+++ b/packages/homepage/src/pages/explore.js
@@ -242,7 +242,7 @@ export default class Explore extends React.PureComponent {
                       // We force i here so we reuse the existing components
                       // eslint-disable-next-line react/no-array-index-key,no-console
                       key={i}
-                      pickSandbox={this.selectSandbox}
+                      selectSandbox={this.selectSandbox}
                       sandbox={sandbox}
                     />
                   ))
diff --git a/packages/homepage/src/pages/react-hooks.js b/packages/homepage/src/pages/react-hooks.js
index df080ea5e8d..37b0052e2c5 100644
--- a/packages/homepage/src/pages/react-hooks.js
+++ b/packages/homepage/src/pages/react-hooks.js
@@ -114,7 +114,7 @@ export default class extends React.PureComponent {
               {sandboxes.map(sandbox => (
                 <WideSandbox
                   key={sandbox.id}
-                  pickSandbox={this.selectSandbox}
+                  selectSandbox={this.selectSandbox}
                   sandbox={sandbox}
                 />
               ))}
diff --git a/yarn.lock b/yarn.lock
index 2134d161960..6f589f481ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -24243,6 +24243,11 @@ typescript@3.3.4000:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.4000.tgz#76b0f89cfdbf97827e1112d64f283f1151d6adf0"
   integrity sha512-jjOcCZvpkl2+z7JFn0yBOoLQyLoIkNZAs/fYJkUG6VKy6zLPHJGfQJYFHzibB6GJaF/8QrcECtlQ5cpvRHSMEA==
 
+typescript@^3.3.4000:
+  version "3.3.4000"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.4000.tgz#76b0f89cfdbf97827e1112d64f283f1151d6adf0"
+  integrity sha512-jjOcCZvpkl2+z7JFn0yBOoLQyLoIkNZAs/fYJkUG6VKy6zLPHJGfQJYFHzibB6GJaF/8QrcECtlQ5cpvRHSMEA==
+
 typography-breakpoint-constants@^0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/typography-breakpoint-constants/-/typography-breakpoint-constants-0.15.10.tgz#bd5308dd57250e7f28a8c6e1c0e668ddf1178c5c"