diff --git a/packages/website/ts/components/docs/hero.tsx b/packages/website/ts/components/docs/hero.tsx
index 3868223cef..1447888566 100644
--- a/packages/website/ts/components/docs/hero.tsx
+++ b/packages/website/ts/components/docs/hero.tsx
@@ -8,28 +8,18 @@ import { colors } from 'ts/style/colors';
 interface IHeroProps {
     isHome?: boolean;
     title?: string;
-    description?: string;
+    subtitle?: string;
 }
 
-export const Hero: React.FC<IHeroProps> = ({ description, isHome, title }) => {
-    return (
-        <HeroWrapper isHome={isHome}>
-            <Heading
-                size={isHome ? 'large' : 'medium'}
-                isCentered={true}
-                marginBottom={isHome || description ? '30px' : '0'}
-            >
-                {title}
-            </Heading>
-            {description && <Paragraph isCentered={true}>{description}</Paragraph>}
-            {isHome && <SearchInput isHome={true} />}
-        </HeroWrapper>
-    );
-};
-
-Hero.defaultProps = {
-    isHome: false,
-};
+export const Hero: React.FC<IHeroProps> = ({ isHome = false, subtitle, title }) => (
+    <HeroWrapper isHome={isHome}>
+        <Heading size={isHome ? 'large' : 'medium'} isCentered={true} marginBottom={isHome || subtitle ? '30px' : '0'}>
+            {title}
+        </Heading>
+        {subtitle && <Paragraph isCentered={true}>{subtitle}</Paragraph>}
+        {isHome && <SearchInput isHome={true} />}
+    </HeroWrapper>
+);
 
 const HeroWrapper = styled.div<{ isHome: boolean }>`
     background-color: ${colors.backgroundLight};
diff --git a/packages/website/ts/components/docs/layout/docs_page_layout.tsx b/packages/website/ts/components/docs/layout/docs_page_layout.tsx
new file mode 100644
index 0000000000..3f64b4f9b0
--- /dev/null
+++ b/packages/website/ts/components/docs/layout/docs_page_layout.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import CircularProgress from 'material-ui/CircularProgress';
+
+import { Hero } from 'ts/components/docs/hero';
+import { SiteWrap } from 'ts/components/docs/siteWrap';
+import { DocumentTitle } from 'ts/components/document_title';
+import { Section } from 'ts/components/newLayout';
+
+import { documentConstants } from 'ts/utils/document_meta_constants';
+
+import { colors } from 'ts/style/colors';
+
+interface IDocsPageLayoutProps {
+    children: React.ReactNode;
+    title: string;
+    subtitle?: string;
+    loading?: boolean;
+    isHome?: boolean;
+}
+
+export const DocsPageLayout: React.FC<IDocsPageLayoutProps> = props => {
+    return (
+        <SiteWrap theme="light">
+            <DocumentTitle {...documentConstants.DOCS} />
+            <Hero title={props.title} subtitle={props.subtitle} isHome={props.isHome} />
+            <Section maxWidth="1150px" isPadded={false} overflow="visible">
+                {props.loading ? (
+                    <LoaderWrapper>
+                        <CircularProgress size={40} thickness={2} color={colors.brandLight} />
+                    </LoaderWrapper>
+                ) : (
+                    props.children
+                )}
+            </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: 130px 0 1fr;
+//     grid-column-gap: 60px;
+
+//     @media (min-width: 1440px) {
+//         grid-template-columns: 230px 0 1fr;
+//     }
+
+//     @media (max-width: 900px) {
+//         grid-template-columns: 1fr;
+//     }
+// `;
diff --git a/packages/website/ts/components/docs/code.tsx b/packages/website/ts/components/docs/mdx/code.tsx
similarity index 98%
rename from packages/website/ts/components/docs/code.tsx
rename to packages/website/ts/components/docs/mdx/code.tsx
index ac4aebf42e..57984e06fb 100644
--- a/packages/website/ts/components/docs/code.tsx
+++ b/packages/website/ts/components/docs/mdx/code.tsx
@@ -3,7 +3,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
 import { Button } from 'ts/components/button';
-import { CodeRun } from 'ts/components/docs/code_run';
+import { CodeRun } from 'ts/components/docs/mdx/code_run';
 
 import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
