diff --git a/packages/website/md/new-docs/usage.mdx b/packages/website/md/new-docs/usage.mdx
index 4f117024c0..9178eb4484 100644
--- a/packages/website/md/new-docs/usage.mdx
+++ b/packages/website/md/new-docs/usage.mdx
@@ -1,12 +1,7 @@
 export const meta = {
-    title: 'Sol-coverage Usage',
+    title: 'Sol-compiler Usage',
 };
 
-export const codeSample = `import { TruffleArtifactAdapter } from '@0x/sol-coverage';
-const projectRoot = '.';
-const solcVersion = '0.5.0';
-const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`;
-
 Sol-coverage uses transaction traces in order to figure out which lines of Solidity source code have been covered by your tests. In order for it to gather these traces, you must add the `CoverageSubprovider` to the [ProviderEngine](https://github.com/MetaMask/provider-engine) instance you use when running your Solidity tests. If you're unfamiliar with `ProviderEngine`, please read the [Web3 Provider explained](https://0x.org/wiki#Web3-Provider-Explained) wiki article.
 
 The CoverageSubprovider eavesdrops on the `eth_sendTransaction` and `eth_call` RPC calls and collects traces after each call using `debug_traceTransaction`. `eth_call`'s' don't generate traces - so we take a snapshot, re-submit it as a transaction, get the trace and then revert the snapshot.
diff --git a/packages/website/package.json b/packages/website/package.json
index de5a3dcbeb..2caa2e6f27 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -86,7 +86,7 @@
         "react-router-dom": "^5.0.1",
         "react-scroll": "https://github.com/0xProject/react-scroll.git#d2afc2729dc09980e4113d8c38a1b012ba180d81",
         "react-scrollable-anchor": "^0.6.1",
-        "react-syntax-highlighter": "^10.1.1",
+        "react-syntax-highlighter": "^11.0.1",
         "react-tabs": "^3.0.0",
         "react-tooltip": "^3.2.7",
         "react-transition-group": "^4.2.1",
diff --git a/packages/website/ts/components/docs/search/autocomplete.tsx b/packages/website/ts/components/docs/search/autocomplete.tsx
index 122211f557..ca2bf5cb5d 100644
--- a/packages/website/ts/components/docs/search/autocomplete.tsx
+++ b/packages/website/ts/components/docs/search/autocomplete.tsx
@@ -67,7 +67,7 @@ export class CustomAutoComplete extends React.Component<AutoCompleteProps, AutoC
         const { value } = this.state;
 
         const inputProps = {
-            placeholder: 'Search docs...',
+            placeholder: 'Search docs',
             onChange: this._onChange.bind(this),
             value,
         };
diff --git a/packages/website/ts/components/docs/search_input.tsx b/packages/website/ts/components/docs/search_input.tsx
index 8cd8339f20..18770a2b28 100644
--- a/packages/website/ts/components/docs/search_input.tsx
+++ b/packages/website/ts/components/docs/search_input.tsx
@@ -63,7 +63,7 @@ const LabelText = styled.span`
 `;
 
 const Input = styled.input.attrs({
-    placeholder: 'Search docs...',
+    placeholder: 'Search docs',
 })<ISearchInputProps>`
     background: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h24v24H0z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 10.5a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0zM10.5 3a7.5 7.5 0 1 0 4.55 13.463l4.743 4.744 1.414-1.414-4.744-4.744A7.5 7.5 0 0 0 10.5 3z' fill='%235C5C5C'/%3E%3C/svg%3E")
         transparent left center no-repeat;
diff --git a/packages/website/ts/pages/docs/view.tsx b/packages/website/ts/pages/docs/view.tsx
index a4e0deed5a..eaf56100d3 100644
--- a/packages/website/ts/pages/docs/view.tsx
+++ b/packages/website/ts/pages/docs/view.tsx
@@ -2,6 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { match } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { utils } from '@0x/react-shared';
+import _ from 'lodash';
+
 import { MDXProvider } from '@mdx-js/react';
 
 import CircularProgress from 'material-ui/CircularProgress';
@@ -24,6 +27,8 @@ import { Heading, Paragraph } from 'ts/components/text';
 
 import { documentConstants } from 'ts/utils/document_meta_constants';
 
+import { colors } from 'ts/style/colors';
+
 interface IDocsViewProps {
     history: History;
     location: Location;
@@ -40,33 +45,28 @@ interface IDocsViewState {
     Component: React.ReactNode;
 }
 
-const Loader = () => <CircularProgress size={80} thickness={5} />;
-
 export const DocsView: React.FC<IDocsViewProps> = props => {
+    const { page } = props.match.params;
+
     const [state, setState] = useState<IDocsViewState>({
-        title: 'Loading...',
-        Component: Loader,
+        title: _.capitalize(utils.convertDashesToSpaces(page)),
+        Component: null,
     });
 
     const { title, Component } = state;
-    const { page } = props.match.params;
-
-    console.log('props', props);
 
     useEffect(() => {
-        // tslint:disable-next-line: no-console
-        console.log(page);
         void loadPageAsync(page);
     }, [page]);
 
     const loadPageAsync = async (fileName: string) => {
         const component = await import(`../../../md/new-docs/${fileName}.mdx`);
-        if (component) {
-            setState({
-                title: component.meta.title,
-                Component: component.default,
-            });
-        }
+        // if (component) {
+        //     setState({
+        //         title: component.meta.title,
+        //         Component: component.default,
+        //     });
+        // }
         // @TODO: add error handling, loading
     };
 
@@ -75,25 +75,38 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
             <DocumentTitle {...documentConstants.DOCS} />
             <Hero isHome={false} title={title} />
             <Section maxWidth="1030px" isPadded={false} padding="0 0">
-                <Columns>
-                    <aside>
-                        <h3>Sidebar</h3>
-                    </aside>
-                    <ContentWrapper>
-                        <MDXProvider components={mdxComponents}>
-                            {/*
+                {Component ? (
+                    <Columns>
+                        <aside>
+                            <h3>Sidebar</h3>
+                        </aside>
+                        <ContentWrapper>
+                            <MDXProvider components={mdxComponents}>
+                                {/*
                                 // @ts-ignore */}
-                            <Component />
-                        </MDXProvider>
-                        {/* <HelpCallout />
+                                <Component />
+                            </MDXProvider>
+                            {/* <HelpCallout />
                         <HelpfulCta /> */}
-                    </ContentWrapper>
-                </Columns>
+                        </ContentWrapper>
+                    </Columns>
+                ) : (
+                    <LoaderWrapper>
+                        <CircularProgress size={80} thickness={5} color={colors.brandDark} />
+                    </LoaderWrapper>
+                )}
             </Section>
         </SiteWrap>
     );
 };
 
+const LoaderWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+`;
+
 const Columns = styled.div`
     display: grid;
     grid-template-columns: 230px 1fr;
diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts
index 5d2cd93b47..29cd77a588 100644
--- a/packages/website/ts/style/colors.ts
+++ b/packages/website/ts/style/colors.ts
@@ -30,4 +30,3 @@ export const colors = {
     ...sharedColors,
     ...appColors,
 };
-console.log('sharedColors', sharedColors);