diff --git a/packages/website/ts/components/docs/code_run.tsx b/packages/website/ts/components/docs/mdx/code_run.tsx
similarity index 100%
rename from packages/website/ts/components/docs/code_run.tsx
rename to packages/website/ts/components/docs/mdx/code_run.tsx
diff --git a/packages/website/ts/components/docs/code_tabs.tsx b/packages/website/ts/components/docs/mdx/code_tabs.tsx
similarity index 100%
rename from packages/website/ts/components/docs/code_tabs.tsx
rename to packages/website/ts/components/docs/mdx/code_tabs.tsx
diff --git a/packages/website/ts/components/docs/headings.tsx b/packages/website/ts/components/docs/mdx/headings.tsx
similarity index 100%
rename from packages/website/ts/components/docs/headings.tsx
rename to packages/website/ts/components/docs/mdx/headings.tsx
diff --git a/packages/website/ts/components/docs/help_callout.tsx b/packages/website/ts/components/docs/mdx/help_callout.tsx
similarity index 100%
rename from packages/website/ts/components/docs/help_callout.tsx
rename to packages/website/ts/components/docs/mdx/help_callout.tsx
diff --git a/packages/website/ts/components/docs/helpful_cta.tsx b/packages/website/ts/components/docs/mdx/helpful_cta.tsx
similarity index 100%
rename from packages/website/ts/components/docs/helpful_cta.tsx
rename to packages/website/ts/components/docs/mdx/helpful_cta.tsx
diff --git a/packages/website/ts/components/docs/inline_code.tsx b/packages/website/ts/components/docs/mdx/inline_code.tsx
similarity index 100%
rename from packages/website/ts/components/docs/inline_code.tsx
rename to packages/website/ts/components/docs/mdx/inline_code.tsx
diff --git a/packages/website/ts/components/docs/inline_link.tsx b/packages/website/ts/components/docs/mdx/inline_link.tsx
similarity index 100%
rename from packages/website/ts/components/docs/inline_link.tsx
rename to packages/website/ts/components/docs/mdx/inline_link.tsx
diff --git a/packages/website/ts/components/docs/notification.tsx b/packages/website/ts/components/docs/mdx/notification.tsx
similarity index 100%
rename from packages/website/ts/components/docs/notification.tsx
rename to packages/website/ts/components/docs/mdx/notification.tsx
diff --git a/packages/website/ts/components/docs/ordered_list.tsx b/packages/website/ts/components/docs/mdx/ordered_list.tsx
similarity index 100%
rename from packages/website/ts/components/docs/ordered_list.tsx
rename to packages/website/ts/components/docs/mdx/ordered_list.tsx
diff --git a/packages/website/ts/components/docs/table.tsx b/packages/website/ts/components/docs/mdx/table.tsx
similarity index 100%
rename from packages/website/ts/components/docs/table.tsx
rename to packages/website/ts/components/docs/mdx/table.tsx
diff --git a/packages/website/ts/components/docs/unordered_list.tsx b/packages/website/ts/components/docs/mdx/unordered_list.tsx
similarity index 100%
rename from packages/website/ts/components/docs/unordered_list.tsx
rename to packages/website/ts/components/docs/mdx/unordered_list.tsx
diff --git a/packages/website/ts/pages/docs/guides.tsx b/packages/website/ts/pages/docs/guides.tsx
index d395f09779..54d20e767f 100644
--- a/packages/website/ts/pages/docs/guides.tsx
+++ b/packages/website/ts/pages/docs/guides.tsx
@@ -1,14 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Hero } from 'ts/components/docs/hero';
+import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
 import { Resource } from 'ts/components/docs/resource/resource';
 import { Filters } from 'ts/components/docs/sidebar/filters';
-import { SiteWrap } from 'ts/components/docs/siteWrap';
-import { DocumentTitle } from 'ts/components/document_title';
-import { Section } from 'ts/components/newLayout';
-
-import { documentConstants } from 'ts/utils/document_meta_constants';
 
 import { Hits, InstantSearch } from 'react-instantsearch-dom';
 
@@ -17,18 +12,14 @@ import algoliasearch from 'algoliasearch/lite';
 const searchClient = algoliasearch('39X6WOJZKW', '6acba761a34d99781628c6178af1e16c');
 
 export const DocsGuides: React.FC = () => (
-    <SiteWrap theme="light">
-        <DocumentTitle {...documentConstants.DOCS} />
-        <Hero title="Guides" />
-        <Section maxWidth="1030px" isPadded={false}>
-            <InstantSearch searchClient={searchClient} indexName="0x_guides_test">
-                <Columns>
-                    <Filters filters={filters} />
-                    <Hits hitComponent={Resource} />
-                </Columns>
-            </InstantSearch>
-        </Section>
-    </SiteWrap>
+    <DocsPageLayout title="Guides">
+        <InstantSearch searchClient={searchClient} indexName="0x_guides_test">
+            <Columns>
+                <Filters filters={filters} />
+                <Hits hitComponent={Resource} />
+            </Columns>
+        </InstantSearch>
+    </DocsPageLayout>
 );
 
 const Columns = styled.div`
diff --git a/packages/website/ts/pages/docs/home.tsx b/packages/website/ts/pages/docs/home.tsx
index 03e3e9610b..9fdad561e0 100644
--- a/packages/website/ts/pages/docs/home.tsx
+++ b/packages/website/ts/pages/docs/home.tsx
@@ -3,52 +3,44 @@ import styled from 'styled-components';
 
 import { CommunityLink, ICommunityLinkProps } from 'ts/components/docs/community_link';
 import { GetStartedLink, IGetStartedLinkProps } from 'ts/components/docs/get_started_link';
-import { Hero } from 'ts/components/docs/hero';
 import { Separator } from 'ts/components/docs/separator';
 import { IShortcutLinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
-import { SiteWrap } from 'ts/components/docs/siteWrap';
 import { IStepLinkConfig } from 'ts/components/docs/step_link';
 import { StepLinks } from 'ts/components/docs/step_links';
-import { DocumentTitle } from 'ts/components/document_title';
-import { Section } from 'ts/components/newLayout';
 import { Heading } from 'ts/components/text';
 
-import { documentConstants } from 'ts/utils/document_meta_constants';
+import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
 
 const SEPARATOR_MARGIN = '60px 0';
 
 export const DocsHome: React.FC = () => {
     return (
-        <SiteWrap theme="light">
-            <DocumentTitle {...documentConstants.DOCS} />
-            <Hero isHome={true} title="0x Docs" />
-            <Section maxWidth="1150px" isPadded={false}>
-                <ShortcutsWrapper>
-                    {shortcuts.map((shortcut, index) => (
-                        <ShortcutLink key={`shortcut-${index}`} {...shortcut} />
+        <DocsPageLayout isHome={true} title="0x Docs">
+            <ShortcutsWrapper>
+                {shortcuts.map((shortcut, index) => (
+                    <ShortcutLink key={`shortcut-${index}`} {...shortcut} />
+                ))}
+            </ShortcutsWrapper>
+            <Separator margin={SEPARATOR_MARGIN} />
+            <GetStartedWrapper>
+                <div>
+                    <Heading size="default">Get Started</Heading>
+                    {getStartedLinks.map((link, index) => (
+                        <GetStartedLink key={`getStarted-${index}`} {...link} />
                     ))}
-                </ShortcutsWrapper>
-                <Separator margin={SEPARATOR_MARGIN} />
-                <GetStartedWrapper>
-                    <div>
-                        <Heading size="default">Get Started</Heading>
-                        {getStartedLinks.map((link, index) => (
-                            <GetStartedLink key={`getStarted-${index}`} {...link} />
-                        ))}
-                    </div>
-                    <div>
-                        <Heading size="default">Useful Links</Heading>
-                        <StepLinks links={usefulLinks} />
-                    </div>
-                </GetStartedWrapper>
-                <Separator margin={SEPARATOR_MARGIN} />
-                <CommunityWrapper>
-                    {communityShortcuts.map((shortcut, index) => (
-                        <CommunityLink key={`communityLink-${index}`} {...shortcut} />
-                    ))}
-                </CommunityWrapper>
-            </Section>
-        </SiteWrap>
+                </div>
+                <div>
+                    <Heading size="default">Useful Links</Heading>
+                    <StepLinks links={usefulLinks} />
+                </div>
+            </GetStartedWrapper>
+            <Separator margin={SEPARATOR_MARGIN} />
+            <CommunityWrapper>
+                {communityShortcuts.map((shortcut, index) => (
+                    <CommunityLink key={`communityLink-${index}`} {...shortcut} />
+                ))}
+            </CommunityWrapper>
+        </DocsPageLayout>
     );
 };
 
diff --git a/packages/website/ts/pages/docs/page_template.tsx b/packages/website/ts/pages/docs/page_template.tsx
index 8d21728d24..272950577d 100644
--- a/packages/website/ts/pages/docs/page_template.tsx
+++ b/packages/website/ts/pages/docs/page_template.tsx
@@ -1,60 +1,168 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Code } from 'ts/components/docs/code';
-import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/code_tabs';
 import { FeatureLink } from 'ts/components/docs/feature_link';
-import { HelpCallout } from 'ts/components/docs/help_callout';
-import { HelpfulCta } from 'ts/components/docs/helpful_cta';
-import { Hero } from 'ts/components/docs/hero';
+import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
 import { NewsletterWidget } from 'ts/components/docs/newsletter_widget';
 import { Note } from 'ts/components/docs/note';
-import { Notification } from 'ts/components/docs/notification';
-import { OrderedList } from 'ts/components/docs/ordered_list';
 import { Resource } from 'ts/components/docs/resource/resource';
 import { Separator } from 'ts/components/docs/separator';
-import { Filters } from 'ts/components/docs/sidebar/filters';
-import { SiteWrap } from 'ts/components/docs/siteWrap';
 import { IStepLinkConfig } from 'ts/components/docs/step_link';
 import { StepLinks } from 'ts/components/docs/step_links';
-import { Table } from 'ts/components/docs/table';
-import { UnorderedList } from 'ts/components/docs/unordered_list';
-import { DocumentTitle } from 'ts/components/document_title';
-import { Section } from 'ts/components/newLayout';
-import { Heading, Paragraph } from 'ts/components/text';
 
-import { documentConstants } from 'ts/utils/document_meta_constants';
+import { Code } from 'ts/components/docs/mdx/code';
+import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/mdx/code_tabs';
+import { HelpCallout } from 'ts/components/docs/mdx/help_callout';
+import { HelpfulCta } from 'ts/components/docs/mdx/helpful_cta';
+import { Notification } from 'ts/components/docs/mdx/notification';
+import { OrderedList } from 'ts/components/docs/mdx/ordered_list';
+import { Table } from 'ts/components/docs/mdx/table';
+import { UnorderedList } from 'ts/components/docs/mdx/unordered_list';
+import { Heading, Paragraph } from 'ts/components/text';
 
 export const DocsPageTemplate: React.FC = () => {
     return (
-        <SiteWrap theme="light">
-            <DocumentTitle {...documentConstants.DOCS} />
-            <Hero title={`Page Template`} description="This a subheader for the page" />
-            <Section maxWidth="1150px" isPadded={false} overflow="visible">
-                <Columns>
-                    <Filters filters={filters} />
-                    <Separator />
-                    <ContentWrapper>
-                        <LargeHeading>Large Heading</LargeHeading>
-                        <LargeIntro>Larger introduction text</LargeIntro>
-                        <Heading asElement="h2" size="default">
-                            Notifications
-                        </Heading>
-                        <Notification>This is a standard information callout</Notification>
-                        <Notification type="alert">This is an indication that something isn’t quite right</Notification>
-                        <Notification type="success">This is a success message</Notification>
-                        <Heading asElement="h2" size="default">
-                            Tutorial Steps
-                        </Heading>
-                        <OrderedList>
-                            <li>Step 1</li>
-                            <li>Step 2</li>
-                            <li>Step 3</li>
-                        </OrderedList>
-                        <Heading asElement="h2" size="default">
-                            Standard Heading
-                        </Heading>
-                        <Paragraph>This would be paragraph text.</Paragraph>
+        <DocsPageLayout title="Page template" subtitle="Test subtitle">
+            <Columns>
+                <h1>test</h1>
+                <Separator />
+                <ContentWrapper>
+                    <LargeHeading>Large Heading</LargeHeading>
+                    <LargeIntro>Larger introduction text</LargeIntro>
+                    <Heading asElement="h2" size="default">
+                        Notifications
+                    </Heading>
+                    <Notification>This is a standard information callout</Notification>
+                    <Notification type="alert">This is an indication that something isn’t quite right</Notification>
+                    <Notification type="success">This is a success message</Notification>
+                    <Heading asElement="h2" size="default">
+                        Tutorial Steps
+                    </Heading>
+                    <OrderedList>
+                        <li>Step 1</li>
+                        <li>Step 2</li>
+                        <li>Step 3</li>
+                    </OrderedList>
+                    <Heading asElement="h2" size="default">
+                        Standard Heading
+                    </Heading>
+                    <Paragraph>This would be paragraph text.</Paragraph>
+                    <Paragraph>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl varius
+                        malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien. Nam et
+                        massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus. Phasellus eu mattis
+                        elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis
+                        volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc
+                        euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent
+                        dignissim mi a maximus euismod
+                    </Paragraph>
+                    <Paragraph>And here is a table:</Paragraph>
+                    <Table>
+                        <thead>
+                            <tr>
+                                <th>Parameter</th>
+                                <th>Description</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>makerAddress</td>
+                                <td>
+                                    Address that created the order. The maker is one of the two parties that will be
+                                    involved in the trade if the order gets filled.
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>takerAddress</td>
+                                <td>
+                                    Address that is allowed to fill the order. If set to 0, anyone is allowed to fill
+                                    the order. This field allows makers to decide who can fill an order, rendering it
+                                    useless to eavesdroppers or outside parties.
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>feeRecipientAddress</td>
+                                <td>
+                                    The address that will receive the fees stipulated by the order. This is typically
+                                    used to incentivize off-chain order relay.
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>senderAddress</td>
+                                <td>
+                                    Is an advanced feature that can be defaulted to the 0 address. It allows the maker
+                                    to enforce that the order must flow through some additional logic residing in an
+                                    additional Ethereum smart contract before it can be filled (e.g a KYC whitelist
+                                    contract) -- more on "extension contracts" later.
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>makerAssetAmount</td>
+                                <td>Amount of the maker'sAsset being offered by the maker. Must be greater than 0.</td>
+                            </tr>
+                            <tr>
+                                <td>makerFee</td>
+                                <td>
+                                    The fee to be paid by the order maker to the <code>feeRecipientAddress</code> in the
+                                    event of an order fill. Partial fills result in partial fees.
+                                </td>
+                            </tr>
+                        </tbody>
+                    </Table>
+
+                    <H3>Tabbed Code Snippet</H3>
+                    <Tabs>
+                        <TabList>
+                            <Tab>Typescript</Tab>
+                            <Tab>Python</Tab>
+                            <Tab>Solidity</Tab>
+                        </TabList>
+
+                        <TabPanel>
+                            <Code>{codeSample}</Code>
+                        </TabPanel>
+                        <TabPanel>
+                            <Code>{codeSample}</Code>
+                        </TabPanel>
+                        <TabPanel>
+                            <Code>{codeSample}</Code>
+                        </TabPanel>
+                    </Tabs>
+
+                    <H3>Runnable Code Snippet</H3>
+                    <Tabs>
+                        <TabList>
+                            <Tab>Typescript</Tab>
+                            <Tab>Python</Tab>
+                            <Tab>Solidity</Tab>
+                        </TabList>
+
+                        <TabPanel>
+                            <Code canRun={true}>{codeSample}</Code>
+                        </TabPanel>
+                        <TabPanel>
+                            <Code>{codeSample}</Code>
+                        </TabPanel>
+                        <TabPanel>
+                            <Code>{codeSample}</Code>
+                        </TabPanel>
+                    </Tabs>
+
+                    <H3>Subheading</H3>
+                    <Paragraph>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl varius
+                        malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien. Nam et
+                        massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus. Phasellus eu mattis
+                        elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis
+                        volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc
+                        euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent
+                        dignissim mi a maximus euismod
+                    </Paragraph>
+                    <div>
+                        <Note
+                            heading="Information"
+                            description="This is a side-info callout used to explain things a little more when needed."
+                        />
                         <Paragraph>
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
                             varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien.
@@ -64,173 +172,54 @@ export const DocsPageTemplate: React.FC = () => {
                             auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan
                             sit amet turpis. Praesent dignissim mi a maximus euismod
                         </Paragraph>
-                        <Paragraph>And here is a table:</Paragraph>
-                        <Table>
-                            <thead>
-                                <tr>
-                                    <th>Parameter</th>
-                                    <th>Description</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>makerAddress</td>
-                                    <td>
-                                        Address that created the order. The maker is one of the two parties that will be
-                                        involved in the trade if the order gets filled.
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>takerAddress</td>
-                                    <td>
-                                        Address that is allowed to fill the order. If set to 0, anyone is allowed to
-                                        fill the order. This field allows makers to decide who can fill an order,
-                                        rendering it useless to eavesdroppers or outside parties.
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>feeRecipientAddress</td>
-                                    <td>
-                                        The address that will receive the fees stipulated by the order. This is
-                                        typically used to incentivize off-chain order relay.
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>senderAddress</td>
-                                    <td>
-                                        Is an advanced feature that can be defaulted to the 0 address. It allows the
-                                        maker to enforce that the order must flow through some additional logic residing
-                                        in an additional Ethereum smart contract before it can be filled (e.g a KYC
-                                        whitelist contract) -- more on "extension contracts" later.
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>makerAssetAmount</td>
-                                    <td>
-                                        Amount of the maker'sAsset being offered by the maker. Must be greater than 0.
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>makerFee</td>
-                                    <td>
-                                        The fee to be paid by the order maker to the <code>feeRecipientAddress</code> in
-                                        the event of an order fill. Partial fills result in partial fees.
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </Table>
-
-                        <H3>Tabbed Code Snippet</H3>
-                        <Tabs>
-                            <TabList>
-                                <Tab>Typescript</Tab>
-                                <Tab>Python</Tab>
-                                <Tab>Solidity</Tab>
-                            </TabList>
-
-                            <TabPanel>
-                                <Code>{codeSample}</Code>
-                            </TabPanel>
-                            <TabPanel>
-                                <Code>{codeSample}</Code>
-                            </TabPanel>
-                            <TabPanel>
-                                <Code>{codeSample}</Code>
-                            </TabPanel>
-                        </Tabs>
-
-                        <H3>Runnable Code Snippet</H3>
-                        <Tabs>
-                            <TabList>
-                                <Tab>Typescript</Tab>
-                                <Tab>Python</Tab>
-                                <Tab>Solidity</Tab>
-                            </TabList>
-
-                            <TabPanel>
-                                <Code canRun={true}>{codeSample}</Code>
-                            </TabPanel>
-                            <TabPanel>
-                                <Code>{codeSample}</Code>
-                            </TabPanel>
-                            <TabPanel>
-                                <Code>{codeSample}</Code>
-                            </TabPanel>
-                        </Tabs>
-
-                        <H3>Subheading</H3>
-                        <Paragraph>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
-                            varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien.
-                            Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus.
-                            Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus,
-                            in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit
-                            auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan
-                            sit amet turpis. Praesent dignissim mi a maximus euismod
-                        </Paragraph>
-                        <div>
-                            <Note
-                                heading="Information"
-                                description="This is a side-info callout used to explain things a little more when needed."
-                            />
-                            <Paragraph>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
-                                varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis
-                                sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim
-                                tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu
-                                dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam
-                                ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac
-                                pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
-                            </Paragraph>
-                        </div>
-                        <UnorderedList>
-                            <li>List items</li>
-                            <li>List items</li>
-                            <li>List items</li>
-                            <li>List items</li>
-                        </UnorderedList>
+                    </div>
+                    <UnorderedList>
+                        <li>List items</li>
+                        <li>List items</li>
+                        <li>List items</li>
+                        <li>List items</li>
+                    </UnorderedList>
+                    <Heading asElement="h2" size="default">
+                        Next Steps
+                    </Heading>
+                    <StepLinks links={usefulLinks} />
+                    <HelpCallout />
+                    <HelpfulCta page="test" />
+                    <div>
                         <Heading asElement="h2" size="default">
-                            Next Steps
+                            Resources
                         </Heading>
-                        <StepLinks links={usefulLinks} />
-                        <HelpCallout />
-                        <HelpfulCta page="test" />
-                        <div>
-                            <Heading asElement="h2" size="default">
-                                Resources
-                            </Heading>
-                            {/* {resources.map((resource, index) => (
+                        {/* {resources.map((resource, index) => (
                                 <Resource key={`resource-${index}`} {...resource} />
                             ))} */}
-                        </div>
-                        <div>
-                            <Heading asElement="h2" size="default">
-                                Feature Links
-                            </Heading>
-                            <FeatureLink
-                                heading="RadarRelay SDK"
-                                description="A description could possibly go here but could be tight."
-                                icon="flexibleIntegration"
-                                url="/"
-                            />
-                            <FeatureLink
-                                heading="RadarRelay SDK"
-                                description="A description could possibly go here but could be tight."
-                                icon="flexibleIntegration"
-                                url="/"
-                            />
-                            <FeatureLink
-                                heading="RadarRelay SDK"
-                                description="A description could possibly go here but could be tight."
-                                icon="flexibleIntegration"
-                                url="/"
-                            />
-                        </div>
-                        <NewsletterWidget />
-                    </ContentWrapper>
-                </Columns>
-            </Section>
-        </SiteWrap>
+                    </div>
+                    <div>
+                        <Heading asElement="h2" size="default">
+                            Feature Links
+                        </Heading>
+                        <FeatureLink
+                            heading="RadarRelay SDK"
+                            description="A description could possibly go here but could be tight."
+                            icon="flexibleIntegration"
+                            url="/"
+                        />
+                        <FeatureLink
+                            heading="RadarRelay SDK"
+                            description="A description could possibly go here but could be tight."
+                            icon="flexibleIntegration"
+                            url="/"
+                        />
+                        <FeatureLink
+                            heading="RadarRelay SDK"
+                            description="A description could possibly go here but could be tight."
+                            icon="flexibleIntegration"
+                            url="/"
+                        />
+                    </div>
+                    <NewsletterWidget />
+                </ContentWrapper>
+            </Columns>
+        </DocsPageLayout>
     );
 };
 
@@ -286,36 +275,7 @@ const usefulLinks: IStepLinkConfig[] = [
     },
 ];
 
-const filters = [
-    {
-        attribute: 'Topic',
-        heading: 'Topic',
-    },
-    {
-        attribute: 'Difficulty',
-        heading: 'Level',
-    },
-];
-
 const codeSample = `import { TruffleArtifactAdapter } from '@0x/sol-coverage';
 const projectRoot = '.';
 const solcVersion = '0.5.0';
 const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`;
-
-const resources = [
-    {
-        heading: '0x Mesh - your gateway to networked liquidity',
-        description:
-            'Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity.',
-        tags: ['Relayer'],
-        url: 'https://0x.org',
-        isCommunity: true,
-    },
-    {
-        heading: '0x Mesh - your gateway to networked liquidity',
-        description:
-            'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs',
-        tags: ['Api explorer', 'Relayer'],
-        url: 'https://0x.org',
-    },
-];
diff --git a/packages/website/ts/pages/docs/tools.tsx b/packages/website/ts/pages/docs/tools.tsx
index 4e9ca33882..1ced637c6c 100644
--- a/packages/website/ts/pages/docs/tools.tsx
+++ b/packages/website/ts/pages/docs/tools.tsx
@@ -2,16 +2,11 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { FeatureLink } from 'ts/components/docs/feature_link';
-import { Hero } from 'ts/components/docs/hero';
+import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
 import { Resource } from 'ts/components/docs/resource/resource';
 import { Filters } from 'ts/components/docs/sidebar/filters';
-import { SiteWrap } from 'ts/components/docs/siteWrap';
-import { DocumentTitle } from 'ts/components/document_title';
-import { Section } from 'ts/components/newLayout';
 import { Heading } from 'ts/components/text';
 
-import { documentConstants } from 'ts/utils/document_meta_constants';
-
 import { Hits, InstantSearch } from 'react-instantsearch-dom';
 
 import algoliasearch from 'algoliasearch/lite';
@@ -20,17 +15,14 @@ const searchClient = algoliasearch('39X6WOJZKW', '6acba761a34d99781628c6178af1e1
 
 export const DocsTools: React.FC = () => {
     return (
-        <SiteWrap theme="light">
-            <DocumentTitle {...documentConstants.DOCS} />
-            <Hero title="Tools" />
-            <Section maxWidth="1030px" isPadded={false}>
-                <InstantSearch searchClient={searchClient} indexName="0x_tools_test">
-                    <Columns>
-                        <Filters filters={filters} />
-                        <article>
-                            <Hits hitComponent={Resource} />
+        <DocsPageLayout title="Tools">
+            <InstantSearch searchClient={searchClient} indexName="0x_tools_test">
+                <Columns>
+                    <Filters filters={filters} />
+                    <article>
+                        <Hits hitComponent={Resource} />
 
-                            {/* <FeaturedToolsWrapper>
+                        {/* <FeaturedToolsWrapper>
                                 <Heading asElement="h2" size="default">
                                     Featured Tools
                                 </Heading>
@@ -45,7 +37,7 @@ export const DocsTools: React.FC = () => {
                                 ))}
                             </FeaturedToolsWrapper> */}
 
-                            {/* <ResourcesWrapper>
+                        {/* <ResourcesWrapper>
                                 <Heading asElement="h2" size="default">
                                     Docker Images
                                 </Heading>
@@ -54,7 +46,7 @@ export const DocsTools: React.FC = () => {
                                     <Resource key={`resource-${index}`} {...resource} />
                                 ))}
                             </ResourcesWrapper> */}
-                            {/* 
+                        {/* 
                             <ResourcesWrapper>
                                 <Heading asElement="h2" size="default">
                                     TypeScript Libraries
@@ -64,11 +56,10 @@ export const DocsTools: React.FC = () => {
                                     <Resource key={`resource-${index}`} {...resource} />
                                 ))}
                             </ResourcesWrapper> */}
-                        </article>
-                    </Columns>
-                </InstantSearch>
-            </Section>
-        </SiteWrap>
+                    </article>
+                </Columns>
+            </InstantSearch>
+        </DocsPageLayout>
     );
 };
 
@@ -112,21 +103,3 @@ const featuredLinks = [
         url: 'https://0x.org',
     },
 ];
-
-const resources = [
-    {
-        heading: '0x Mesh - your gateway to networked liquidity',
-        description:
-            'Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity.',
-        tags: ['Relayer', 'Dogs', 'Bells and whistles', 'Interstellar', 'Maharaji'],
-        url: 'https://0x.org',
-        isCommunity: true,
-    },
-    {
-        heading: '0x Mesh - your gateway to networked liquidity',
-        description:
-            'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs',
-        tags: ['Api explorer', 'Relayer'],
-        url: 'https://0x.org',
-    },
-];
diff --git a/packages/website/ts/pages/docs/view.tsx b/packages/website/ts/pages/docs/view.tsx
index bbb4492fd1..b6b6271015 100644
--- a/packages/website/ts/pages/docs/view.tsx
+++ b/packages/website/ts/pages/docs/view.tsx
@@ -7,31 +7,24 @@ import capitalize from 'lodash/capitalize';
 
 import { MDXProvider } from '@mdx-js/react';
 
-import CircularProgress from 'material-ui/CircularProgress';
+import { Code } from 'ts/components/docs/mdx/code';
+import { CodeTabs } from 'ts/components/docs/mdx/code_tabs';
+import { H1, H2, H3, H4 } from 'ts/components/docs/mdx/headings';
+import { HelpCallout } from 'ts/components/docs/mdx/help_callout';
+import { HelpfulCta } from 'ts/components/docs/mdx/helpful_cta';
+import { InlineCode } from 'ts/components/docs/mdx/inline_code';
+import { InlineLink } from 'ts/components/docs/mdx/inline_link';
+import { Notification } from 'ts/components/docs/mdx/notification';
+import { OrderedList } from 'ts/components/docs/mdx/ordered_list';
+import { Table } from 'ts/components/docs/mdx/table';
+import { UnorderedList } from 'ts/components/docs/mdx/unordered_list';
 
-import { Code } from 'ts/components/docs/code';
-import { CodeTabs } from 'ts/components/docs/code_tabs';
-import { H1, H2, H3, H4 } from 'ts/components/docs/headings';
-import { HelpCallout } from 'ts/components/docs/help_callout';
-import { HelpfulCta } from 'ts/components/docs/helpful_cta';
-import { Hero } from 'ts/components/docs/hero';
-import { InlineCode } from 'ts/components/docs/inline_code';
-import { InlineLink } from 'ts/components/docs/inline_link';
-import { Notification } from 'ts/components/docs/notification';
-import { OrderedList } from 'ts/components/docs/ordered_list';
+import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
 import { Separator } from 'ts/components/docs/separator';
 import { IContents, TableOfContents } from 'ts/components/docs/sidebar/table_of_contents';
-import { SiteWrap } from 'ts/components/docs/siteWrap';
-import { Table } from 'ts/components/docs/table';
-import { UnorderedList } from 'ts/components/docs/unordered_list';
-import { DocumentTitle } from 'ts/components/document_title';
-import { Section } from 'ts/components/newLayout';
+
 import { Paragraph } from 'ts/components/text';
 
-import { documentConstants } from 'ts/utils/document_meta_constants';
-
-import { colors } from 'ts/style/colors';
-
 interface IDocsViewProps {
     match: match<any>;
 }
@@ -68,45 +61,28 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
                 contents: component.tableOfContents(),
             });
         }
-        // @TODO: add error handling if needed
+        // @INFO: add error handling if needed
     };
 
     return (
-        <SiteWrap theme="light">
-            <DocumentTitle {...documentConstants.DOCS} />
-            <Hero title={title} />
-            <Section maxWidth="1150px" isPadded={false} overflow="visible">
-                {Component ? (
-                    <Columns>
-                        <TableOfContents contents={contents} />
-                        <Separator />
-                        <ContentWrapper>
-                            <MDXProvider components={mdxComponents}>
-                                {/*
+        <DocsPageLayout title={title} loading={!Component}>
+            <Columns>
+                <TableOfContents contents={contents} />
+                <Separator />
+                <ContentWrapper>
+                    <MDXProvider components={mdxComponents}>
+                        {/*
                                 // @ts-ignore */}
-                                <Component />
-                            </MDXProvider>
-                            <HelpCallout />
-                            <HelpfulCta page={page} />
-                        </ContentWrapper>
-                    </Columns>
-                ) : (
-                    <LoaderWrapper>
-                        <CircularProgress size={40} thickness={2} color={colors.brandLight} />
-                    </LoaderWrapper>
-                )}
-            </Section>
-        </SiteWrap>
+                        <Component />
+                    </MDXProvider>
+                    <HelpCallout />
+                    <HelpfulCta page={page} />
+                </ContentWrapper>
+            </Columns>
+        </DocsPageLayout>
     );
 };
 
-const LoaderWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 300px;
-`;
-
 const Columns = styled.div`
     display: grid;
     grid-template-columns: 130px 0 1fr;