Merge branch 'development' into feature/monorepo/release-notes

149 files changed, 661 insertions, 3709 deletions

diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
deleted file mode 100644
index b30a0cc5e..000000000
--- a/packages/website/ts/@next/components/footer.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { Link as SmartLink } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-import MediaQuery from 'react-responsive';
-import styled from 'styled-components';
-
-import { Logo } from 'ts/@next/components/logo';
-import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
-import { NewsletterForm } from 'ts/@next/components/newsletter_form';
-import { WebsitePaths } from 'ts/types';
-import { constants } from 'ts/utils/constants';
-
-interface LinkInterface {
-    text: string;
-    url: string;
-    shouldOpenInNewTab?: boolean;
-}
-
-interface LinkRows {
-    heading: string;
-    isOnMobile?: boolean;
-    links: LinkInterface[];
-}
-
-interface LinkListProps {
-    links: LinkInterface[];
-}
-
-const linkRows: LinkRows[] = [
-    {
-        heading: 'Products',
-        isOnMobile: true,
-        links: [
-            { url: WebsitePaths.Instant, text: '0x Instant' },
-            { url: WebsitePaths.LaunchKit, text: '0x Launch Kit' },
-        ],
-    },
-    {
-        heading: 'Developers',
-        links: [
-            { url: WebsitePaths.Docs, text: 'Documentation' },
-            { url: constants.URL_GITHUB_ORG, text: 'GitHub', shouldOpenInNewTab: true },
-            { url: constants.URL_PROTOCOL_SPECIFICATION, text: 'Protocol Spec', shouldOpenInNewTab: true },
-        ],
-    },
-    {
-        heading: 'About',
-        isOnMobile: true,
-        links: [
-            { url: WebsitePaths.AboutMission, text: 'Mission' },
-            { url: WebsitePaths.AboutTeam, text: 'Team' },
-            { url: WebsitePaths.AboutJobs, text: 'Jobs' },
-            { url: WebsitePaths.AboutPress, text: 'Press' },
-            { url: WebsitePaths.Ecosystem, text: 'Grant Program' },
-        ],
-    },
-    {
-        heading: 'Community',
-        isOnMobile: true,
-        links: [
-            { url: constants.URL_TWITTER, text: 'Twitter', shouldOpenInNewTab: true },
-            { url: constants.URL_ZEROEX_CHAT, text: 'Discord Chat', shouldOpenInNewTab: true },
-            { url: constants.URL_FACEBOOK, text: 'Facebook', shouldOpenInNewTab: true },
-            { url: constants.URL_REDDIT, text: 'Reddit', shouldOpenInNewTab: true },
-        ],
-    },
-];
-
-export const Footer: React.StatelessComponent = () => (
-    <FooterWrap>
-        <FlexWrap>
-            <FooterColumn width="35%">
-                <Logo />
-                <NewsletterForm />
-            </FooterColumn>
-
-            <FooterColumn width="55%">
-                <WrapGrid isCentered={false} isWrapped={true}>
-                    {_.map(linkRows, (row: LinkRows, index) => (
-                        <MediaQuery minWidth={row.isOnMobile ? 0 : 768} key={`fc-${index}`}>
-                            <FooterSectionWrap>
-                                <RowHeading>{row.heading}</RowHeading>
-
-                                <LinkList links={row.links} />
-                            </FooterSectionWrap>
-                        </MediaQuery>
-                    ))}
-                </WrapGrid>
-            </FooterColumn>
-        </FlexWrap>
-    </FooterWrap>
-);
-
-const LinkList = (props: LinkListProps) => (
-    <List>
-        {_.map(props.links, (link, index) => (
-            <li key={`fl-${index}`}>
-                <Link to={link.url} shouldOpenInNewTab={link.shouldOpenInNewTab}>
-                    {link.text}
-                </Link>
-            </li>
-        ))}
-    </List>
-);
-
-const FooterWrap = styled.footer`
-    padding: 40px 30px 30px 30px;
-    margin-top: 30px;
-    background-color: ${props => props.theme.footerBg};
-    color: ${props => props.theme.footerColor};
-
-    path {
-        fill: ${props => props.theme.footerColor};
-    }
-
-    @media (min-width: 768px) {
-        height: 350px;
-    }
-`;
-
-const FooterColumn = styled(Column)`
-    @media (min-width: 768px) {
-        width: ${props => props.width};
-    }
-
-    @media (max-width: 768px) {
-        text-align: left;
-    }
-`;
-
-const FooterSectionWrap = styled(FooterColumn)`
-    @media (max-width: 768px) {
-        width: 50%;
-
-        & + & {
-            margin-top: 0;
-            margin-bottom: 30px;
-        }
-    }
-`;
-
-const RowHeading = styled.h3`
-    color: inherit;
-    font-weight: 700;
-    font-size: 16px;
-    margin-bottom: 1.25em;
-    opacity: 0.75;
-`;
-
-const List = styled.ul`
-    li + li {
-        margin-top: 8px;
-    }
-`;
-
-const Link = styled(SmartLink)`
-    color: inherit;
-    opacity: 0.5;
-    display: block;
-    font-size: 16px;
-    line-height: 20px;
-    transition: opacity 0.25s;
-    text-decoration: none;
-
-    &:hover {
-        opacity: 0.8;
-    }
-`;
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
deleted file mode 100644
index 770ee159c..000000000
--- a/packages/website/ts/@next/components/layout.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import styled from 'styled-components';
-import { getCSSPadding, PADDING_SIZES, PaddingInterface } from 'ts/@next/constants/utilities';
-
-interface WrapWidths {
-    default: string;
-    full: string;
-    medium: string;
-    narrow: string;
-    [key: string]: string;
-}
-
-interface ColumnWidths {
-    [key: string]: string;
-}
-
-interface SectionProps {
-    isNoPadding?: boolean;
-    isPadLarge?: boolean;
-    isNoMargin?: boolean;
-    bgColor?: string;
-    isFullWidth?: boolean;
-    isRelative?: boolean;
-}
-
-interface WrapProps extends PaddingInterface {
-    width?: 'default' | 'full' | 'medium' | 'narrow';
-    bgColor?: string;
-    isWrapped?: boolean;
-    isCentered?: boolean;
-    isReversed?: boolean;
-}
-
-interface ColumnProps {
-    colWidth?: '1/4' | '1/3' | '1/2' | '2/3';
-    isNoPadding?: boolean;
-    isNoMargin?: boolean;
-    isPadLarge?: boolean;
-    isFlexGrow?: boolean;
-    isMobileCentered?: boolean;
-    bgColor?: string;
-}
-
-interface GetColWidthArgs {
-    span?: number;
-    columns: number;
-}
-
-export interface WrapStickyInterface {
-    offsetTop?: string;
-}
-
-const _getColumnWidth = (args: GetColWidthArgs): string => {
-    const { span = 1, columns } = args;
-    const percentWidth = span / columns * 100;
-    const gutterDiff = GUTTER * (columns - 1) / columns;
-    return `calc(${percentWidth}% - ${gutterDiff}px)`;
-};
-
-const GUTTER = 30 as number;
-const MAX_WIDTH = 1500;
-export const BREAKPOINTS = {
-    mobile: '768px',
-};
-const WRAPPER_WIDTHS: WrapWidths = {
-    default: `${MAX_WIDTH}px`, // tbd
-    full: '100%',
-    medium: '1136px',
-    narrow: '930px',
-};
-const COLUMN_WIDTHS: ColumnWidths = {
-    '1/4': _getColumnWidth({ columns: 4 }),
-    '1/3': _getColumnWidth({ columns: 3 }),
-    '1/2': _getColumnWidth({ columns: 2 }),
-    '2/3': _getColumnWidth({ span: 2, columns: 3 }),
-};
-
-export const Main = styled.main`
-    max-width: ${MAX_WIDTH}px;
-    margin: 0 auto;
-
-    @media (min-width: ${BREAKPOINTS.mobile}) {
-        width: calc(100% - 60px);
-    }
-`;
-
-// We can also turn Section into a stateless comp,
-// passing a asElement (same patter nas Heading) so we dont have to
-// make a const on every route to withComponent-size it.
-// just <Section asElement?="div/section/footer/header/whatever" /> ?
-export const Section =
-    styled.section <
-    SectionProps >
-    `
-    width: ${props => (props.isFullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%')};
-    padding: ${props => !props.isNoPadding && (props.isPadLarge ? `${PADDING_SIZES.large}` : PADDING_SIZES.default)};
-    background-color: ${props => props.bgColor};
-    position: ${props => props.isRelative && 'relative'};
-    overflow: ${props => props.isRelative && 'hidden'};
-    margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`};
-
-    @media (min-width: 1560px) {
-        width: ${props => props.isFullWidth && '100vw'};
-        margin-left: ${props => props.isFullWidth && `calc(750px - 50vw)`};
-    }
-
-    @media (max-width: ${BREAKPOINTS.mobile}) {
-        margin-bottom: ${props => !props.isNoMargin && `${GUTTER / 2}px`};
-        padding: ${props =>
-            props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default};
-    }
-`;
-
-const WrapBase =
-    styled.div <
-    WrapProps >
-    `
-    max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
-    padding: ${props => props.padding && getCSSPadding(props.padding)};
-    background-color: ${props => props.bgColor};
-    margin: 0 auto;
-`;
-
-export const Wrap = styled(WrapBase)`
-    @media (min-width: ${BREAKPOINTS.mobile}) {
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        flex-direction: ${props => props.isReversed && 'row-reverse'};
-    }
-`;
-
-export const WrapCentered = styled(WrapBase)`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-`;
-
-export const WrapSticky =
-    styled.div <
-    WrapStickyInterface >
-    `
-    position: sticky;
-    top: ${props => props.offsetTop || '60px'};
-`;
-
-export const WrapGrid = styled(WrapBase)`
-    display: flex;
-    flex-wrap: ${props => props.isWrapped && `wrap`};
-    justify-content: ${props => (props.isCentered ? `center` : 'space-between')};
-`;
-
-export const Column =
-    styled.div <
-    ColumnProps >
-    `
-    background-color: ${props => props.bgColor};
-    flex-grow: ${props => props.isFlexGrow && 1};
-
-    @media (min-width: ${BREAKPOINTS.mobile}) {
-        padding: ${props =>
-            !props.isNoPadding &&
-            (props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default)};
-        width: ${props => (props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%')};
-    }
-
-    @media (max-width: ${BREAKPOINTS.mobile}) {
-        padding: ${props => !props.isNoPadding && (props.isPadLarge ? '40px 30px' : 0)};
-        margin-bottom: 20px;
-        text-align: ${props => props.isMobileCentered && 'center'};
-    }
-`;
-
-WrapGrid.defaultProps = {
-    isCentered: true,
-};
diff --git a/packages/website/ts/@next/components/separator.tsx b/packages/website/ts/@next/components/separator.tsx
deleted file mode 100644
index 0b8b8d766..000000000
--- a/packages/website/ts/@next/components/separator.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-export const Separator = styled.hr`
-    background: #eaeaea;
-    height: 1px;
-    border: 0;
-`;
diff --git a/packages/website/ts/@next/icons/form-arrow.svg b/packages/website/ts/@next/icons/form-arrow.svg
deleted file mode 100644
index 2070a6d48..000000000
--- a/packages/website/ts/@next/icons/form-arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="22" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z" fill="#CBCBCB"/></svg>
\ No newline at end of file
diff --git a/packages/website/ts/@next/pages/instant/code_demo.tsx b/packages/website/ts/@next/pages/instant/code_demo.tsx
deleted file mode 100644
index 4a3022df5..000000000
--- a/packages/website/ts/@next/pages/instant/code_demo.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import * as React from 'react';
-import * as CopyToClipboard from 'react-copy-to-clipboard';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-
-import { Button } from 'ts/@next/components/button';
-import { Container } from 'ts/components/ui/container';
-import { styled } from 'ts/style/theme';
-import { zIndex } from 'ts/style/z_index';
-
-const CustomPre = styled.pre`
-    margin: 0px;
-    line-height: 24px;
-    overflow: scroll;
-    width: 100%;
-    height: 100%;
-    max-height: 800px;
-    border-radius: 4px;
-    code {
-        background-color: inherit !important;
-        border-radius: 0px;
-        font-family: 'Roboto Mono', sans-serif;
-        border: none;
-    }
-    code:first-of-type {
-        background-color: #060d0d !important;
-        color: #999;
-        min-height: 100%;
-        text-align: center;
-        margin-right: 15px;
-        line-height: 25px;
-        padding: 10px 7px !important;
-    }
-    code:last-of-type {
-        position: relative;
-        top: 10px;
-        top: 0;
-        padding-top: 11px;
-        display: inline-block;
-        line-height: 25px;
-    }
-`;
-
-const customStyle = {
-    'hljs-comment': {
-        color: '#7e7887',
-    },
-    'hljs-quote': {
-        color: '#7e7887',
-    },
-    'hljs-variable': {
-        color: '#be4678',
-    },
-    'hljs-template-variable': {
-        color: '#be4678',
-    },
-    'hljs-attribute': {
-        color: '#be4678',
-    },
-    'hljs-regexp': {
-        color: '#be4678',
-    },
-    'hljs-link': {
-        color: '#be4678',
-    },
-    'hljs-tag': {
-        color: '#61f5ff',
-    },
-    'hljs-name': {
-        color: '#61f5ff',
-    },
-    'hljs-selector-id': {
-        color: '#be4678',
-    },
-    'hljs-selector-class': {
-        color: '#be4678',
-    },
-    'hljs-number': {
-        color: '#c994ff',
-    },
-    'hljs-meta': {
-        color: '#61f5ff',
-    },
-    'hljs-built_in': {
-        color: '#aa573c',
-    },
-    'hljs-builtin-name': {
-        color: '#aa573c',
-    },
-    'hljs-literal': {
-        color: '#aa573c',
-    },
-    'hljs-type': {
-        color: '#aa573c',
-    },
-    'hljs-params': {
-        color: '#aa573c',
-    },
-    'hljs-string': {
-        color: '#bcff88',
-    },
-    'hljs-symbol': {
-        color: '#2a9292',
-    },
-    'hljs-bullet': {
-        color: '#2a9292',
-    },
-    'hljs-title': {
-        color: '#576ddb',
-    },
-    'hljs-section': {
-        color: '#576ddb',
-    },
-    'hljs-keyword': {
-        color: '#955ae7',
-    },
-    'hljs-selector-tag': {
-        color: '#955ae7',
-    },
-    'hljs-deletion': {
-        color: '#19171c',
-        display: 'inline-block',
-        width: '100%',
-        backgroundColor: '#be4678',
-    },
-    'hljs-addition': {
-        color: '#19171c',
-        display: 'inline-block',
-        width: '100%',
-        backgroundColor: '#2a9292',
-    },
-    hljs: {
-        display: 'block',
-        overflowX: 'hidden',
-        background: '#1B2625',
-        color: 'white',
-        fontSize: '12px',
-    },
-    'hljs-emphasis': {
-        fontStyle: 'italic',
-    },
-    'hljs-strong': {
-        fontWeight: 'bold',
-    },
-};
-
-export interface CodeDemoProps {
-    children: string;
-}
-
-export interface CodeDemoState {
-    didCopyCode: boolean;
-}
-
-export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
-    public state: CodeDemoState = {
-        didCopyCode: false,
-    };
-    public render(): React.ReactNode {
-        const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy';
-        return (
-            <Container position="relative" height="100%">
-                <Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}>
-                    <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
-                        <StyledButton>{copyButtonText}</StyledButton>
-                    </CopyToClipboard>
-                </Container>
-                <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
-                    {this.props.children}
-                </SyntaxHighlighter>
-            </Container>
-        );
-    }
-    private readonly _handleCopyClick = () => {
-        this.setState({ didCopyCode: true });
-    };
-}
-
-const StyledButton = styled(Button)`
-    border-radius: 4px;
-    font-size: 15px;
-    font-weight: 400;
-    padding: 9px 21px 7px;
-`;
diff --git a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
deleted file mode 100644
index 9b0e9b1d1..000000000
--- a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { addressUtils } from '@0x/utils';
-import * as _ from 'lodash';
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { colors } from 'ts/style/colors';
-
-import { Container } from 'ts/components/ui/container';
-
-import { Paragraph } from 'ts/@next/components/text';
-
-export interface ConfigGeneratorAddressInputProps {
-    value?: string;
-    onChange?: (address: string, isValid: boolean) => void;
-}
-
-export interface ConfigGeneratorAddressInputState {
-    errMsg: string;
-}
-
-export interface InputProps {
-    className?: string;
-    value?: string;
-    width?: string;
-    fontSize?: string;
-    fontColor?: string;
-    padding?: string;
-    placeholderColor?: string;
-    placeholder?: string;
-    backgroundColor?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export class ConfigGeneratorAddressInput extends React.Component<
-    ConfigGeneratorAddressInputProps,
-    ConfigGeneratorAddressInputState
-> {
-    public state = {
-        errMsg: '',
-    };
-    public render(): React.ReactNode {
-        const { errMsg } = this.state;
-        const hasError = !_.isEmpty(errMsg);
-        return (
-            <Container height="80px">
-                <Input value={this.props.value} onChange={this._handleChange} placeholder="0xe99...aa8da4" />
-                <Container marginTop="5px" isHidden={!hasError} height="25px">
-                    <Paragraph size="small" isNoMargin={true}>
-                        {errMsg}
-                    </Paragraph>
-                </Container>
-            </Container>
-        );
-    }
-
-    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-        const address = event.target.value;
-        const isValidAddress = addressUtils.isAddress(address.toLowerCase()) || address === '';
-        const errMsg = isValidAddress ? '' : 'Please enter a valid Ethereum address';
-        this.setState({
-            errMsg,
-        });
-        this.props.onChange(address, isValidAddress);
-    };
-}
-
-const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => (
-    <input className={className} value={value} onChange={onChange} placeholder={placeholder} />
-);
-
-export const Input = styled(PlainInput)`
-    background-color: ${colors.white};
-    color: ${colors.textDarkSecondary};
-    font-size: 1rem;
-    width: 100%;
-    padding: 16px 20px 18px;
-    border-radius: 4px;
-    border: 1px solid transparent;
-    outline: none;
-    &::placeholder {
-        color: #333333;
-        opacity: 0.5;
-    }
-`;
diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/components/aboutPageLayout.tsx
index 86a94ae2b..a2fd9dd72 100644
--- a/packages/website/ts/@next/components/aboutPageLayout.tsx
+++ b/packages/website/ts/components/aboutPageLayout.tsx
@@ -2,13 +2,13 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Button } from 'ts/@next/components/button';
-import { ChapterLink } from 'ts/@next/components/chapter_link';
-import { Column, Section } from 'ts/@next/components/newLayout';
-import { SiteWrap } from 'ts/@next/components/siteWrap';
-import { Heading, Paragraph } from 'ts/@next/components/text';
+import { Button } from 'ts/components/button';
+import { ChapterLink } from 'ts/components/chapter_link';
+import { Column, Section } from 'ts/components/newLayout';
+import { SiteWrap } from 'ts/components/siteWrap';
+import { Heading, Paragraph } from 'ts/components/text';
 
-import { addFadeInAnimation } from 'ts/@next/constants/animations';
+import { addFadeInAnimation } from 'ts/constants/animations';
 import { WebsitePaths } from 'ts/types';
 
 interface Props {
diff --git a/packages/website/ts/@next/components/animatedChatIcon.tsx b/packages/website/ts/components/animatedChatIcon.tsx
index 9a86e244c..9a86e244c 100644
--- a/packages/website/ts/@next/components/animatedChatIcon.tsx
+++ b/packages/website/ts/components/animatedChatIcon.tsx
diff --git a/packages/website/ts/@next/components/animatedCompassIcon.tsx b/packages/website/ts/components/animatedCompassIcon.tsx
index 5388f95ca..5388f95ca 100644
--- a/packages/website/ts/@next/components/animatedCompassIcon.tsx
+++ b/packages/website/ts/components/animatedCompassIcon.tsx
diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/components/banner.tsx
index 6c4d94dc5..76fc1d09e 100644
--- a/packages/website/ts/@next/components/banner.tsx
+++ b/packages/website/ts/components/banner.tsx
@@ -3,11 +3,11 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import { Button } from 'ts/@next/components/button';
-import { ThemeInterface } from 'ts/@next/components/siteWrap';
-import { Paragraph } from 'ts/@next/components/text';
+import { Button } from 'ts/components/button';
+import { ThemeInterface } from 'ts/components/siteWrap';
+import { Paragraph } from 'ts/components/text';
 
-import { Column, Section } from 'ts/@next/components/newLayout';
+import { Column, Section } from 'ts/components/newLayout';
 
 interface Props {
     heading?: string;
@@ -129,7 +129,7 @@ const Border =
     `
     position: absolute;
     background-image: ${props =>
-        props.isBottom ? 'url(/images/@next/banner/bottomofcta.png);' : 'url(/images/@next/banner/topofcta.png);'};
+        props.isBottom ? 'url(/images/banner/bottomofcta.png);' : 'url(/images/banner/topofcta.png);'};
     background-position: ${props => (props.isBottom ? 'left top' : 'left bottom')};
     left: 0;
     width: calc(100% + 214px);
diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/components/blockIconLink.tsx
index 8d66a4afa..ff7712595 100644
--- a/packages/website/ts/@next/components/blockIconLink.tsx
+++ b/packages/website/ts/components/blockIconLink.tsx
@@ -3,8 +3,8 @@ import * as React from 'react';
 import { match, withRouter } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { Button } from 'ts/@next/components/button';
-import { Icon } from 'ts/@next/components/icon';
+import { Button } from 'ts/components/button';
+import { Icon } from 'ts/components/icon';
 
 interface BaseComponentProps {
     icon?: string;
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/components/button.tsx
index 348f1b7b4..c9785e48c 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/components/button.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { ThemeInterface } from 'ts/@next/components/siteWrap';
+import { ThemeInterface } from 'ts/components/siteWrap';
 
 import { colors } from 'ts/style/colors';
 
diff --git a/packages/website/ts/@next/components/chapter_link.tsx b/packages/website/ts/components/chapter_link.tsx
index fd974cec1..fd974cec1 100644
--- a/packages/website/ts/@next/components/chapter_link.tsx
+++ b/packages/website/ts/components/chapter_link.tsx
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/components/definition.tsx
index 8adef8d54..c7fac5177 100644
--- a/packages/website/ts/@next/components/definition.tsx
+++ b/packages/website/ts/components/definition.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Button } from 'ts/@next/components/button';
-import { Icon } from 'ts/@next/components/icon';
-import { Heading, Paragraph } from 'ts/@next/components/text';
+import { Button } from 'ts/components/button';
+import { Icon } from 'ts/components/icon';
+import { Heading, Paragraph } from 'ts/components/text';
 
 interface Action {
     label: string;
diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
deleted file mode 100644
index bbec1d649..000000000
--- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { colors } from '@0x/react-shared';
-import Dialog from 'material-ui/Dialog';
-import FlatButton from 'material-ui/FlatButton';
-import * as React from 'react';
-import { constants } from 'ts/utils/constants';
-
-interface U2fNotSupportedDialogProps {
-    isOpen: boolean;
-    onToggleDialog: () => void;
-}
-
-export const U2fNotSupportedDialog = (props: U2fNotSupportedDialogProps) => {
-    return (
-        <Dialog
-            title="U2F Not Supported"
-            titleStyle={{ fontWeight: 100 }}
-            actions={[<FlatButton key="u2fNo" label="Ok" onClick={props.onToggleDialog} />]}
-            open={props.isOpen}
-            onRequestClose={props.onToggleDialog}
-            autoScrollBodyContent={true}
-        >
-            <div className="pt2" style={{ color: colors.grey700 }}>
-                <div>
-                    It looks like your browser does not support U2F connections required for us to communicate with your
-                    hardware wallet. Please use a browser that supports U2F connections and try again.
-                </div>
-                <div>
-                    <ul>
-                        <li className="pb1">Chrome version 38 or later</li>
-                        <li className="pb1">Opera version 40 of later</li>
-                        <li>
-                            Firefox with{' '}
-                            <a
-                                href={constants.URL_FIREFOX_U2F_ADDON}
-                                target="_blank"
-                                style={{ textDecoration: 'underline' }}
-                            >
-                                this extension
-                            </a>.
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </Dialog>
-    );
-};
diff --git a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
deleted file mode 100644
index cf2c4dda5..000000000
--- a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import Dialog from 'material-ui/Dialog';
-import FlatButton from 'material-ui/FlatButton';
-import { colors } from 'material-ui/styles';
-import * as React from 'react';
-
-interface WrappedEthSectionNoticeDialogProps {
-    isOpen: boolean;
-    onToggleDialog: () => void;
-}
-
-export const WrappedEthSectionNoticeDialog = (props: WrappedEthSectionNoticeDialogProps) => {
-    return (
-        <Dialog
-            title="Dedicated Wrapped Ether Section"
-            titleStyle={{ fontWeight: 100 }}
-            actions={[
-                <FlatButton key="acknowledgeWrapEthSection" label="Sounds good" onClick={props.onToggleDialog} />,
-            ]}
-            open={props.isOpen}
-            onRequestClose={props.onToggleDialog}
-            autoScrollBodyContent={true}
-            modal={true}
-        >
-            <div className="pt2" style={{ color: colors.grey700 }}>
-                <div>
-                    We have recently updated the Wrapped Ether token (WETH) used by 0x Portal. Don't worry, unwrapping
-                    Ether tied to the old Wrapped Ether token can be done at any time by clicking on the "Wrap ETH"
-                    section in the menu to the left.
-                </div>
-            </div>
-        </Dialog>
-    );
-};
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/components/dropdowns/dropdown_developers.tsx
index 96d88846b..dc6b70d21 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
+++ b/packages/website/ts/components/dropdowns/dropdown_developers.tsx
@@ -3,10 +3,10 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import styled, { withTheme } from 'styled-components';
 
-import { Button } from 'ts/@next/components/button';
-import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
-import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
-import { Heading } from 'ts/@next/components/text';
+import { Button } from 'ts/components/button';
+import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
+import { ThemeValuesInterface } from 'ts/components/siteWrap';
+import { Heading } from 'ts/components/text';
 import { WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/components/dropdowns/dropdown_products.tsx
index 886cee44a..93fd1a4fe 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
+++ b/packages/website/ts/components/dropdowns/dropdown_products.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import { Heading, Paragraph } from 'ts/@next/components/text';
+import { Heading, Paragraph } from 'ts/components/text';
 import { WebsitePaths } from 'ts/types';
 
 const navData = [
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 6366bf4ea..3765a32ca 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,228 +1,168 @@
-import { ALink, colors, Link } from '@0x/react-shared';
-import { ObjectMap } from '@0x/types';
+import { Link as SmartLink } from '@0x/react-shared';
 import * as _ from 'lodash';
-import DropDownMenu from 'material-ui/DropDownMenu';
-import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
+import MediaQuery from 'react-responsive';
+import styled from 'styled-components';
 
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, Language, WebsitePaths } from 'ts/types';
+import { Logo } from 'ts/components/logo';
+import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
+import { NewsletterForm } from 'ts/components/newsletter_form';
+import { WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
-import { Translate } from 'ts/utils/translate';
-
-const ICON_DIMENSION = 16;
-
-const languageToMenuTitle = {
-    [Language.English]: 'English',
-    [Language.Russian]: 'Русский',
-    [Language.Spanish]: 'Español',
-    [Language.Korean]: '한국어',
-    [Language.Chinese]: '中文',
-};
-
-export interface FooterProps {
-    translate: Translate;
-    dispatcher: Dispatcher;
-    backgroundColor?: string;
+
+interface LinkInterface {
+    text: string;
+    url: string;
+    shouldOpenInNewTab?: boolean;
+}
+
+interface LinkRows {
+    heading: string;
+    isOnMobile?: boolean;
+    links: LinkInterface[];
 }
 
-interface FooterState {
-    selectedLanguage: Language;
+interface LinkListProps {
+    links: LinkInterface[];
 }
 
-export class Footer extends React.Component<FooterProps, FooterState> {
-    public static defaultProps = {
-        backgroundColor: colors.darkerGrey,
-    };
-    constructor(props: FooterProps) {
-        super(props);
-        this.state = {
-            selectedLanguage: props.translate.getLanguage(),
-        };
+const linkRows: LinkRows[] = [
+    {
+        heading: 'Products',
+        isOnMobile: true,
+        links: [
+            { url: WebsitePaths.Instant, text: '0x Instant' },
+            { url: WebsitePaths.LaunchKit, text: '0x Launch Kit' },
+        ],
+    },
+    {
+        heading: 'Developers',
+        links: [
+            { url: WebsitePaths.Docs, text: 'Documentation' },
+            { url: constants.URL_GITHUB_ORG, text: 'GitHub', shouldOpenInNewTab: true },
+            { url: constants.URL_PROTOCOL_SPECIFICATION, text: 'Protocol Spec', shouldOpenInNewTab: true },
+        ],
+    },
+    {
+        heading: 'About',
+        isOnMobile: true,
+        links: [
+            { url: WebsitePaths.AboutMission, text: 'Mission' },
+            { url: WebsitePaths.AboutTeam, text: 'Team' },
+            { url: WebsitePaths.AboutJobs, text: 'Jobs' },
+            { url: WebsitePaths.AboutPress, text: 'Press' },
+            { url: WebsitePaths.Ecosystem, text: 'Grant Program' },
+        ],
+    },
+    {
+        heading: 'Community',
+        isOnMobile: true,
+        links: [
+            { url: constants.URL_TWITTER, text: 'Twitter', shouldOpenInNewTab: true },
+            { url: constants.URL_ZEROEX_CHAT, text: 'Discord Chat', shouldOpenInNewTab: true },
+            { url: constants.URL_FACEBOOK, text: 'Facebook', shouldOpenInNewTab: true },
+            { url: constants.URL_REDDIT, text: 'Reddit', shouldOpenInNewTab: true },
+        ],
+    },
+];
+
+export const Footer: React.StatelessComponent = () => (
+    <FooterWrap>
+        <FlexWrap>
+            <FooterColumn width="35%">
+                <Logo />
+                <NewsletterForm />
+            </FooterColumn>
+
+            <FooterColumn width="55%">
+                <WrapGrid isCentered={false} isWrapped={true}>
+                    {_.map(linkRows, (row: LinkRows, index) => (
+                        <MediaQuery minWidth={row.isOnMobile ? 0 : 768} key={`fc-${index}`}>
+                            <FooterSectionWrap>
+                                <RowHeading>{row.heading}</RowHeading>
+
+                                <LinkList links={row.links} />
+                            </FooterSectionWrap>
+                        </MediaQuery>
+                    ))}
+                </WrapGrid>
+            </FooterColumn>
+        </FlexWrap>
+    </FooterWrap>
+);
+
+const LinkList = (props: LinkListProps) => (
+    <List>
+        {_.map(props.links, (link, index) => (
+            <li key={`fl-${index}`}>
+                <Link to={link.url} shouldOpenInNewTab={link.shouldOpenInNewTab}>
+                    {link.text}
+                </Link>
+            </li>
+        ))}
+    </List>
+);
+
+const FooterWrap = styled.footer`
+    padding: 40px 30px 30px 30px;
+    margin-top: 30px;
+    background-color: ${props => props.theme.footerBg};
+    color: ${props => props.theme.footerColor};
+
+    path {
+        fill: ${props => props.theme.footerColor};
+    }
+
+    @media (min-width: 768px) {
+        height: 350px;
     }
-    public render(): React.ReactNode {
-        const sectionNameToLinks: ObjectMap<ALink[]> = {
-            [Key.Documentation]: [
-                {
-                    title: 'Developer Home',
-                    to: WebsitePaths.Docs,
-                },
-                {
-                    title: '0x.js',
-                    to: WebsitePaths.ZeroExJs,
-                },
-                {
-                    title: this.props.translate.get(Key.SmartContracts, Deco.Cap),
-                    to: WebsitePaths.SmartContracts,
-                },
-                {
-                    title: this.props.translate.get(Key.Connect, Deco.Cap),
-                    to: WebsitePaths.Connect,
-                },
-                {
-                    title: this.props.translate.get(Key.Whitepaper, Deco.Cap),
-                    to: WebsitePaths.Whitepaper,
-                    shouldOpenInNewTab: true,
-                },
-                {
-                    title: this.props.translate.get(Key.Wiki, Deco.Cap),
-                    to: WebsitePaths.Wiki,
-                },
-            ],
-            [Key.Community]: [
-                {
-                    title: this.props.translate.get(Key.Discord, Deco.Cap),
-                    to: constants.URL_ZEROEX_CHAT,
-                    shouldOpenInNewTab: true,
-                },
-                {
-                    title: this.props.translate.get(Key.Blog, Deco.Cap),
-                    to: constants.URL_BLOG,
-                    shouldOpenInNewTab: true,
-                },
-                {
-                    title: 'Twitter',
-                    to: constants.URL_TWITTER,
-                    shouldOpenInNewTab: true,
-                },
-                {
-                    title: 'Reddit',
-                    to: constants.URL_REDDIT,
-                    shouldOpenInNewTab: true,
-                },
-                {
-                    title: this.props.translate.get(Key.Forum, Deco.Cap),
-                    to: constants.URL_DISCOURSE_FORUM,
-                    shouldOpenInNewTab: true,
-                },
-            ],
-            [Key.Organization]: [
-                {
-                    title: this.props.translate.get(Key.About, Deco.Cap),
-                    to: WebsitePaths.About,
-                },
-                {
-                    title: this.props.translate.get(Key.Careers, Deco.Cap),
-                    to: WebsitePaths.Careers,
-                },
-                {
-                    title: this.props.translate.get(Key.Contact, Deco.Cap),
-                    to: 'mailto:team@0x.org',
-                    shouldOpenInNewTab: true,
-                },
-            ],
-        };
-        const languageMenuItems = _.map(languageToMenuTitle, (menuTitle: string, language: Language) => {
-            return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />;
-        });
-        return (
-            <div className="relative pb4 pt2" style={{ backgroundColor: this.props.backgroundColor }}>
-                <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
-                    <div className="col lg-col-4 md-col-4 col-12 left">
-                        <div className="sm-mx-auto" style={{ width: 148 }}>
-                            <div>
-                                <img src="/images/protocol_logo_white.png" height="30" />
-                            </div>
-                            <div
-                                style={{
-                                    fontSize: 11,
-                                    color: colors.grey,
-                                    paddingLeft: 37,
-                                    paddingTop: 2,
-                                }}
-                            >
-                                © ZeroEx, Intl.
-                            </div>
-                            <div className="pt4 center">
-                                <DropDownMenu
-                                    labelStyle={{ color: colors.white }}
-                                    value={this.state.selectedLanguage}
-                                    onChange={this._updateLanguage.bind(this)}
-                                >
-                                    {languageMenuItems}
-                                </DropDownMenu>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4">
-                        <div className="col lg-col-4 md-col-4 col-12">
-                            <div className="lg-right md-right sm-center">
-                                {this._renderHeader(Key.Documentation)}
-                                {_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))}
-                            </div>
-                        </div>
-                        <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2">
-                            <div className="lg-right md-right sm-center">
-                                {this._renderHeader(Key.Community)}
-                                {_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))}
-                            </div>
-                        </div>
-                        <div className="col lg-col-4 md-col-4 col-12">
-                            <div className="lg-right md-right sm-center">
-                                {this._renderHeader(Key.Organization)}
-                                {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
+`;
+
+const FooterColumn = styled(Column)`
+    @media (min-width: 768px) {
+        width: ${props => props.width};
     }
-    private _renderIcon(fileName: string): React.ReactNode {
-        return (
-            <div style={{ height: ICON_DIMENSION, width: ICON_DIMENSION }}>
-                <img src={`/images/social/${fileName}`} style={{ width: ICON_DIMENSION }} />
-            </div>
-        );
+
+    @media (max-width: 768px) {
+        text-align: left;
     }
-    private _renderMenuItem(link: ALink): React.ReactNode {
-        const titleToIcon: { [title: string]: string } = {
-            [this.props.translate.get(Key.Discord, Deco.Cap)]: 'discord.png',
-            [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png',
-            Twitter: 'twitter.png',
-            Reddit: 'reddit.png',
-            [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png',
-        };
-        const iconIfExists = titleToIcon[link.title];
-        return (
-            <div key={link.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
-                <Link
-                    to={link.to}
-                    shouldOpenInNewTab={link.shouldOpenInNewTab}
-                    fontColor={colors.white}
-                    className="text-decoration-none"
-                >
-                    <div>
-                        {!_.isUndefined(iconIfExists) ? (
-                            <div className="inline-block">
-                                <div className="pr1 table-cell">{this._renderIcon(iconIfExists)}</div>
-                                <div className="table-cell">{link.title}</div>
-                            </div>
-                        ) : (
-                            link.title
-                        )}
-                    </div>
-                </Link>
-            </div>
-        );
+`;
+
+const FooterSectionWrap = styled(FooterColumn)`
+    @media (max-width: 768px) {
+        width: 50%;
+
+        & + & {
+            margin-top: 0;
+            margin-bottom: 30px;
+        }
     }
-    private _renderHeader(key: Key): React.ReactNode {
-        const headerStyle = {
-            color: colors.grey400,
-            letterSpacing: 2,
-            fontFamily: 'Roboto Mono',
-            fontSize: 13,
-        };
-        return (
-            <div className="lg-pb2 md-pb2 sm-pt4" style={headerStyle}>
-                {this.props.translate.get(key, Deco.Upper)}
-            </div>
-        );
+`;
+
+const RowHeading = styled.h3`
+    color: inherit;
+    font-weight: 700;
+    font-size: 16px;
+    margin-bottom: 1.25em;
+    opacity: 0.75;
+`;
+
+const List = styled.ul`
+    li + li {
+        margin-top: 8px;
     }
-    private _updateLanguage(_event: any, _index: number, value: Language): void {
-        this.setState({
-            selectedLanguage: value,
-        });
-        this.props.dispatcher.updateSelectedLanguage(value);
+`;
+
+const Link = styled(SmartLink)`
+    color: inherit;
+    opacity: 0.5;
+    display: block;
+    font-size: 16px;
+    line-height: 20px;
+    transition: opacity 0.25s;
+    text-decoration: none;
+
+    &:hover {
+        opacity: 0.8;
     }
-}
+`;
diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx
deleted file mode 100644
index f5560cfa7..000000000
--- a/packages/website/ts/components/forms/subscribe_form.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { colors } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Button } from 'ts/components/ui/button';
-import { Container } from 'ts/components/ui/container';
-import { Input } from 'ts/components/ui/input';
-import { Text } from 'ts/components/ui/text';
-import { analytics } from 'ts/utils/analytics';
-import { backendClient } from 'ts/utils/backend_client';
-
-export interface SubscribeFormProps {}
-
-export enum SubscribeFormStatus {
-    None,
-    Error,
-    Success,
-    Loading,
-    Other,
-}
-
-export interface SubscribeFormState {
-    emailText: string;
-    lastSubmittedEmail: string;
-    status: SubscribeFormStatus;
-}
-
-const FORM_FONT_SIZE = '15px';
-
-// TODO: Translate visible strings. https://app.asana.com/0/628666249318202/697485674422001
-export class SubscribeForm extends React.Component<SubscribeFormProps, SubscribeFormState> {
-    public state = {
-        emailText: '',
-        lastSubmittedEmail: '',
-        status: SubscribeFormStatus.None,
-    };
-    public render(): React.ReactNode {
-        return (
-            <Container className="flex flex-column items-center justify-between md-mx2 sm-mx2">
-                <Container marginBottom="15px">
-                    <Text fontFamily="Roboto Mono" fontColor={colors.grey} center={true}>
-                        Subscribe to our newsletter for 0x relayer and dApp updates
-                    </Text>
-                </Container>
-                <form onSubmit={this._handleFormSubmitAsync.bind(this)}>
-                    <Container className="flex flex-wrap justify-center items-center">
-                        <Container marginTop="15px">
-                            <Input
-                                placeholder="you@email.com"
-                                value={this.state.emailText}
-                                fontColor={colors.white}
-                                fontSize={FORM_FONT_SIZE}
-                                backgroundColor={colors.projectsGrey}
-                                width="300px"
-                                onChange={this._handleEmailInputChange.bind(this)}
-                            />
-                        </Container>
-                        <Container marginLeft="15px" marginTop="15px">
-                            <Button
-                                type="submit"
-                                backgroundColor={colors.darkestGrey}
-                                fontColor={colors.white}
-                                fontSize={FORM_FONT_SIZE}
-                            >
-                                Subscribe
-                            </Button>
-                        </Container>
-                    </Container>
-                </form>
-                {this._renderMessage()}
-            </Container>
-        );
-    }
-    private _renderMessage(): React.ReactNode {
-        let message = null;
-        switch (this.state.status) {
-            case SubscribeFormStatus.Error:
-                message = 'Sorry, something went wrong. Try again later.';
-                break;
-            case SubscribeFormStatus.Loading:
-                message = 'One second...';
-                break;
-            case SubscribeFormStatus.Success:
-                message = `Thanks! ${this.state.lastSubmittedEmail} is now on the mailing list.`;
-                break;
-            case SubscribeFormStatus.None:
-                break;
-            default:
-                throw new Error(
-                    'The SubscribeFormStatus switch statement is not exhaustive when choosing an error message.',
-                );
-        }
-        return (
-            <Container isHidden={!message} marginTop="30px">
-                <Text center={true} fontFamily="Roboto Mono" fontColor={colors.grey}>
-                    {message || 'spacer text (never shown to user)'}
-                </Text>
-            </Container>
-        );
-    }
-    private _handleEmailInputChange(event: React.ChangeEvent<HTMLInputElement>): void {
-        this.setState({ emailText: event.target.value });
-    }
-    private async _handleFormSubmitAsync(event: React.FormEvent<HTMLInputElement>): Promise<void> {
-        event.preventDefault();
-        if (_.isUndefined(this.state.emailText) || _.isEmpty(this.state.emailText)) {
-            return;
-        }
-        this.setState({
-            status: SubscribeFormStatus.Loading,
-            lastSubmittedEmail: this.state.emailText,
-        });
-        try {
-            const response = await backendClient.subscribeToNewsletterAsync(this.state.emailText);
-            const status = response.status === 200 ? SubscribeFormStatus.Success : SubscribeFormStatus.Error;
-            if (status === SubscribeFormStatus.Success) {
-                analytics.identify(this.state.emailText, 'email');
-            }
-            this.setState({ status, emailText: '' });
-        } catch (error) {
-            this._setStatus(SubscribeFormStatus.Error);
-        }
-    }
-    private _setStatus(status: SubscribeFormStatus): void {
-        this.setState({ status });
-    }
-}
diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/components/hamburger.tsx
index 435d206cd..435d206cd 100644
--- a/packages/website/ts/@next/components/hamburger.tsx
+++ b/packages/website/ts/components/hamburger.tsx
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/components/header.tsx
index e886923df..90e097070 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/components/header.tsx
@@ -6,14 +6,14 @@ import styled, { css, withTheme } from 'styled-components';
 
 import Headroom from 'react-headroom';
 
-import { Button } from 'ts/@next/components/button';
-import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
-import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
-import { Hamburger } from 'ts/@next/components/hamburger';
-import { Logo } from 'ts/@next/components/logo';
-import { MobileNav } from 'ts/@next/components/mobileNav';
-import { FlexWrap } from 'ts/@next/components/newLayout';
-import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
+import { Button } from 'ts/components/button';
+import { DropdownDevelopers } from 'ts/components/dropdowns/dropdown_developers';
+import { DropdownProducts } from 'ts/components/dropdowns/dropdown_products';
+import { Hamburger } from 'ts/components/hamburger';
+import { Logo } from 'ts/components/logo';
+import { MobileNav } from 'ts/components/mobileNav';
+import { FlexWrap } from 'ts/components/newLayout';
+import { ThemeValuesInterface } from 'ts/components/siteWrap';
 import { WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 
diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/components/hero.tsx
index 4c8874d3e..a662ee3a5 100644
--- a/packages/website/ts/@next/components/hero.tsx
+++ b/packages/website/ts/components/hero.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { addFadeInAnimation } from 'ts/@next/constants/animations';
+import { addFadeInAnimation } from 'ts/constants/animations';
 
 interface Props {
     title: string;
diff --git a/packages/website/ts/@next/components/heroAnimation.tsx b/packages/website/ts/components/heroAnimation.tsx
index 42956fb6a..42956fb6a 100644
--- a/packages/website/ts/@next/components/heroAnimation.tsx
+++ b/packages/website/ts/components/heroAnimation.tsx
diff --git a/packages/website/ts/@next/components/heroImage.tsx b/packages/website/ts/components/heroImage.tsx
index af7c055ac..af7c055ac 100644
--- a/packages/website/ts/@next/components/heroImage.tsx
+++ b/packages/website/ts/components/heroImage.tsx
diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/components/icon.tsx
index fc9d488f9..165e999b9 100644
--- a/packages/website/ts/@next/components/icon.tsx
+++ b/packages/website/ts/components/icon.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import Loadable from 'react-loadable';
 import styled from 'styled-components';
 
-import { Paragraph } from 'ts/@next/components/text';
-import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities';
+import { Paragraph } from 'ts/components/text';
+import { getCSSPadding, PaddingInterface } from 'ts/constants/utilities';
 
 interface IconProps extends PaddingInterface {
     name?: string;
@@ -14,7 +14,7 @@ interface IconProps extends PaddingInterface {
 export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => {
     if (props.name && !props.component) {
         const IconSVG = Loadable({
-            loader: async () => import(/* webpackChunkName: "icon" */ `ts/@next/icons/illustrations/${props.name}.svg`),
+            loader: async () => import(/* webpackChunkName: "icon" */ `ts/icons/illustrations/${props.name}.svg`),
             loading: () => <Paragraph>Loading</Paragraph>,
         });
 
diff --git a/packages/website/ts/@next/components/image.tsx b/packages/website/ts/components/image.tsx
index 65b2a9705..65b2a9705 100644
--- a/packages/website/ts/@next/components/image.tsx
+++ b/packages/website/ts/components/image.tsx
diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/components/link.tsx
index 080a0abcc..080a0abcc 100644
--- a/packages/website/ts/@next/components/link.tsx
+++ b/packages/website/ts/components/link.tsx
diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/components/logo.tsx
index 227d48ee0..19aeb901e 100644
--- a/packages/website/ts/@next/components/logo.tsx
+++ b/packages/website/ts/components/logo.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { ThemeInterface } from 'ts/@next/components/siteWrap';
-import LogoIcon from 'ts/@next/icons/logo-with-type.svg';
+import { ThemeInterface } from 'ts/components/siteWrap';
+import LogoIcon from 'ts/icons/logo-with-type.svg';
 
 interface LogoInterface {
     theme?: ThemeInterface;
diff --git a/packages/website/ts/@next/components/mobileNav.tsx b/packages/website/ts/components/mobileNav.tsx
index 13cf46fca..573d21596 100644
--- a/packages/website/ts/@next/components/mobileNav.tsx
+++ b/packages/website/ts/components/mobileNav.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { Link } from 'react-router-dom';
 
-import { WrapGrid, WrapProps } from 'ts/@next/components/newLayout';
+import { WrapGrid, WrapProps } from 'ts/components/newLayout';
 import { WebsitePaths } from 'ts/types';
 
 interface Props {
diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/components/modals/input.tsx
index 8cfcc9763..8cfcc9763 100644
--- a/packages/website/ts/@next/components/modals/input.tsx
+++ b/packages/website/ts/components/modals/input.tsx
diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/components/modals/modal_contact.tsx
index b97baf5e7..d9c276584 100644
--- a/packages/website/ts/@next/components/modals/modal_contact.tsx
+++ b/packages/website/ts/components/modals/modal_contact.tsx
@@ -7,11 +7,11 @@ import { colors } from 'ts/style/colors';
 import { DialogContent, DialogOverlay } from '@reach/dialog';
 import '@reach/dialog/styles.css';
 
-import { Button } from 'ts/@next/components/button';
-import { Icon } from 'ts/@next/components/icon';
-import { Input, InputWidth } from 'ts/@next/components/modals/input';
-import { Heading, Paragraph } from 'ts/@next/components/text';
-import { GlobalStyle } from 'ts/@next/constants/globalStyle';
+import { Button } from 'ts/components/button';
+import { Icon } from 'ts/components/icon';
+import { Input, InputWidth } from 'ts/components/modals/input';
+import { Heading, Paragraph } from 'ts/components/text';
+import { GlobalStyle } from 'ts/constants/globalStyle';
 
 interface Props {
     theme?: GlobalStyle;
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/components/newLayout.tsx
index 28e7653c5..28e7653c5 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/components/newLayout.tsx
diff --git a/packages/website/ts/@next/components/newsletter_form.tsx b/packages/website/ts/components/newsletter_form.tsx
index 8572ccc5f..4a7abb7ec 100644
--- a/packages/website/ts/@next/components/newsletter_form.tsx
+++ b/packages/website/ts/components/newsletter_form.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled, { withTheme } from 'styled-components';
 
-import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
+import { ThemeValuesInterface } from 'ts/components/siteWrap';
 import { colors } from 'ts/style/colors';
 import { errorReporter } from 'ts/utils/error_reporter';
 
diff --git a/packages/website/ts/components/old_footer.tsx b/packages/website/ts/components/old_footer.tsx
new file mode 100644
index 000000000..6366bf4ea
--- /dev/null
+++ b/packages/website/ts/components/old_footer.tsx
@@ -0,0 +1,228 @@
+import { ALink, colors, Link } from '@0x/react-shared';
+import { ObjectMap } from '@0x/types';
+import * as _ from 'lodash';
+import DropDownMenu from 'material-ui/DropDownMenu';
+import MenuItem from 'material-ui/MenuItem';
+import * as React from 'react';
+
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { Deco, Key, Language, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+const ICON_DIMENSION = 16;
+
+const languageToMenuTitle = {
+    [Language.English]: 'English',
+    [Language.Russian]: 'Русский',
+    [Language.Spanish]: 'Español',
+    [Language.Korean]: '한국어',
+    [Language.Chinese]: '中文',
+};
+
+export interface FooterProps {
+    translate: Translate;
+    dispatcher: Dispatcher;
+    backgroundColor?: string;
+}
+
+interface FooterState {
+    selectedLanguage: Language;
+}
+
+export class Footer extends React.Component<FooterProps, FooterState> {
+    public static defaultProps = {
+        backgroundColor: colors.darkerGrey,
+    };
+    constructor(props: FooterProps) {
+        super(props);
+        this.state = {
+            selectedLanguage: props.translate.getLanguage(),
+        };
+    }
+    public render(): React.ReactNode {
+        const sectionNameToLinks: ObjectMap<ALink[]> = {
+            [Key.Documentation]: [
+                {
+                    title: 'Developer Home',
+                    to: WebsitePaths.Docs,
+                },
+                {
+                    title: '0x.js',
+                    to: WebsitePaths.ZeroExJs,
+                },
+                {
+                    title: this.props.translate.get(Key.SmartContracts, Deco.Cap),
+                    to: WebsitePaths.SmartContracts,
+                },
+                {
+                    title: this.props.translate.get(Key.Connect, Deco.Cap),
+                    to: WebsitePaths.Connect,
+                },
+                {
+                    title: this.props.translate.get(Key.Whitepaper, Deco.Cap),
+                    to: WebsitePaths.Whitepaper,
+                    shouldOpenInNewTab: true,
+                },
+                {
+                    title: this.props.translate.get(Key.Wiki, Deco.Cap),
+                    to: WebsitePaths.Wiki,
+                },
+            ],
+            [Key.Community]: [
+                {
+                    title: this.props.translate.get(Key.Discord, Deco.Cap),
+                    to: constants.URL_ZEROEX_CHAT,
+                    shouldOpenInNewTab: true,
+                },
+                {
+                    title: this.props.translate.get(Key.Blog, Deco.Cap),
+                    to: constants.URL_BLOG,
+                    shouldOpenInNewTab: true,
+                },
+                {
+                    title: 'Twitter',
+                    to: constants.URL_TWITTER,
+                    shouldOpenInNewTab: true,
+                },
+                {
+                    title: 'Reddit',
+                    to: constants.URL_REDDIT,
+                    shouldOpenInNewTab: true,
+                },
+                {
+                    title: this.props.translate.get(Key.Forum, Deco.Cap),
+                    to: constants.URL_DISCOURSE_FORUM,
+                    shouldOpenInNewTab: true,
+                },
+            ],
+            [Key.Organization]: [
+                {
+                    title: this.props.translate.get(Key.About, Deco.Cap),
+                    to: WebsitePaths.About,
+                },
+                {
+                    title: this.props.translate.get(Key.Careers, Deco.Cap),
+                    to: WebsitePaths.Careers,
+                },
+                {
+                    title: this.props.translate.get(Key.Contact, Deco.Cap),
+                    to: 'mailto:team@0x.org',
+                    shouldOpenInNewTab: true,
+                },
+            ],
+        };
+        const languageMenuItems = _.map(languageToMenuTitle, (menuTitle: string, language: Language) => {
+            return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />;
+        });
+        return (
+            <div className="relative pb4 pt2" style={{ backgroundColor: this.props.backgroundColor }}>
+                <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
+                    <div className="col lg-col-4 md-col-4 col-12 left">
+                        <div className="sm-mx-auto" style={{ width: 148 }}>
+                            <div>
+                                <img src="/images/protocol_logo_white.png" height="30" />
+                            </div>
+                            <div
+                                style={{
+                                    fontSize: 11,
+                                    color: colors.grey,
+                                    paddingLeft: 37,
+                                    paddingTop: 2,
+                                }}
+                            >
+                                © ZeroEx, Intl.
+                            </div>
+                            <div className="pt4 center">
+                                <DropDownMenu
+                                    labelStyle={{ color: colors.white }}
+                                    value={this.state.selectedLanguage}
+                                    onChange={this._updateLanguage.bind(this)}
+                                >
+                                    {languageMenuItems}
+                                </DropDownMenu>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4">
+                        <div className="col lg-col-4 md-col-4 col-12">
+                            <div className="lg-right md-right sm-center">
+                                {this._renderHeader(Key.Documentation)}
+                                {_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))}
+                            </div>
+                        </div>
+                        <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2">
+                            <div className="lg-right md-right sm-center">
+                                {this._renderHeader(Key.Community)}
+                                {_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))}
+                            </div>
+                        </div>
+                        <div className="col lg-col-4 md-col-4 col-12">
+                            <div className="lg-right md-right sm-center">
+                                {this._renderHeader(Key.Organization)}
+                                {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+    private _renderIcon(fileName: string): React.ReactNode {
+        return (
+            <div style={{ height: ICON_DIMENSION, width: ICON_DIMENSION }}>
+                <img src={`/images/social/${fileName}`} style={{ width: ICON_DIMENSION }} />
+            </div>
+        );
+    }
+    private _renderMenuItem(link: ALink): React.ReactNode {
+        const titleToIcon: { [title: string]: string } = {
+            [this.props.translate.get(Key.Discord, Deco.Cap)]: 'discord.png',
+            [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png',
+            Twitter: 'twitter.png',
+            Reddit: 'reddit.png',
+            [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png',
+        };
+        const iconIfExists = titleToIcon[link.title];
+        return (
+            <div key={link.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
+                <Link
+                    to={link.to}
+                    shouldOpenInNewTab={link.shouldOpenInNewTab}
+                    fontColor={colors.white}
+                    className="text-decoration-none"
+                >
+                    <div>
+                        {!_.isUndefined(iconIfExists) ? (
+                            <div className="inline-block">
+                                <div className="pr1 table-cell">{this._renderIcon(iconIfExists)}</div>
+                                <div className="table-cell">{link.title}</div>
+                            </div>
+                        ) : (
+                            link.title
+                        )}
+                    </div>
+                </Link>
+            </div>
+        );
+    }
+    private _renderHeader(key: Key): React.ReactNode {
+        const headerStyle = {
+            color: colors.grey400,
+            letterSpacing: 2,
+            fontFamily: 'Roboto Mono',
+            fontSize: 13,
+        };
+        return (
+            <div className="lg-pb2 md-pb2 sm-pt4" style={headerStyle}>
+                {this.props.translate.get(key, Deco.Upper)}
+            </div>
+        );
+    }
+    private _updateLanguage(_event: any, _index: number, value: Language): void {
+        this.setState({
+            selectedLanguage: value,
+        });
+        this.props.dispatcher.updateSelectedLanguage(value);
+    }
+}
diff --git a/packages/website/ts/components/redirector.tsx b/packages/website/ts/components/redirector.tsx
deleted file mode 100644
index a02693003..000000000
--- a/packages/website/ts/components/redirector.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { constants } from 'ts/utils/constants';
-
-interface RedirectorProps {
-    location: string;
-}
-
-export function Redirector(_props: RedirectorProps): void {
-    window.location.href = constants.URL_ANGELLIST;
-}
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/components/sections/landing/about.tsx
index 7b51b0d13..9c369d83a 100644
--- a/packages/website/ts/@next/components/sections/landing/about.tsx
+++ b/packages/website/ts/components/sections/landing/about.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Button } from 'ts/@next/components/button';
-import { Icon, InlineIconWrap } from 'ts/@next/components/icon';
-import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
-import { Paragraph } from 'ts/@next/components/text';
+import { Button } from 'ts/components/button';
+import { Icon, InlineIconWrap } from 'ts/components/icon';
+import { Column, FlexWrap, Section } from 'ts/components/newLayout';
+import { Paragraph } from 'ts/components/text';
 import { WebsitePaths } from 'ts/types';
 
 interface FigureProps {
diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/components/sections/landing/clients.tsx
index 4170fde46..9a68fbf4c 100644
--- a/packages/website/ts/@next/components/sections/landing/clients.tsx
+++ b/packages/website/ts/components/sections/landing/clients.tsx
@@ -1,9 +1,9 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
-import { Heading } from 'ts/@next/components/text';
+import { Heading } from 'ts/components/text';
 
-import { Section, WrapGrid } from 'ts/@next/components/newLayout';
+import { Section, WrapGrid } from 'ts/components/newLayout';
 
 interface ProjectLogo {
     name: string;
@@ -18,57 +18,57 @@ interface StyledProjectInterface {
 const projects: ProjectLogo[] = [
     {
         name: 'Radar Relay',
-        imageUrl: 'images/@next/clients/radar-relay.svg',
+        imageUrl: 'images/clients/radar-relay.svg',
         persistOnMobile: true,
     },
     {
         name: 'Paradex',
-        imageUrl: 'images/@next/clients/paradex.svg',
+        imageUrl: 'images/clients/paradex.svg',
         persistOnMobile: true,
     },
     {
         name: 'Star Bit Ex',
-        imageUrl: 'images/@next/clients/starbitex.svg',
+        imageUrl: 'images/clients/starbitex.svg',
     },
     {
         name: 'LedgerDex',
-        imageUrl: 'images/@next/clients/ledgerdex.svg',
+        imageUrl: 'images/clients/ledgerdex.svg',
     },
     {
         name: 'OpenRelay',
-        imageUrl: 'images/@next/clients/openrelay.svg',
+        imageUrl: 'images/clients/openrelay.svg',
         persistOnMobile: true,
     },
     {
         name: 'Bamboo Relay',
-        imageUrl: 'images/@next/clients/bamboo.svg',
+        imageUrl: 'images/clients/bamboo.svg',
         persistOnMobile: true,
     },
     {
         name: 'dEX',
-        imageUrl: 'images/@next/clients/ercdex.svg',
+        imageUrl: 'images/clients/ercdex.svg',
         persistOnMobile: true,
     },
     {
         name: 'emoon',
-        imageUrl: 'images/@next/clients/emoon.svg',
+        imageUrl: 'images/clients/emoon.svg',
         persistOnMobile: true,
     },
     {
         name: 'Gods Unchained',
-        imageUrl: 'images/@next/clients/godsUnchained.svg',
+        imageUrl: 'images/clients/godsUnchained.svg',
     },
     {
         name: 'Instex',
-        imageUrl: 'images/@next/clients/instex.svg',
+        imageUrl: 'images/clients/instex.svg',
     },
     {
         name: 'Lake Trade',
-        imageUrl: 'images/@next/clients/laketrade.svg',
+        imageUrl: 'images/clients/laketrade.svg',
     },
     {
         name: 'Veil',
-        imageUrl: 'images/@next/clients/veil.svg',
+        imageUrl: 'images/clients/veil.svg',
     },
 ];
 
diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/components/sections/landing/cta.tsx
index ec7f5d961..ec5a58a58 100644
--- a/packages/website/ts/@next/components/sections/landing/cta.tsx
+++ b/packages/website/ts/components/sections/landing/cta.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 
-import { BlockIconLink } from 'ts/@next/components/blockIconLink';
-import { Section } from 'ts/@next/components/newLayout';
+import { BlockIconLink } from 'ts/components/blockIconLink';
+import { Section } from 'ts/components/newLayout';
 
-import { AnimatedChatIcon } from 'ts/@next/components/animatedChatIcon';
-import { AnimatedCompassIcon } from 'ts/@next/components/animatedCompassIcon';
+import { AnimatedChatIcon } from 'ts/components/animatedChatIcon';
+import { AnimatedCompassIcon } from 'ts/components/animatedCompassIcon';
 import { WebsitePaths } from 'ts/types';
 
 interface Props {
diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/components/sections/landing/hero.tsx
index cf67ad66d..489757286 100644
--- a/packages/website/ts/@next/components/sections/landing/hero.tsx
+++ b/packages/website/ts/components/sections/landing/hero.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 
-import { Button } from 'ts/@next/components/button';
-import { Hero } from 'ts/@next/components/hero';
-import { LandingAnimation } from 'ts/@next/components/heroImage';
+import { Button } from 'ts/components/button';
+import { Hero } from 'ts/components/hero';
+import { LandingAnimation } from 'ts/components/heroImage';
 
-import { HeroAnimation } from 'ts/@next/components/heroAnimation';
+import { HeroAnimation } from 'ts/components/heroAnimation';
 import { WebsitePaths } from 'ts/types';
 
 export const SectionLandingHero = () => (
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/components/siteWrap.tsx
index 75cb9a268..316896dbb 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/components/siteWrap.tsx
@@ -3,9 +3,9 @@ import styled, { ThemeProvider } from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import { Footer } from 'ts/@next/components/footer';
-import { Header } from 'ts/@next/components/header';
-import { GlobalStyles } from 'ts/@next/constants/globalStyle';
+import { Footer } from 'ts/components/footer';
+import { Header } from 'ts/components/header';
+import { GlobalStyles } from 'ts/constants/globalStyle';
 
 interface Props {
     theme?: 'dark' | 'light' | 'gray';
diff --git a/packages/website/ts/@next/components/slider/slider.tsx b/packages/website/ts/components/slider/slider.tsx
index 33a352b9f..f0a29f894 100644
--- a/packages/website/ts/@next/components/slider/slider.tsx
+++ b/packages/website/ts/components/slider/slider.tsx
@@ -4,8 +4,8 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import { Icon } from 'ts/@next/components/icon';
-import { Heading, Paragraph } from 'ts/@next/components/text';
+import { Icon } from 'ts/components/icon';
+import { Heading, Paragraph } from 'ts/components/text';
 
 interface SliderProps {}
 
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/components/text.tsx
index 9f6ed9e7a..10f272e73 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/components/text.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities';
+import { getCSSPadding, PaddingInterface } from 'ts/constants/utilities';
 
 interface BaseTextInterface extends PaddingInterface {
     size?: 'default' | 'medium' | 'large' | 'small' | number;
diff --git a/packages/website/ts/components/ui/filled_image.tsx b/packages/website/ts/components/ui/filled_image.tsx
deleted file mode 100644
index 7f58ee5b9..000000000
--- a/packages/website/ts/components/ui/filled_image.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-export interface FilledImageProps {
-    src: string;
-}
-export const FilledImage = (props: FilledImageProps) => (
-    <div
-        style={{
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-            backgroundImage: `url(${props.src})`,
-            backgroundRepeat: 'no-repeat',
-            backgroundPosition: 'center',
-            backgroundSize: 'cover',
-        }}
-    />
-);
diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx
deleted file mode 100644
index d21b9fd0e..000000000
--- a/packages/website/ts/components/ui/input.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { colors } from '@0x/react-shared';
-import * as React from 'react';
-import { styled } from 'ts/style/theme';
-
-export interface InputProps {
-    className?: string;
-    value?: string;
-    width?: string;
-    fontSize?: string;
-    fontColor?: string;
-    border?: string;
-    padding?: string;
-    placeholderColor?: string;
-    placeholder?: string;
-    backgroundColor?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => (
-    <input className={className} value={value} onChange={onChange} placeholder={placeholder} />
-);
-
-export const Input = styled(PlainInput)`
-    font-size: ${props => props.fontSize};
-    width: ${props => props.width};
-    padding: ${props => props.padding};
-    border-radius: 3px;
-    box-sizing: border-box;
-    font-family: 'Roboto Mono';
-    color: ${props => props.fontColor};
-    border: ${props => props.border};
-    outline: none;
-    background-color: ${props => props.backgroundColor};
-    &::placeholder {
-        color: ${props => props.placeholderColor};
-    }
-`;
-
-Input.defaultProps = {
-    width: 'auto',
-    backgroundColor: colors.white,
-    fontColor: colors.darkestGrey,
-    placeholderColor: colors.darkGrey,
-    fontSize: '12px',
-    border: 'none',
-    padding: '0.8em 1.2em',
-};
-
-Input.displayName = 'Input';
diff --git a/packages/website/ts/components/ui/simple_loading.tsx b/packages/website/ts/components/ui/simple_loading.tsx
deleted file mode 100644
index 81744196d..000000000
--- a/packages/website/ts/components/ui/simple_loading.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import CircularProgress from 'material-ui/CircularProgress';
-import * as React from 'react';
-
-export interface SimpleLoadingProps {
-    message: string;
-}
-
-export const SimpleLoading = (props: SimpleLoadingProps) => {
-    return (
-        <div className="mx-auto pt3" style={{ maxWidth: 400, height: 409 }}>
-            <div className="relative" style={{ top: '50%', transform: 'translateY(-50%)', height: 95 }}>
-                <CircularProgress />
-                <div className="pt3 pb3">{props.message}</div>
-            </div>
-        </div>
-    );
-};
diff --git a/packages/website/ts/components/ui/typed_text.tsx b/packages/website/ts/components/ui/typed_text.tsx
deleted file mode 100644
index 6d38580b9..000000000
--- a/packages/website/ts/components/ui/typed_text.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import Typist from 'react-typist';
-
-import { Text, TextProps } from 'ts/components/ui/text';
-
-import 'react-typist/dist/Typist.css';
-
-export interface TypedTextProps extends TextProps {
-    textList: string[];
-    shouldRepeat?: boolean;
-    wordDelayMs?: number;
-    avgKeystrokeDelayMs?: number;
-    stdKeystrokeDelay?: number;
-}
-
-export interface TypedTextState {
-    cycleCount: number;
-}
-
-export class TypedText extends React.Component<TypedTextProps, TypedTextState> {
-    public static defaultProps = {
-        shouldRepeat: false,
-        avgKeystrokeDelayMs: 90,
-        wordDelayMs: 1000,
-    };
-    public state = {
-        cycleCount: 0,
-    };
-    public render(): React.ReactNode {
-        const {
-            textList,
-            shouldRepeat,
-            wordDelayMs,
-            avgKeystrokeDelayMs,
-            stdKeystrokeDelay,
-            // tslint:disable-next-line
-            ...textProps
-        } = this.props;
-        const { cycleCount } = this.state;
-        if (_.isEmpty(textList)) {
-            return null;
-        }
-        const typistChildren: React.ReactNode[] = [];
-        _.forEach(textList, text => {
-            typistChildren.push(
-                <Text key={`text-${text}-${cycleCount}`} {...textProps}>
-                    {text}
-                </Text>,
-            );
-            if (wordDelayMs) {
-                typistChildren.push(<Typist.Delay key={`delay-${text}-${cycleCount}`} ms={wordDelayMs} />);
-            }
-            typistChildren.push(<Typist.Backspace key={`backspace-${text}-${cycleCount}`} count={text.length} />);
-        });
-        return (
-            <Typist
-                avgTypingDelay={avgKeystrokeDelayMs}
-                stdTypingDelay={stdKeystrokeDelay}
-                className="inline"
-                key={`typist-key-${cycleCount}`}
-                onTypingDone={this._onTypingDone.bind(this)}
-            >
-                {typistChildren}
-            </Typist>
-        );
-    }
-    private _onTypingDone(): void {
-        if (this.props.shouldRepeat) {
-            this.setState({
-                cycleCount: this.state.cycleCount + 1,
-            });
-        }
-    }
-}
diff --git a/packages/website/ts/@next/constants/.gitkeep b/packages/website/ts/constants/.gitkeep
index e69de29bb..e69de29bb 100644
--- a/packages/website/ts/@next/constants/.gitkeep
+++ b/packages/website/ts/constants/.gitkeep
diff --git a/packages/website/ts/@next/constants/animations.tsx b/packages/website/ts/constants/animations.tsx
index 6a58c4b40..6a58c4b40 100644
--- a/packages/website/ts/@next/constants/animations.tsx
+++ b/packages/website/ts/constants/animations.tsx
diff --git a/packages/website/ts/@next/constants/cssReset.js b/packages/website/ts/constants/cssReset.js
index 4c5105b50..4c5105b50 100644
--- a/packages/website/ts/@next/constants/cssReset.js
+++ b/packages/website/ts/constants/cssReset.js
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/constants/globalStyle.tsx
index b095fafb5..5abb758c5 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/constants/globalStyle.tsx
@@ -1,5 +1,5 @@
 import { createGlobalStyle, withTheme } from 'styled-components';
-import { cssReset } from 'ts/@next/constants/cssReset';
+import { cssReset } from 'ts/constants/cssReset';
 
 export interface GlobalStyle {
     theme: {
diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/constants/utilities.tsx
index ee5c5b4ce..ee5c5b4ce 100644
--- a/packages/website/ts/@next/constants/utilities.tsx
+++ b/packages/website/ts/constants/utilities.tsx
diff --git a/packages/website/ts/containers/about.ts b/packages/website/ts/containers/about.ts
deleted file mode 100644
index 3b1c99d79..000000000
--- a/packages/website/ts/containers/about.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import { About as AboutComponent, AboutProps } from 'ts/pages/about/about';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { State } from 'ts/redux/reducer';
-import { Translate } from 'ts/utils/translate';
-
-interface ConnectedState {
-    translate: Translate;
-}
-
-interface ConnectedDispatch {
-    dispatcher: Dispatcher;
-}
-
-const mapStateToProps = (state: State, _ownProps: AboutProps): ConnectedState => ({
-    translate: state.translate,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
-    dispatcher: new Dispatcher(dispatch),
-});
-
-export const About: React.ComponentClass<AboutProps> = connect(mapStateToProps, mapDispatchToProps)(AboutComponent);
diff --git a/packages/website/ts/containers/jobs.ts b/packages/website/ts/containers/jobs.ts
deleted file mode 100644
index b18485882..000000000
--- a/packages/website/ts/containers/jobs.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import { Jobs as JobsComponent, JobsProps } from 'ts/pages/jobs/jobs';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { State } from 'ts/redux/reducer';
-import { ScreenWidths } from 'ts/types';
-import { Translate } from 'ts/utils/translate';
-
-interface ConnectedState {
-    translate: Translate;
-    screenWidth: ScreenWidths;
-}
-
-interface ConnectedDispatch {
-    dispatcher: Dispatcher;
-}
-
-const mapStateToProps = (state: State, _ownProps: JobsProps): ConnectedState => ({
-    translate: state.translate,
-    screenWidth: state.screenWidth,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
-    dispatcher: new Dispatcher(dispatch),
-});
-
-export const Jobs: React.ComponentClass<JobsProps> = connect(mapStateToProps, mapDispatchToProps)(JobsComponent);
diff --git a/packages/website/ts/containers/landing.ts b/packages/website/ts/containers/landing.ts
deleted file mode 100644
index 972ed4c23..000000000
--- a/packages/website/ts/containers/landing.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import { Landing as LandingComponent, LandingProps } from 'ts/pages/landing/landing';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { State } from 'ts/redux/reducer';
-import { Translate } from 'ts/utils/translate';
-
-interface ConnectedState {
-    translate: Translate;
-}
-
-interface ConnectedDispatch {
-    dispatcher: Dispatcher;
-}
-
-const mapStateToProps = (state: State, _ownProps: LandingProps): ConnectedState => ({
-    translate: state.translate,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
-    dispatcher: new Dispatcher(dispatch),
-});
-
-export const Landing: React.ComponentClass<LandingProps> = connect(mapStateToProps, mapDispatchToProps)(
-    LandingComponent,
-);
diff --git a/packages/website/ts/containers/launch_kit.ts b/packages/website/ts/containers/launch_kit.ts
deleted file mode 100644
index 2557f38a5..000000000
--- a/packages/website/ts/containers/launch_kit.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import { LaunchKit as LaunchKitComponent, LaunchKitProps } from 'ts/pages/launch_kit/launch_kit';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { State } from 'ts/redux/reducer';
-import { Translate } from 'ts/utils/translate';
-
-interface ConnectedState {
-    translate: Translate;
-}
-
-interface ConnectedDispatch {
-    dispatcher: Dispatcher;
-}
-
-const mapStateToProps = (state: State, _ownProps: LaunchKitProps): ConnectedState => ({
-    translate: state.translate,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
-    dispatcher: new Dispatcher(dispatch),
-});
-
-export const LaunchKit: React.ComponentClass<LaunchKitProps> = connect(mapStateToProps, mapDispatchToProps)(
-    LaunchKitComponent,
-);
diff --git a/packages/website/ts/@next/icons/illustrations/0x.svg b/packages/website/ts/icons/illustrations/0x.svg
index b0810f751..b0810f751 100755
--- a/packages/website/ts/@next/icons/illustrations/0x.svg
+++ b/packages/website/ts/icons/illustrations/0x.svg
diff --git a/packages/website/ts/@next/icons/illustrations/buildBusiness.svg b/packages/website/ts/icons/illustrations/buildBusiness.svg
index 48e5b3b1c..48e5b3b1c 100755
--- a/packages/website/ts/@next/icons/illustrations/buildBusiness.svg
+++ b/packages/website/ts/icons/illustrations/buildBusiness.svg
diff --git a/packages/website/ts/@next/icons/illustrations/checkmark.svg b/packages/website/ts/icons/illustrations/checkmark.svg
index e17a7ab8b..e17a7ab8b 100644
--- a/packages/website/ts/@next/icons/illustrations/checkmark.svg
+++ b/packages/website/ts/icons/illustrations/checkmark.svg
diff --git a/packages/website/ts/@next/icons/illustrations/code-repo.svg b/packages/website/ts/icons/illustrations/code-repo.svg
index 43e412198..43e412198 100644
--- a/packages/website/ts/@next/icons/illustrations/code-repo.svg
+++ b/packages/website/ts/icons/illustrations/code-repo.svg
diff --git a/packages/website/ts/@next/icons/illustrations/coin.svg b/packages/website/ts/icons/illustrations/coin.svg
index a1fb123a4..a1fb123a4 100644
--- a/packages/website/ts/@next/icons/illustrations/coin.svg
+++ b/packages/website/ts/icons/illustrations/coin.svg
diff --git a/packages/website/ts/@next/icons/illustrations/consistently-ship.svg b/packages/website/ts/icons/illustrations/consistently-ship.svg
index 733655a3f..733655a3f 100644
--- a/packages/website/ts/@next/icons/illustrations/consistently-ship.svg
+++ b/packages/website/ts/icons/illustrations/consistently-ship.svg
diff --git a/packages/website/ts/@next/icons/illustrations/customize.svg b/packages/website/ts/icons/illustrations/customize.svg
index 1f018ee7a..1f018ee7a 100644
--- a/packages/website/ts/@next/icons/illustrations/customize.svg
+++ b/packages/website/ts/icons/illustrations/customize.svg
diff --git a/packages/website/ts/@next/icons/illustrations/decentralisedLoans.svg b/packages/website/ts/icons/illustrations/decentralisedLoans.svg
index 72d0de7fc..72d0de7fc 100755
--- a/packages/website/ts/@next/icons/illustrations/decentralisedLoans.svg
+++ b/packages/website/ts/icons/illustrations/decentralisedLoans.svg
diff --git a/packages/website/ts/@next/icons/illustrations/description.svg b/packages/website/ts/icons/illustrations/description.svg
index 1887b182e..1887b182e 100755
--- a/packages/website/ts/@next/icons/illustrations/description.svg
+++ b/packages/website/ts/icons/illustrations/description.svg
diff --git a/packages/website/ts/@next/icons/illustrations/descriptionBolt.svg b/packages/website/ts/icons/illustrations/descriptionBolt.svg
index 45e51240f..45e51240f 100755
--- a/packages/website/ts/@next/icons/illustrations/descriptionBolt.svg
+++ b/packages/website/ts/icons/illustrations/descriptionBolt.svg
diff --git a/packages/website/ts/@next/icons/illustrations/descriptionCoin.svg b/packages/website/ts/icons/illustrations/descriptionCoin.svg
index d1015b98d..d1015b98d 100755
--- a/packages/website/ts/@next/icons/illustrations/descriptionCoin.svg
+++ b/packages/website/ts/icons/illustrations/descriptionCoin.svg
diff --git a/packages/website/ts/@next/icons/illustrations/descriptionCopy.svg b/packages/website/ts/icons/illustrations/descriptionCopy.svg
index 6c9b5f0fc..6c9b5f0fc 100755
--- a/packages/website/ts/@next/icons/illustrations/descriptionCopy.svg
+++ b/packages/website/ts/icons/illustrations/descriptionCopy.svg
diff --git a/packages/website/ts/@next/icons/illustrations/descriptionFlask.svg b/packages/website/ts/icons/illustrations/descriptionFlask.svg
index 703b069d5..703b069d5 100755
--- a/packages/website/ts/@next/icons/illustrations/descriptionFlask.svg
+++ b/packages/website/ts/icons/illustrations/descriptionFlask.svg
diff --git a/packages/website/ts/@next/icons/illustrations/eficientDesign.svg b/packages/website/ts/icons/illustrations/eficientDesign.svg
index 6b8f852c3..6b8f852c3 100755
--- a/packages/website/ts/@next/icons/illustrations/eficientDesign.svg
+++ b/packages/website/ts/icons/illustrations/eficientDesign.svg
diff --git a/packages/website/ts/@next/icons/illustrations/eth-based-tokens.svg b/packages/website/ts/icons/illustrations/eth-based-tokens.svg
index b0370d234..b0370d234 100644
--- a/packages/website/ts/@next/icons/illustrations/eth-based-tokens.svg
+++ b/packages/website/ts/icons/illustrations/eth-based-tokens.svg
diff --git a/packages/website/ts/@next/icons/illustrations/extensibleArchitecture.svg b/packages/website/ts/icons/illustrations/extensibleArchitecture.svg
index 7674b3289..7674b3289 100755
--- a/packages/website/ts/@next/icons/illustrations/extensibleArchitecture.svg
+++ b/packages/website/ts/icons/illustrations/extensibleArchitecture.svg
diff --git a/packages/website/ts/@next/icons/illustrations/flexibleIntegration.svg b/packages/website/ts/icons/illustrations/flexibleIntegration.svg
index dee44d4c0..dee44d4c0 100755
--- a/packages/website/ts/@next/icons/illustrations/flexibleIntegration.svg
+++ b/packages/website/ts/icons/illustrations/flexibleIntegration.svg
diff --git a/packages/website/ts/@next/icons/illustrations/flexibleIntegration0xInstant.svg b/packages/website/ts/icons/illustrations/flexibleIntegration0xInstant.svg
index bb5116b8b..bb5116b8b 100755
--- a/packages/website/ts/@next/icons/illustrations/flexibleIntegration0xInstant.svg
+++ b/packages/website/ts/icons/illustrations/flexibleIntegration0xInstant.svg
diff --git a/packages/website/ts/@next/icons/illustrations/flexibleOrders.svg b/packages/website/ts/icons/illustrations/flexibleOrders.svg
index f4545ae38..f4545ae38 100755
--- a/packages/website/ts/@next/icons/illustrations/flexibleOrders.svg
+++ b/packages/website/ts/icons/illustrations/flexibleOrders.svg
diff --git a/packages/website/ts/@next/icons/illustrations/gamingAndCollectibles.svg b/packages/website/ts/icons/illustrations/gamingAndCollectibles.svg
index c66af5088..c66af5088 100755
--- a/packages/website/ts/@next/icons/illustrations/gamingAndCollectibles.svg
+++ b/packages/website/ts/icons/illustrations/gamingAndCollectibles.svg
diff --git a/packages/website/ts/@next/icons/illustrations/generateRevenueForYourBusiness-large.svg b/packages/website/ts/icons/illustrations/generateRevenueForYourBusiness-large.svg
index 681b8c41e..681b8c41e 100755
--- a/packages/website/ts/@next/icons/illustrations/generateRevenueForYourBusiness-large.svg
+++ b/packages/website/ts/icons/illustrations/generateRevenueForYourBusiness-large.svg
diff --git a/packages/website/ts/@next/icons/illustrations/getInTouch.svg b/packages/website/ts/icons/illustrations/getInTouch.svg
index f44365351..f44365351 100755
--- a/packages/website/ts/@next/icons/illustrations/getInTouch.svg
+++ b/packages/website/ts/icons/illustrations/getInTouch.svg
diff --git a/packages/website/ts/@next/icons/illustrations/getStarted.svg b/packages/website/ts/icons/illustrations/getStarted.svg
index 627e1810b..627e1810b 100644
--- a/packages/website/ts/@next/icons/illustrations/getStarted.svg
+++ b/packages/website/ts/icons/illustrations/getStarted.svg
diff --git a/packages/website/ts/@next/icons/illustrations/launchKit.svg b/packages/website/ts/icons/illustrations/launchKit.svg
index fa11584af..fa11584af 100644
--- a/packages/website/ts/@next/icons/illustrations/launchKit.svg
+++ b/packages/website/ts/icons/illustrations/launchKit.svg
diff --git a/packages/website/ts/@next/icons/illustrations/launchKit_versionB.svg b/packages/website/ts/icons/illustrations/launchKit_versionB.svg
index 45f9ecc75..45f9ecc75 100755
--- a/packages/website/ts/@next/icons/illustrations/launchKit_versionB.svg
+++ b/packages/website/ts/icons/illustrations/launchKit_versionB.svg
diff --git a/packages/website/ts/@next/icons/illustrations/legalResources.svg b/packages/website/ts/icons/illustrations/legalResources.svg
index a8ba7fceb..a8ba7fceb 100755
--- a/packages/website/ts/@next/icons/illustrations/legalResources.svg
+++ b/packages/website/ts/icons/illustrations/legalResources.svg
diff --git a/packages/website/ts/@next/icons/illustrations/logo-mark.svg b/packages/website/ts/icons/illustrations/logo-mark.svg
index 4e9c9d2cb..4e9c9d2cb 100644
--- a/packages/website/ts/@next/icons/illustrations/logo-mark.svg
+++ b/packages/website/ts/icons/illustrations/logo-mark.svg
diff --git a/packages/website/ts/@next/icons/illustrations/logo-outlined.svg b/packages/website/ts/icons/illustrations/logo-outlined.svg
index a09d2355f..a09d2355f 100644
--- a/packages/website/ts/@next/icons/illustrations/logo-outlined.svg
+++ b/packages/website/ts/icons/illustrations/logo-outlined.svg
diff --git a/packages/website/ts/@next/icons/illustrations/long-term-impact.svg b/packages/website/ts/icons/illustrations/long-term-impact.svg
index dbd051598..dbd051598 100644
--- a/packages/website/ts/@next/icons/illustrations/long-term-impact.svg
+++ b/packages/website/ts/icons/illustrations/long-term-impact.svg
diff --git a/packages/website/ts/@next/icons/illustrations/low-cost.svg b/packages/website/ts/icons/illustrations/low-cost.svg
index 530cbdd79..530cbdd79 100644
--- a/packages/website/ts/@next/icons/illustrations/low-cost.svg
+++ b/packages/website/ts/icons/illustrations/low-cost.svg
diff --git a/packages/website/ts/@next/icons/illustrations/marketingDesignHelp.svg b/packages/website/ts/icons/illustrations/marketingDesignHelp.svg
index 1e65bd54f..1e65bd54f 100755
--- a/packages/website/ts/@next/icons/illustrations/marketingDesignHelp.svg
+++ b/packages/website/ts/icons/illustrations/marketingDesignHelp.svg
diff --git a/packages/website/ts/@next/icons/illustrations/milestoneGrants.svg b/packages/website/ts/icons/illustrations/milestoneGrants.svg
index 2c581864f..2c581864f 100755
--- a/packages/website/ts/@next/icons/illustrations/milestoneGrants.svg
+++ b/packages/website/ts/icons/illustrations/milestoneGrants.svg
diff --git a/packages/website/ts/@next/icons/illustrations/networkedLiquidity-small.svg b/packages/website/ts/icons/illustrations/networkedLiquidity-small.svg
index 4b65a5353..4b65a5353 100755
--- a/packages/website/ts/@next/icons/illustrations/networkedLiquidity-small.svg
+++ b/packages/website/ts/icons/illustrations/networkedLiquidity-small.svg
diff --git a/packages/website/ts/@next/icons/illustrations/networkedLiquidity.svg b/packages/website/ts/icons/illustrations/networkedLiquidity.svg
index c50ba7e7c..c50ba7e7c 100755
--- a/packages/website/ts/@next/icons/illustrations/networkedLiquidity.svg
+++ b/packages/website/ts/icons/illustrations/networkedLiquidity.svg
diff --git a/packages/website/ts/@next/icons/illustrations/orderBooks.svg b/packages/website/ts/icons/illustrations/orderBooks.svg
index 44e001ff0..44e001ff0 100755
--- a/packages/website/ts/@next/icons/illustrations/orderBooks.svg
+++ b/packages/website/ts/icons/illustrations/orderBooks.svg
diff --git a/packages/website/ts/@next/icons/illustrations/predictionMarkets.svg b/packages/website/ts/icons/illustrations/predictionMarkets.svg
index 820b79416..820b79416 100755
--- a/packages/website/ts/@next/icons/illustrations/predictionMarkets.svg
+++ b/packages/website/ts/icons/illustrations/predictionMarkets.svg
diff --git a/packages/website/ts/@next/icons/illustrations/protocol.svg b/packages/website/ts/icons/illustrations/protocol.svg
index 5c9c1531a..5c9c1531a 100644
--- a/packages/website/ts/@next/icons/illustrations/protocol.svg
+++ b/packages/website/ts/icons/illustrations/protocol.svg
diff --git a/packages/website/ts/@next/icons/illustrations/ready-to-build.svg b/packages/website/ts/icons/illustrations/ready-to-build.svg
index a26a4e236..a26a4e236 100644
--- a/packages/website/ts/@next/icons/illustrations/ready-to-build.svg
+++ b/packages/website/ts/icons/illustrations/ready-to-build.svg
diff --git a/packages/website/ts/@next/icons/illustrations/recruitingSupport.svg b/packages/website/ts/icons/illustrations/recruitingSupport.svg
index d630b23d7..d630b23d7 100755
--- a/packages/website/ts/@next/icons/illustrations/recruitingSupport.svg
+++ b/packages/website/ts/icons/illustrations/recruitingSupport.svg
diff --git a/packages/website/ts/@next/icons/illustrations/right-thing.svg b/packages/website/ts/icons/illustrations/right-thing.svg
index eba2bbc36..eba2bbc36 100644
--- a/packages/website/ts/@next/icons/illustrations/right-thing.svg
+++ b/packages/website/ts/icons/illustrations/right-thing.svg
diff --git a/packages/website/ts/@next/icons/illustrations/robustSmartContracts.svg b/packages/website/ts/icons/illustrations/robustSmartContracts.svg
index 060f2d00c..060f2d00c 100755
--- a/packages/website/ts/@next/icons/illustrations/robustSmartContracts.svg
+++ b/packages/website/ts/icons/illustrations/robustSmartContracts.svg
diff --git a/packages/website/ts/@next/icons/illustrations/rocketship.svg b/packages/website/ts/icons/illustrations/rocketship.svg
index e9b4b83ab..e9b4b83ab 100644
--- a/packages/website/ts/@next/icons/illustrations/rocketship.svg
+++ b/packages/website/ts/icons/illustrations/rocketship.svg
diff --git a/packages/website/ts/@next/icons/illustrations/secureTrading.svg b/packages/website/ts/icons/illustrations/secureTrading.svg
index 21912961d..21912961d 100755
--- a/packages/website/ts/@next/icons/illustrations/secureTrading.svg
+++ b/packages/website/ts/icons/illustrations/secureTrading.svg
diff --git a/packages/website/ts/@next/icons/illustrations/social-discord.svg b/packages/website/ts/icons/illustrations/social-discord.svg
index 144f6e061..144f6e061 100644
--- a/packages/website/ts/@next/icons/illustrations/social-discord.svg
+++ b/packages/website/ts/icons/illustrations/social-discord.svg
diff --git a/packages/website/ts/@next/icons/illustrations/social-fb.svg b/packages/website/ts/icons/illustrations/social-fb.svg
index e50cf107a..e50cf107a 100644
--- a/packages/website/ts/@next/icons/illustrations/social-fb.svg
+++ b/packages/website/ts/icons/illustrations/social-fb.svg
diff --git a/packages/website/ts/@next/icons/illustrations/social-github.svg b/packages/website/ts/icons/illustrations/social-github.svg
index ef0025582..ef0025582 100644
--- a/packages/website/ts/@next/icons/illustrations/social-github.svg
+++ b/packages/website/ts/icons/illustrations/social-github.svg
diff --git a/packages/website/ts/@next/icons/illustrations/social-newsletter.svg b/packages/website/ts/icons/illustrations/social-newsletter.svg
index 572cb8ed9..572cb8ed9 100644
--- a/packages/website/ts/@next/icons/illustrations/social-newsletter.svg
+++ b/packages/website/ts/icons/illustrations/social-newsletter.svg
diff --git a/packages/website/ts/@next/icons/illustrations/social-reddit.svg b/packages/website/ts/icons/illustrations/social-reddit.svg
index b93510b36..b93510b36 100644
--- a/packages/website/ts/@next/icons/illustrations/social-reddit.svg
+++ b/packages/website/ts/icons/illustrations/social-reddit.svg
diff --git a/packages/website/ts/@next/icons/illustrations/social-twitter.svg b/packages/website/ts/icons/illustrations/social-twitter.svg
index bc8e2f7d7..bc8e2f7d7 100644
--- a/packages/website/ts/@next/icons/illustrations/social-twitter.svg
+++ b/packages/website/ts/icons/illustrations/social-twitter.svg
diff --git a/packages/website/ts/@next/icons/illustrations/stableTokens.svg b/packages/website/ts/icons/illustrations/stableTokens.svg
index 9e854b0e6..9e854b0e6 100755
--- a/packages/website/ts/@next/icons/illustrations/stableTokens.svg
+++ b/packages/website/ts/icons/illustrations/stableTokens.svg
diff --git a/packages/website/ts/@next/icons/illustrations/standardForExchange.svg b/packages/website/ts/icons/illustrations/standardForExchange.svg
index f8075ed6d..f8075ed6d 100755
--- a/packages/website/ts/@next/icons/illustrations/standardForExchange.svg
+++ b/packages/website/ts/icons/illustrations/standardForExchange.svg
diff --git a/packages/website/ts/@next/icons/illustrations/support.svg b/packages/website/ts/icons/illustrations/support.svg
index 368e7cc02..368e7cc02 100644
--- a/packages/website/ts/@next/icons/illustrations/support.svg
+++ b/packages/website/ts/icons/illustrations/support.svg
diff --git a/packages/website/ts/@next/icons/illustrations/supportForAllEthereumStandards-large.svg b/packages/website/ts/icons/illustrations/supportForAllEthereumStandards-large.svg
index 1f840204a..1f840204a 100755
--- a/packages/website/ts/@next/icons/illustrations/supportForAllEthereumStandards-large.svg
+++ b/packages/website/ts/icons/illustrations/supportForAllEthereumStandards-large.svg
diff --git a/packages/website/ts/@next/icons/illustrations/supportForAllEthereumStandards.svg b/packages/website/ts/icons/illustrations/supportForAllEthereumStandards.svg
index 32a4d8602..32a4d8602 100755
--- a/packages/website/ts/@next/icons/illustrations/supportForAllEthereumStandards.svg
+++ b/packages/website/ts/icons/illustrations/supportForAllEthereumStandards.svg
diff --git a/packages/website/ts/@next/icons/illustrations/techSupport.svg b/packages/website/ts/icons/illustrations/techSupport.svg
index e52084f67..e52084f67 100755
--- a/packages/website/ts/@next/icons/illustrations/techSupport.svg
+++ b/packages/website/ts/icons/illustrations/techSupport.svg
diff --git a/packages/website/ts/@next/icons/illustrations/tokens.svg b/packages/website/ts/icons/illustrations/tokens.svg
index 966615265..966615265 100644
--- a/packages/website/ts/@next/icons/illustrations/tokens.svg
+++ b/packages/website/ts/icons/illustrations/tokens.svg
diff --git a/packages/website/ts/@next/icons/illustrations/vcIntroductions.svg b/packages/website/ts/icons/illustrations/vcIntroductions.svg
index 024cadab3..024cadab3 100755
--- a/packages/website/ts/@next/icons/illustrations/vcIntroductions.svg
+++ b/packages/website/ts/icons/illustrations/vcIntroductions.svg
diff --git a/packages/website/ts/@next/icons/logo-with-type.svg b/packages/website/ts/icons/logo-with-type.svg
index 25abf149e..25abf149e 100644
--- a/packages/website/ts/@next/icons/logo-with-type.svg
+++ b/packages/website/ts/icons/logo-with-type.svg
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 3f0c1c28c..df77e4b76 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -16,15 +16,15 @@ import { WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
 import { muiTheme } from 'ts/utils/mui_theme';
 
 // Next (new website) routes. We should rename them later
-import { NextAboutJobs } from 'ts/@next/pages/about/jobs';
-import { NextAboutMission } from 'ts/@next/pages/about/mission';
-import { NextAboutPress } from 'ts/@next/pages/about/press';
-import { NextAboutTeam } from 'ts/@next/pages/about/team';
-import { NextEcosystem } from 'ts/@next/pages/ecosystem';
-import { Next0xInstant } from 'ts/@next/pages/instant';
-import { NextLanding } from 'ts/@next/pages/landing';
-import { NextLaunchKit } from 'ts/@next/pages/launch_kit';
-import { NextWhy } from 'ts/@next/pages/why';
+import { NextAboutJobs } from 'ts/pages/about/jobs';
+import { NextAboutMission } from 'ts/pages/about/mission';
+import { NextAboutPress } from 'ts/pages/about/press';
+import { NextAboutTeam } from 'ts/pages/about/team';
+import { NextEcosystem } from 'ts/pages/ecosystem';
+import { Next0xInstant } from 'ts/pages/instant';
+import { NextLanding } from 'ts/pages/landing';
+import { NextLaunchKit } from 'ts/pages/launch_kit';
+import { NextWhy } from 'ts/pages/why';
 
 // Check if we've introduced an update that requires us to clear the tradeHistory local storage entries
 tradeHistoryStorage.clearIfRequired();
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
deleted file mode 100644
index 81a3f59e1..000000000
--- a/packages/website/ts/pages/about/about.tsx
+++ /dev/null
@@ -1,421 +0,0 @@
-import { colors, Link, Styles } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-import * as DocumentTitle from 'react-document-title';
-import { Footer } from 'ts/components/footer';
-import { TopBar } from 'ts/components/top_bar/top_bar';
-import { Profile } from 'ts/pages/about/profile';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { ProfileInfo, WebsitePaths } from 'ts/types';
-import { Translate } from 'ts/utils/translate';
-import { utils } from 'ts/utils/utils';
-
-const teamRow1: ProfileInfo[] = [
-    {
-        name: 'Will Warren',
-        title: 'Co-founder & CEO',
-        description: `Smart contract R&D. Previously applied physics at Los Alamos \
-                      Nat Lab. Mechanical engineering at UC San Diego. PhD dropout.`,
-        image: '/images/team/will.jpg',
-        linkedIn: 'https://www.linkedin.com/in/will-warren-92aab62b/',
-        github: 'https://github.com/willwarren89',
-        medium: 'https://medium.com/@willwarren89',
-    },
-    {
-        name: 'Amir Bandeali',
-        title: 'Co-founder & CTO',
-        description: `Smart contract R&D. Previously fixed income trader at DRW. \
-                      Finance at University of Illinois, Urbana-Champaign.`,
-        image: '/images/team/amir.png',
-        linkedIn: 'https://www.linkedin.com/in/abandeali1/',
-        github: 'https://github.com/abandeali1',
-        medium: 'https://medium.com/@abandeali1',
-    },
-    {
-        name: 'Fabio Berger',
-        title: 'Senior Engineer',
-        description: `Full-stack blockchain engineer. Previously software engineer \
-                      at Airtable and founder of WealthLift. Computer Science at Duke.`,
-        image: '/images/team/fabio.jpg',
-        linkedIn: 'https://www.linkedin.com/in/fabio-berger-03ab261a/',
-        github: 'https://github.com/fabioberger',
-        medium: 'https://medium.com/@fabioberger',
-    },
-];
-
-const teamRow2: ProfileInfo[] = [
-    {
-        name: 'Alex Xu',
-        title: 'Director of Operations',
-        description: `Strategy and operations. Previously digital marketing at Google \
-                      and vendor management at Amazon. Economics at UC San Diego.`,
-        image: '/images/team/alex.jpg',
-        linkedIn: 'https://www.linkedin.com/in/alex-xu/',
-        github: '',
-        medium: 'https://medium.com/@aqxu',
-    },
-    {
-        name: 'Leonid Logvinov',
-        title: 'Engineer',
-        description: `Full-stack blockchain engineer. Previously blockchain engineer \
-                      at Neufund. Computer Science at University of Warsaw.`,
-        image: '/images/team/leonid.png',
-        linkedIn: 'https://www.linkedin.com/in/leonidlogvinov/',
-        github: 'https://github.com/LogvinovLeon',
-        medium: 'https://medium.com/@Logvinov',
-    },
-    {
-        name: 'Ben Burns',
-        title: 'Designer',
-        description: `Product, motion, and graphic designer. Previously designer \
-                      at Airtable and Apple. Digital Design at University of Cincinnati.`,
-        image: '/images/team/ben.jpg',
-        linkedIn: 'https://www.linkedin.com/in/ben-burns-30170478/',
-        github: '',
-        medium: '',
-    },
-];
-
-const teamRow3: ProfileInfo[] = [
-    {
-        name: 'Brandon Millman',
-        title: 'Senior Engineer',
-        description: `Full-stack engineer. Previously senior software engineer at \
-                      Twitter. Computer Science and Electrical Engineering at Duke.`,
-        image: '/images/team/brandon.png',
-        linkedIn: 'https://www.linkedin.com/in/brandon-millman-b093a022/',
-        github: 'https://github.com/BMillman19',
-        medium: 'https://medium.com/@bchillman',
-    },
-    {
-        name: 'Tom Schmidt',
-        title: 'Product Manager',
-        description: `Previously engineering at Apple, product management at Facebook and Instagram. Computer Science at Stanford.`,
-        image: '/images/team/tom.jpg',
-        linkedIn: 'https://www.linkedin.com/in/tomhschmidt/',
-        github: 'https://github.com/tomhschmidt',
-        medium: '',
-    },
-    {
-        name: 'Jacob Evans',
-        title: 'Ecosystem Engineer',
-        description: `Previously software engineer at Qantas and RSA Security.`,
-        image: '/images/team/jacob.jpg',
-        linkedIn: 'https://www.linkedin.com/in/dekzter/',
-        github: 'https://github.com/dekz',
-        medium: '',
-    },
-];
-
-const teamRow4: ProfileInfo[] = [
-    {
-        name: 'Blake Henderson',
-        title: 'Operations Associate',
-        description: `Operations and Analytics. Previously analytics at LinkedIn. Economics at UC San Diego.`,
-        image: '/images/team/blake.jpg',
-        linkedIn: 'https://www.linkedin.com/in/blakerhenderson/',
-        github: '',
-        medium: '',
-    },
-    {
-        name: 'Zack Skelly',
-        title: 'Lead Recruiter',
-        description: `Talent. Previously first recruiter at Heap, recruiting at Dropbox and Google. English Rhetoric and Composition at Pepperdine.`,
-        image: '/images/team/zach.png',
-        linkedIn: 'https://www.linkedin.com/in/zackaryskelly/',
-        github: '',
-        medium: '',
-    },
-    {
-        name: 'Greg Hysen',
-        title: 'Blockchain Engineer',
-        description: `Smart contract R&D. Previously lead distributed systems engineer at Hivemapper. Computer Science at University of Waterloo.`,
-        image: '/images/team/greg.jpeg',
-        linkedIn: 'https://www.linkedin.com/in/gregory-hysen-71741463/',
-        github: 'https://github.com/hysz',
-        medium: '',
-    },
-];
-
-const teamRow5: ProfileInfo[] = [
-    {
-        name: 'Remco Bloemen',
-        title: 'Technical Fellow',
-        description: `Previously cofounder at Neufund and Coblue. Part III at Cambridge. PhD dropout at Twente Business School.`,
-        image: '/images/team/remco.jpeg',
-        linkedIn: 'https://www.linkedin.com/in/remcobloemen/',
-        github: 'http://github.com/recmo',
-        medium: '',
-    },
-    {
-        name: 'Francesco Agosti',
-        title: 'Engineer',
-        description: `Full-stack engineer. Previously senior software engineer at Yelp. Computer Science at Duke.`,
-        image: 'images/team/fragosti.png',
-        linkedIn: 'https://www.linkedin.com/in/fragosti/',
-        github: 'http://github.com/fragosti',
-    },
-    {
-        name: 'Mel Oberto',
-        title: 'Office Ops / Executive Assistant',
-        description: `Daily Operations. Previously People Operations Associate at Heap. Marketing and MBA at Sacred Heart University.`,
-        image: 'images/team/mel.png',
-        linkedIn: 'https://www.linkedin.com/in/melanieoberto',
-    },
-];
-
-const teamRow6: ProfileInfo[] = [
-    {
-        name: 'Alex Browne',
-        title: 'Engineer in Residence',
-        description: `Full-stack blockchain engineer. Previously at Plaid. Open source guru and footgun dismantler. Computer Science and Electrical Engineering at Duke.`,
-        image: 'images/team/alexbrowne.png',
-        linkedIn: 'https://www.linkedin.com/in/stephenalexbrowne/',
-        github: 'http://github.com/albrow',
-    },
-    {
-        name: 'Peter Zeitz',
-        title: 'Research Fellow',
-        description: `Researching decentralized governance. Previously Assistant Professor of Economics at National University of Singapore Business School. PhD in Economics at UCLA.`,
-        image: 'images/team/peter.jpg',
-        linkedIn: 'https://www.linkedin.com/in/peter-z-7b9595163/',
-    },
-    {
-        name: 'Chris Kalani',
-        title: 'Director of Design',
-        description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`,
-        image: 'images/team/chris.png',
-        linkedIn: 'https://www.linkedin.com/in/chriskalani/',
-        github: 'https://github.com/chriskalani',
-    },
-];
-
-const teamRow7: ProfileInfo[] = [
-    {
-        name: 'Clay Robbins',
-        title: 'Ecosystem Development Lead',
-        description: `Growth & Business Development. Previously product and partnerships at Square. Economics at Dartmouth College.`,
-        image: 'images/team/clay.png',
-        linkedIn: 'https://www.linkedin.com/in/robbinsclay/',
-    },
-    {
-        name: 'Matt Taylor',
-        title: 'Marketing Lead',
-        description: `Growth & Marketing. Previously marketing at Abra and Square. Economics and Philosophy at Claremont McKenna College.`,
-        image: 'images/team/matt.jpg',
-        linkedIn: 'https://www.linkedin.com/in/mattytay/',
-    },
-    {
-        name: 'Eugene Aumson',
-        title: 'Engineer',
-        description: `Developer Experience. Previously senior software engineer in foreign exchange applications at Bloomberg LP.`,
-        image: 'images/team/gene.jpg',
-        linkedIn: 'https://www.linkedin.com/in/aumson/',
-        github: 'https://github.com/feuGeneA',
-    },
-];
-
-const teamRow8: ProfileInfo[] = [
-    {
-        name: 'Weijie Wu',
-        title: 'Research Fellow',
-        description: `Researching decentralized governance. Previously Researcher at Huawei and Assistant Professor at Shanghai Jiao Tong University. PhD in Computer Science at The Chinese University of Hong Kong.`,
-        image: 'images/team/weijie.png',
-        linkedIn: 'https://www.linkedin.com/in/weijiewu/',
-    },
-    {
-        name: 'Rahul Singireddy',
-        title: 'Relayer Success Manager',
-        description: `Previously community at Zeppelin, growth at Dharma, and cryptocurrency contributor at Forbes. Symbolic Systems at Stanford.`,
-        image: 'images/team/rahul.png',
-        linkedIn: 'https://www.linkedin.com/in/rahul-singireddy-3037908a/',
-    },
-    {
-        name: 'Jason Somensatto',
-        title: 'Strategic Legal Counsel',
-        description: `Legal. Previously head of blockchain and crypto practice at Orrick. JD from George Washington University and undergrad at UVA.`,
-        image: 'images/team/jason.png',
-        linkedIn: 'https://www.linkedin.com/in/jasonsomensatto/',
-    },
-];
-
-const teamRow9: ProfileInfo[] = [
-    {
-        name: 'Steve Klebanoff',
-        title: 'Senior Engineer',
-        description: ` Full-stack engineer. Previously Staff Software Engineer at AppFolio. Computer Science & Cognitive Psychology at Northeastern University.`,
-        image: 'images/team/steve.png',
-        linkedIn: 'https://www.linkedin.com/in/steveklebanoff/',
-        github: 'https://github.com/steveklebanoff',
-    },
-    {
-        name: 'Xianny Ng',
-        title: 'Engineer',
-        description: `Developer Experience. Previously telemetry at Mapbox and platform engineering at Bench Accounting.`,
-        image: 'images/team/xianny.png',
-        linkedIn: 'https://www.linkedin.com/in/xianny/',
-        github: 'https://github.com/xianny',
-    },
-];
-
-const advisors1: ProfileInfo[] = [
-    {
-        name: 'Fred Ehrsam',
-        description: 'Co-founder of Coinbase. Previously FX trader at Goldman Sachs.',
-        image: '/images/advisors/fred.jpg',
-        linkedIn: 'https://www.linkedin.com/in/fredehrsam/',
-        medium: 'https://medium.com/@FEhrsam',
-        twitter: 'https://twitter.com/FEhrsam',
-    },
-    {
-        name: 'Olaf Carlson-Wee',
-        image: '/images/advisors/olaf.png',
-        description: 'Founder of Polychain Capital. First hire at Coinbase. Angel investor.',
-        linkedIn: 'https://www.linkedin.com/in/olafcw/',
-        angellist: 'https://angel.co/olafcw',
-    },
-    {
-        name: 'Joey Krug',
-        description: `Co-CIO at Pantera Capital. Founder of Augur. Thiel 20 Under 20 Fellow.`,
-        image: '/images/advisors/joey.jpg',
-        linkedIn: 'https://www.linkedin.com/in/joeykrug/',
-        github: 'https://github.com/joeykrug',
-        angellist: 'https://angel.co/joeykrug',
-    },
-];
-
-const advisors2: ProfileInfo[] = [
-    {
-        name: 'Linda Xie',
-        description: 'Co-founder of Scalar Capital. Previously PM at Coinbase.',
-        image: '/images/advisors/linda.jpg',
-        linkedIn: 'https://www.linkedin.com/in/lindaxie/',
-        medium: 'https://medium.com/@linda.xie',
-        twitter: 'https://twitter.com/ljxie',
-    },
-    {
-        name: 'David Sacks',
-        description: 'General Partner at Craft Ventures. Original COO of PayPal. Founder of Yammer.',
-        image: '/images/advisors/david.png',
-        linkedIn: 'https://www.linkedin.com/in/davidoliversacks/',
-        medium: 'https://medium.com/@davidsacks',
-        twitter: 'https://twitter.com/DavidSacks',
-    },
-];
-
-export interface AboutProps {
-    source: string;
-    location: Location;
-    translate: Translate;
-    dispatcher: Dispatcher;
-}
-
-interface AboutState {}
-
-const styles: Styles = {
-    header: {
-        fontFamily: 'Roboto Mono',
-        fontSize: 36,
-        color: 'black',
-        paddingTop: 110,
-    },
-    weAreHiring: {
-        fontSize: 30,
-        color: colors.darkestGrey,
-        fontFamily: 'Roboto Mono',
-        letterSpacing: 7.5,
-    },
-};
-
-export class About extends React.Component<AboutProps, AboutState> {
-    public componentDidMount(): void {
-        window.scrollTo(0, 0);
-    }
-    public render(): React.ReactNode {
-        return (
-            <div style={{ backgroundColor: colors.lightestGrey }}>
-                <DocumentTitle title="0x About Us" />
-                <TopBar
-                    blockchainIsLoaded={false}
-                    location={this.props.location}
-                    style={{ backgroundColor: colors.lightestGrey }}
-                    translate={this.props.translate}
-                />
-                <div id="about" className="mx-auto max-width-4 py4" style={{ color: colors.grey800 }}>
-                    <div className="mx-auto pb4 sm-px3" style={{ maxWidth: 435 }}>
-                        <div style={styles.header}>About us:</div>
-                        <div
-                            className="pt3"
-                            style={{
-                                fontSize: 17,
-                                color: colors.darkestGrey,
-                                lineHeight: 1.5,
-                            }}
-                        >
-                            Our team is a globally distributed group with backgrounds in engineering, research, business
-                            and design. We are passionate about decentralized technology and its potential to act as an
-                            equalizing force in the world.
-                        </div>
-                    </div>
-                    <div className="pt3 md-px4 lg-px0">
-                        <div className="clearfix pb3">{this._renderProfiles(teamRow1)}</div>
-                        <div className="clearfix">{this._renderProfiles(teamRow2)}</div>
-                        <div className="clearfix">{this._renderProfiles(teamRow3)}</div>
-                        <div className="clearfix">{this._renderProfiles(teamRow4)}</div>
-                        <div className="clearfix">{this._renderProfiles(teamRow5)}</div>
-                        <div className="clearfix">{this._renderProfiles(teamRow6)}</div>
-                        <div className="clearfix">{this._renderProfiles(teamRow7)}</div>
-                        <div className="clearfix">{this._renderProfiles(teamRow8)}</div>
-                        <div className="clearfix">{this._renderProfiles(teamRow9)}</div>
-                    </div>
-                    <div className="pt3 pb2">
-                        <div
-                            className="pt2 pb3 sm-center md-pl4 lg-pl0 md-ml3"
-                            style={{
-                                color: colors.grey,
-                                fontSize: 24,
-                                fontFamily: 'Roboto Mono',
-                            }}
-                        >
-                            Advisors:
-                        </div>
-                        <div className="clearfix">{this._renderProfiles(advisors1)}</div>
-                        <div className="clearfix">{this._renderProfiles(advisors2)}</div>
-                    </div>
-                    <div className="mx-auto py4 sm-px3" style={{ maxWidth: 308 }}>
-                        <div className="pb2" style={styles.weAreHiring}>
-                            WE'RE HIRING
-                        </div>
-                        <div
-                            className="pb4 mb4"
-                            style={{
-                                fontSize: 16,
-                                color: colors.darkestGrey,
-                                lineHeight: 1.5,
-                                letterSpacing: '0.5px',
-                            }}
-                        >
-                            We are seeking outstanding candidates to{' '}
-                            <Link to={WebsitePaths.Careers} textDecoration="underline" fontColor="black">
-                                join our team
-                            </Link>
-                            . We value passion, diversity and unique perspectives.
-                        </div>
-                    </div>
-                </div>
-                <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
-            </div>
-        );
-    }
-    private _renderProfiles(profiles: ProfileInfo[]): React.ReactNode {
-        const numIndiv = profiles.length;
-        const colSize = utils.getColSize(numIndiv);
-        return _.map(profiles, profile => {
-            return (
-                <div key={`profile-${profile.name}`}>
-                    <Profile colSize={colSize} profileInfo={profile} />
-                </div>
-            );
-        });
-    }
-}
diff --git a/packages/website/ts/@next/pages/about/jobs.tsx b/packages/website/ts/pages/about/jobs.tsx
index 2fd2c7619..ee1aa6cef 100644
--- a/packages/website/ts/@next/pages/about/jobs.tsx
+++ b/packages/website/ts/pages/about/jobs.tsx
@@ -3,9 +3,12 @@ import * as React from 'react';
 import DocumentTitle from 'react-document-title';
 import styled from 'styled-components';
 
-import { AboutPageLayout } from 'ts/@next/components/aboutPageLayout';
-import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
-import { Heading, Paragraph } from 'ts/@next/components/text';
+import { AboutPageLayout } from 'ts/components/aboutPageLayout';
+import { Link } from 'ts/components/link';
+import { Column, FlexWrap, Section } from 'ts/components/newLayout';
+import { Heading, Paragraph } from 'ts/components/text';
+import { Container } from 'ts/components/ui/container';
+import { colors } from 'ts/style/colors';
 import { WebsiteBackendJobInfo } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
 import { constants } from 'ts/utils/constants';
@@ -26,25 +29,27 @@ const Position: React.FunctionComponent<PositionItemProps> = (props: PositionIte
     const { position } = props;
     return (
         <PositionWrap>
-            <StyledColumn width="30%">
-                <Heading asElement="h3" size="small" fontWeight="400" marginBottom="0">
-                    <a href={position.href} target="_blank">
-                        {position.title}
-                    </a>
-                </Heading>
+            <StyledColumn width="50%">
+                <Container position="relative" top="-3px" paddingRight="12px">
+                    <Heading asElement="h3" size="small" fontWeight="400" marginBottom="0">
+                        <a href={position.href} target="_blank">
+                            {position.title}
+                        </a>
+                    </Heading>
+                </Container>
             </StyledColumn>
 
-            <StyledColumn width="50%" padding="0 40px 0 0">
+            <StyledColumn width="30%" padding="0 40px 0 0">
                 <Paragraph isMuted={true} marginBottom="0">
                     {position.location}
                 </Paragraph>
             </StyledColumn>
 
             <StyledColumn width="20%">
-                <Paragraph marginBottom="0" textAlign="right">
-                    <a href={position.href} target="_blank">
+                <Paragraph marginBottom="0" textAlign="right" color={colors.brandDark} fontWeight={400}>
+                    <Link href={position.href} target="_blank">
                         Apply
-                    </a>
+                    </Link>
                 </Paragraph>
             </StyledColumn>
         </PositionWrap>
@@ -117,7 +122,7 @@ export class NextAboutJobs extends React.Component<NextAboutJobsProps, NextAbout
 
                     <Column maxWidth="600px">
                         <ImageWrap>
-                            <img src="/images/@next/jobs/map@2x.png" height="365" alt="Map of community" />
+                            <img src="/images/jobs/map@2x.png" height="365" alt="Map of community" />
                         </ImageWrap>
                     </Column>
                 </Section>
diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/pages/about/mission.tsx
index 2e6530edd..ab8949fae 100644
--- a/packages/website/ts/@next/pages/about/mission.tsx
+++ b/packages/website/ts/pages/about/mission.tsx
@@ -3,11 +3,11 @@ import * as React from 'react';
 import DocumentTitle from 'react-document-title';
 import styled from 'styled-components';
 
-import { AboutPageLayout } from 'ts/@next/components/aboutPageLayout';
-import { Definition } from 'ts/@next/components/definition';
-import { Image } from 'ts/@next/components/image';
-import { Column, Section } from 'ts/@next/components/newLayout';
-import { Heading } from 'ts/@next/components/text';
+import { AboutPageLayout } from 'ts/components/aboutPageLayout';
+import { Definition } from 'ts/components/definition';
+import { Image } from 'ts/components/image';
+import { Column, Section } from 'ts/components/newLayout';
+import { Heading } from 'ts/components/text';
 import { constants } from 'ts/utils/constants';
 
 const values = [
@@ -41,7 +41,7 @@ export const NextAboutMission = () => (
         <DocumentTitle title="Our Mission - 0x" />
         <Section isFullWidth={true} isPadded={false}>
             <FullWidthImage>
-                <Image src="/images/@next/about/about-office.png" alt="0x Offices" isCentered={true} />
+                <Image src="/images/about/about-office.png" alt="0x Offices" isCentered={true} />
             </FullWidthImage>
         </Section>
 
diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/pages/about/press.tsx
index 030ee4c14..03003d656 100644
--- a/packages/website/ts/@next/pages/about/press.tsx
+++ b/packages/website/ts/pages/about/press.tsx
@@ -3,10 +3,10 @@ import * as React from 'react';
 import DocumentTitle from 'react-document-title';
 import styled from 'styled-components';
 
-import { AboutPageLayout } from 'ts/@next/components/aboutPageLayout';
-import { Button } from 'ts/@next/components/button';
-import { Column, FlexWrap } from 'ts/@next/components/newLayout';
-import { Paragraph } from 'ts/@next/components/text';
+import { AboutPageLayout } from 'ts/components/aboutPageLayout';
+import { Button } from 'ts/components/button';
+import { Column, FlexWrap } from 'ts/components/newLayout';
+import { Paragraph } from 'ts/components/text';
 
 interface HighlightProps {
     logo: string;
@@ -21,7 +21,7 @@ interface HighlightItemProps {
 
 const highlights: HighlightProps[] = [
     {
-        logo: '/images/@next/press/logo-forbes.png',
+        logo: '/images/press/logo-forbes.png',
         title: 'Forbes',
         text:
             '0x Instant is aiming to aid businesses and developers such as news sites, crypto wallets, dApps or price trackers to monetize or add a new revenue stream to their existing pipeline.',
@@ -29,21 +29,21 @@ const highlights: HighlightProps[] = [
             'https://www.forbes.com/sites/rebeccacampbell1/2018/12/06/0x-launches-instant-delivers-an-easy-and-flexible-way-to-buy-crypto-tokens/#bfb73a843561',
     },
     {
-        logo: '/images/@next/press/logo-venturebeat.png',
+        logo: '/images/press/logo-venturebeat.png',
         title: 'VentureBeat',
         text: '0x leads the way for ‘tokenization’ of the world, and collectible game items are next',
         href:
             'https://venturebeat.com/2018/09/24/0x-leads-the-way-for-tokenization-of-the-world-and-collectible-game-items-are-next/',
     },
     {
-        logo: '/images/@next/press/logo-fortune.png',
+        logo: '/images/press/logo-fortune.png',
         title: 'Fortune',
         text:
             'In the future, many traditional investments like real estate and corporate shares will come in the form of digital tokens that are bought and transferred on a blockchain.',
         href: 'http://fortune.com/2018/09/06/0x-harbor-blockchain/',
     },
     {
-        logo: '/images/@next/press/logo-techcrunch.png',
+        logo: '/images/press/logo-techcrunch.png',
         title: 'TechCrunch',
         text:
             '0x allows any developer to quickly build their own decentralized cryptocurrency exchange and decide their own fees.',
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
deleted file mode 100644
index 2361c6418..000000000
--- a/packages/website/ts/pages/about/profile.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { colors, Styles } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-import { ProfileInfo } from 'ts/types';
-
-const IMAGE_DIMENSION = 149;
-const styles: Styles = {
-    subheader: {
-        textTransform: 'uppercase',
-        fontSize: 32,
-        margin: 0,
-    },
-    imageContainer: {
-        width: IMAGE_DIMENSION,
-        height: IMAGE_DIMENSION,
-        boxShadow: 'rgba(0, 0, 0, 0.19) 2px 5px 10px',
-    },
-};
-
-interface ProfileProps {
-    colSize: number;
-    profileInfo: ProfileInfo;
-}
-
-export const Profile = (props: ProfileProps) => {
-    return (
-        <div className={`lg-col md-col lg-col-${props.colSize} md-col-6`}>
-            <div style={{ maxWidth: 300 }} className="mx-auto lg-px3 md-px3 sm-px4 sm-pb3">
-                <div className="circle overflow-hidden mx-auto" style={styles.imageContainer}>
-                    <img width={IMAGE_DIMENSION} src={props.profileInfo.image} />
-                </div>
-                <div className="center" style={{ fontSize: 18, fontWeight: 'bold', paddingTop: 20 }}>
-                    {props.profileInfo.name}
-                </div>
-                {!_.isUndefined(props.profileInfo.title) && (
-                    <div
-                        className="pt1 center"
-                        style={{
-                            fontSize: 14,
-                            fontFamily: 'Roboto Mono',
-                            color: colors.darkGrey,
-                            whiteSpace: 'nowrap',
-                        }}
-                    >
-                        {props.profileInfo.title.toUpperCase()}
-                    </div>
-                )}
-                <div style={{ minHeight: 60, lineHeight: 1.4 }} className="pt1 pb2 mx-auto lg-h6 md-h6 sm-h5 sm-center">
-                    {props.profileInfo.description}
-                </div>
-                <div className="flex pb3 sm-hide xs-hide" style={{ width: 280, opacity: 0.5 }}>
-                    {renderSocialMediaIcons(props.profileInfo)}
-                </div>
-            </div>
-        </div>
-    );
-};
-
-function renderSocialMediaIcons(profileInfo: ProfileInfo): React.ReactNode {
-    const icons = [
-        renderSocialMediaIcon('zmdi-github-box', profileInfo.github),
-        renderSocialMediaIcon('zmdi-linkedin-box', profileInfo.linkedIn),
-        renderSocialMediaIcon('zmdi-twitter-box', profileInfo.twitter),
-    ];
-    return icons;
-}
-
-function renderSocialMediaIcon(iconName: string, url: string): React.ReactNode {
-    if (_.isEmpty(url)) {
-        return null;
-    }
-
-    return (
-        <div key={url} className="pr1">
-            <a href={url} style={{ color: 'inherit' }} target="_blank" className="text-decoration-none">
-                <i className={`zmdi ${iconName}`} style={{ ...styles.socalIcon }} />
-            </a>
-        </div>
-    );
-}
diff --git a/packages/website/ts/@next/pages/about/team.tsx b/packages/website/ts/pages/about/team.tsx
index 7177964be..41d6c2cf8 100644
--- a/packages/website/ts/@next/pages/about/team.tsx
+++ b/packages/website/ts/pages/about/team.tsx
@@ -5,9 +5,9 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import { AboutPageLayout } from 'ts/@next/components/aboutPageLayout';
-import { Column, Section } from 'ts/@next/components/newLayout';
-import { Heading, Paragraph } from 'ts/@next/components/text';
+import { AboutPageLayout } from 'ts/components/aboutPageLayout';
+import { Column, Section } from 'ts/components/newLayout';
+import { Heading, Paragraph } from 'ts/components/text';
 import { WebsitePaths } from 'ts/types';
 
 interface TeamMember {
@@ -18,132 +18,132 @@ interface TeamMember {
 
 const team: TeamMember[] = [
     {
-        imageUrl: '/images/@next/team/willw.jpg',
+        imageUrl: '/images/team/willw.jpg',
         name: 'Will Warren',
         title: 'co-founder & CEO',
     },
     {
-        imageUrl: '/images/@next/team/amirb.jpg',
+        imageUrl: '/images/team/amirb.jpg',
         name: 'Amir Bandeali',
         title: 'Co-founder & CTO',
     },
     {
-        imageUrl: '/images/@next/team/fabiob.jpg',
+        imageUrl: '/images/team/fabiob.jpg',
         name: 'Fabio Berger',
         title: 'senior engineer',
     },
     {
-        imageUrl: '/images/@next/team/alexv.jpg',
+        imageUrl: '/images/team/alexv.jpg',
         name: 'Alex Xu',
         title: 'Director of operations',
     },
     {
-        imageUrl: '/images/@next/team/leonidL.jpg',
+        imageUrl: '/images/team/leonidL.jpg',
         name: 'Leonid Logvinov',
         title: 'engineer',
     },
     {
-        imageUrl: '/images/@next/team/benb.jpg',
+        imageUrl: '/images/team/benb.jpg',
         name: 'Ben Burns',
         title: 'designer',
     },
     {
-        imageUrl: '/images/@next/team/brandonm.jpg',
+        imageUrl: '/images/team/brandonm.jpg',
         name: 'Brandon Millman',
         title: 'senior engineer',
     },
     {
-        imageUrl: '/images/@next/team/toms.jpg',
+        imageUrl: '/images/team/toms.jpg',
         name: 'Tom Schmidt',
         title: 'product manager',
     },
     {
-        imageUrl: '/images/@next/team/jacobe.jpg',
+        imageUrl: '/images/team/jacobe.jpg',
         name: 'Jacob Evans',
         title: 'ecosystem engineer',
     },
     {
-        imageUrl: '/images/@next/team/blake.jpg',
+        imageUrl: '/images/team/blake.jpg',
         name: 'Blake Henderson',
         title: 'ecosystem programs lead',
     },
     {
-        imageUrl: '/images/@next/team/zack.jpg',
+        imageUrl: '/images/team/zack.jpg',
         name: 'Zack Skelly',
         title: 'lead recruiter',
     },
     {
-        imageUrl: '/images/@next/team/greg.jpg',
+        imageUrl: '/images/team/greg.jpg',
         name: 'Greg Hysen',
         title: 'blockchain engineer',
     },
     {
-        imageUrl: '/images/@next/team/remcoB.jpg',
+        imageUrl: '/images/team/remcoB.jpg',
         name: 'Remco Bloemen',
         title: 'technical fellow',
     },
     {
-        imageUrl: '/images/@next/team/francesco.jpg',
+        imageUrl: '/images/team/francesco.jpg',
         name: 'Francesco Agosti',
         title: 'engineer',
     },
     {
-        imageUrl: '/images/@next/team/melo.jpg',
+        imageUrl: '/images/team/melo.jpg',
         name: 'Mel Oberto',
         title: 'people operations associate',
     },
     {
-        imageUrl: '/images/@next/team/alexb.jpg',
+        imageUrl: '/images/team/alexb.jpg',
         name: 'Alex Browne',
         title: 'engineer in residence',
     },
     {
-        imageUrl: '/images/@next/team/peterz.jpg',
+        imageUrl: '/images/team/peterz.jpg',
         name: 'Peter Zeitz',
         title: 'research fellow',
     },
     {
-        imageUrl: '/images/@next/team/chrisk.jpg',
+        imageUrl: '/images/team/chrisk.jpg',
         name: 'Chris Kalani',
         title: 'director of design',
     },
     {
-        imageUrl: '/images/@next/team/clayr.jpg',
+        imageUrl: '/images/team/clayr.jpg',
         name: 'Clay Robbins',
         title: 'ecosystem development lead',
     },
     {
-        imageUrl: '/images/@next/team/mattt.jpg',
+        imageUrl: '/images/team/mattt.jpg',
         name: 'Matt Taylor',
         title: 'marketing lead',
     },
     {
-        imageUrl: '/images/@next/team/eugenea.jpg',
+        imageUrl: '/images/team/eugenea.jpg',
         name: 'Eugene Aumson',
         title: 'engineer',
     },
     {
-        imageUrl: '/images/@next/team/weijew.jpg',
+        imageUrl: '/images/team/weijew.jpg',
         name: 'Weijie Wu',
         title: 'research fellow',
     },
     {
-        imageUrl: '/images/@next/team/rahuls.jpg',
+        imageUrl: '/images/team/rahuls.jpg',
         name: 'Rahul Singireddy',
         title: 'relayer success manager',
     },
     {
-        imageUrl: '/images/@next/team/jasons.jpg',
+        imageUrl: '/images/team/jasons.jpg',
         name: 'Jason Somensatto',
         title: 'strategic legal counsel',
     },
     {
-        imageUrl: '/images/@next/team/steveK.jpg',
+        imageUrl: '/images/team/steveK.jpg',
         name: 'Steve Klebanoff',
         title: 'senior engineer',
     },
     {
-        imageUrl: '/images/@next/team/xianny.jpg',
+        imageUrl: '/images/team/xianny.jpg',
         name: 'Xianny Ng',
         title: 'engineer',
     },
@@ -151,27 +151,27 @@ const team: TeamMember[] = [
 
 const advisors: TeamMember[] = [
     {
-        imageUrl: '/images/@next/team/advisors/frede.jpg',
+        imageUrl: '/images/team/advisors/frede.jpg',
         name: 'Fred Ehrsam',
         title: 'Advisor',
     },
     {
-        imageUrl: '/images/@next/team/advisors/olafc.jpg',
+        imageUrl: '/images/team/advisors/olafc.jpg',
         name: 'Olaf Carlson-Wee',
         title: 'Advisor',
     },
     {
-        imageUrl: '/images/@next/team/advisors/joeyk.jpg',
+        imageUrl: '/images/team/advisors/joeyk.jpg',
         name: 'Joey Krug',
         title: 'Advisor',
     },
     {
-        imageUrl: '/images/@next/team/advisors/lindax.jpg',
+        imageUrl: '/images/team/advisors/lindax.jpg',
         name: 'Linda Xie',
         title: 'Advisor',
     },
     {
-        imageUrl: '/images/@next/team/advisors/davids.jpg',
+        imageUrl: '/images/team/advisors/davids.jpg',
         name: 'David Sacks',
         title: 'Advisor',
     },
diff --git a/packages/website/ts/@next/pages/community.tsx b/packages/website/ts/pages/community.tsx
index a259e3438..7c02fed82 100644
--- a/packages/website/ts/@next/pages/community.tsx
+++ b/packages/website/ts/pages/community.tsx
@@ -4,13 +4,13 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import { Banner } from 'ts/@next/components/banner';
-import { Button } from 'ts/@next/components/button';
-import { Icon } from 'ts/@next/components/icon';
-import { ModalContact } from 'ts/@next/components/modals/modal_contact';
-import { Column, Section, WrapGrid } from 'ts/@next/components/newLayout';
-import { SiteWrap } from 'ts/@next/components/siteWrap';
-import { Heading, Paragraph } from 'ts/@next/components/text';
+import { Banner } from 'ts/components/banner';
+import { Button } from 'ts/components/button';
+import { Icon } from 'ts/components/icon';
+import { ModalContact } from 'ts/components/modals/modal_contact';
+import { Column, Section, WrapGrid } from 'ts/components/newLayout';
+import { SiteWrap } from 'ts/components/siteWrap';
+import { Heading, Paragraph } from 'ts/components/text';
 
 interface EventProps {
     title: string;
@@ -30,19 +30,19 @@ const events: EventProps[] = [
     {
         title: '0x London Meetup',
         date: 'October 20th 2018',
-        imageUrl: '/images/@next/events/london.jpg',
+        imageUrl: '/images/events/london.jpg',
         signupUrl: '#',
     },
     {
         title: '0x Berlin Meetup',
         date: 'October 20th 2018',
-        imageUrl: '/images/@next/events/berlin.jpg',
+        imageUrl: '/images/events/berlin.jpg',
         signupUrl: '#',
     },
     {
         title: '0x San Francisco Meetup',
         date: 'October 20th 2018',
-        imageUrl: '/images/@next/events/sf.jpg',
+        imageUrl: '/images/events/sf.jpg',
         signupUrl: '#',
     },
 ];
diff --git a/packages/website/ts/@next/pages/ecosystem.tsx b/packages/website/ts/pages/ecosystem.tsx
index f78bd3bdc..8e367b21f 100644
--- a/packages/website/ts/@next/pages/ecosystem.tsx
+++ b/packages/website/ts/pages/ecosystem.tsx
@@ -5,11 +5,11 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import { Button } from 'ts/@next/components/button';
-import { Icon } from 'ts/@next/components/icon';
-import { Column, Section, WrapGrid } from 'ts/@next/components/newLayout';
-import { SiteWrap } from 'ts/@next/components/siteWrap';
-import { Heading, Paragraph } from 'ts/@next/components/text';
+import { Button } from 'ts/components/button';
+import { Icon } from 'ts/components/icon';
+import { Column, Section, WrapGrid } from 'ts/components/newLayout';
+import { SiteWrap } from 'ts/components/siteWrap';
+import { Heading, Paragraph } from 'ts/components/text';
 import { constants } from 'ts/utils/constants';
 
 interface BenefitProps {
diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
index c4965e61c..8cde7224e 100644
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -2,7 +2,7 @@ import { colors, Styles } from '@0x/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
-import { Footer } from 'ts/components/footer';
+import { Footer } from 'ts/components/old_footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Question } from 'ts/pages/faq/question';
 import { Dispatcher } from 'ts/redux/dispatcher';
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/pages/instant.tsx
index d08fd566a..b97bb35a4 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/pages/instant.tsx
@@ -4,14 +4,14 @@ import * as React from 'react';
 import DocumentTitle from 'react-document-title';
 import styled, { keyframes } from 'styled-components';
 
-import { Banner } from 'ts/@next/components/banner';
-import { Button } from 'ts/@next/components/button';
-import { Definition } from 'ts/@next/components/definition';
-import { Hero } from 'ts/@next/components/hero';
-import { Section, SectionProps } from 'ts/@next/components/newLayout';
-import { SiteWrap } from 'ts/@next/components/siteWrap';
-import { Heading, Paragraph } from 'ts/@next/components/text';
-import { Configurator } from 'ts/@next/pages/instant/configurator';
+import { Banner } from 'ts/components/banner';
+import { Button } from 'ts/components/button';
+import { Definition } from 'ts/components/definition';
+import { Hero } from 'ts/components/hero';
+import { Section, SectionProps } from 'ts/components/newLayout';
+import { SiteWrap } from 'ts/components/siteWrap';
+import { Heading, Paragraph } from 'ts/components/text';
+import { Configurator } from 'ts/pages/instant/configurator';
 import { colors } from 'ts/style/colors';
 import { WebsitePaths } from 'ts/types';
 import { utils } from 'ts/utils/utils';
@@ -100,7 +100,7 @@ export class Next0xInstant extends React.Component<Props> {
                         <div>
                             {[...Array(18)].map((item, index) => (
                                 <Card key={`card-${index}`} index={index}>
-                                    <img src={`/images/@next/0x-instant/widget-${index % 6 + 1}.png`} />
+                                    <img src={`/images/0x-instant/widget-${index % 6 + 1}.png`} />
                                 </Card>
                             ))}
                         </div>
diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index a3b5fe847..c59f148b8 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -2,9 +2,8 @@ import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
-import { Button } from 'ts/components/ui/button';
+import { Button } from 'ts/components/button';
 import { Container } from 'ts/components/ui/container';
-import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
 import { zIndex } from 'ts/style/z_index';
 
@@ -12,7 +11,7 @@ const CustomPre = styled.pre`
     margin: 0px;
     line-height: 24px;
     overflow: scroll;
-    width: 600px;
+    width: 100%;
     height: 100%;
     max-height: 800px;
     border-radius: 4px;
@@ -23,19 +22,21 @@ const CustomPre = styled.pre`
         border: none;
     }
     code:first-of-type {
-        background-color: #2a2a2a !important;
+        background-color: #060d0d !important;
         color: #999;
-        min-height: 98%;
+        min-height: 100%;
         text-align: center;
-        padding-right: 5px !important;
-        padding-left: 5px;
         margin-right: 15px;
         line-height: 25px;
-        padding-top: 10px;
+        padding: 10px 7px !important;
     }
     code:last-of-type {
         position: relative;
         top: 10px;
+        top: 0;
+        padding-top: 11px;
+        display: inline-block;
+        line-height: 25px;
     }
 `;
 
@@ -130,7 +131,7 @@ const customStyle = {
     hljs: {
         display: 'block',
         overflowX: 'hidden',
-        background: colors.instantSecondaryBackground,
+        background: '#1B2625',
         color: 'white',
         fontSize: '12px',
     },
@@ -160,9 +161,7 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
             <Container position="relative" height="100%">
                 <Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}>
                     <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
-                        <Button fontSize="14px">
-                            <b>{copyButtonText}</b>
-                        </Button>
+                        <StyledButton>{copyButtonText}</StyledButton>
                     </CopyToClipboard>
                 </Container>
                 <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
@@ -175,3 +174,10 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
         this.setState({ didCopyCode: true });
     };
 }
+
+const StyledButton = styled(Button)`
+    border-radius: 4px;
+    font-size: 15px;
+    font-weight: 400;
+    padding: 9px 21px 7px;
+`;
diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx
index 3f00e33e2..e43d47119 100644
--- a/packages/website/ts/@next/pages/instant/config_generator.tsx
+++ b/packages/website/ts/pages/instant/config_generator.tsx
@@ -6,23 +6,23 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { ConfigGeneratorAddressInput } from 'ts/@next/pages/instant/config_generator_address_input';
-import { FeePercentageSlider } from 'ts/@next/pages/instant/fee_percentage_slider';
 import { CheckMark } from 'ts/components/ui/check_mark';
 import { Container } from 'ts/components/ui/container';
 import { MultiSelect } from 'ts/components/ui/multi_select';
 import { Spinner } from 'ts/components/ui/spinner';
 import { Text } from 'ts/components/ui/text';
+import { ConfigGeneratorAddressInput } from 'ts/pages/instant/config_generator_address_input';
+import { FeePercentageSlider } from 'ts/pages/instant/fee_percentage_slider';
 import { colors } from 'ts/style/colors';
 import { WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 
 // New components
-import { Heading } from 'ts/@next/components/text';
-import { Select, SelectItemConfig } from 'ts/@next/pages/instant/select';
+import { Heading } from 'ts/components/text';
+import { Select, SelectItemConfig } from 'ts/pages/instant/select';
 
-import { assetMetaDataMap } from '../../../../../instant/src/data/asset_meta_data_map';
-import { ERC20AssetMetaData, ZeroExInstantBaseConfig } from '../../../../../instant/src/types';
+import { assetMetaDataMap } from '../../../../instant/src/data/asset_meta_data_map';
+import { ERC20AssetMetaData, ZeroExInstantBaseConfig } from '../../../../instant/src/types';
 
 export interface ConfigGeneratorProps {
     value: ZeroExInstantBaseConfig;
diff --git a/packages/website/ts/pages/instant/config_generator_address_input.tsx b/packages/website/ts/pages/instant/config_generator_address_input.tsx
index ccbaf4482..890e39da6 100644
--- a/packages/website/ts/pages/instant/config_generator_address_input.tsx
+++ b/packages/website/ts/pages/instant/config_generator_address_input.tsx
@@ -1,11 +1,13 @@
-import { colors } from '@0x/react-shared';
 import { addressUtils } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
 
 import { Container } from 'ts/components/ui/container';
-import { Input } from 'ts/components/ui/input';
-import { Text } from 'ts/components/ui/text';
+
+import { Paragraph } from 'ts/components/text';
 
 export interface ConfigGeneratorAddressInputProps {
     value?: string;
@@ -16,6 +18,19 @@ export interface ConfigGeneratorAddressInputState {
     errMsg: string;
 }
 
+export interface InputProps {
+    className?: string;
+    value?: string;
+    width?: string;
+    fontSize?: string;
+    fontColor?: string;
+    padding?: string;
+    placeholderColor?: string;
+    placeholder?: string;
+    backgroundColor?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
 export class ConfigGeneratorAddressInput extends React.Component<
     ConfigGeneratorAddressInputProps,
     ConfigGeneratorAddressInputState
@@ -26,22 +41,13 @@ export class ConfigGeneratorAddressInput extends React.Component<
     public render(): React.ReactNode {
         const { errMsg } = this.state;
         const hasError = !_.isEmpty(errMsg);
-        const border = hasError ? '1px solid red' : undefined;
         return (
             <Container height="80px">
-                <Input
-                    width="100%"
-                    fontSize="16px"
-                    padding="0.7em 1em"
-                    value={this.props.value}
-                    onChange={this._handleChange}
-                    placeholder="0xe99...aa8da4"
-                    border={border}
-                />
+                <Input value={this.props.value} onChange={this._handleChange} placeholder="0xe99...aa8da4" />
                 <Container marginTop="5px" isHidden={!hasError} height="25px">
-                    <Text fontSize="14px" fontColor={colors.grey} fontStyle="italic">
+                    <Paragraph size="small" isNoMargin={true}>
                         {errMsg}
-                    </Text>
+                    </Paragraph>
                 </Container>
             </Container>
         );
@@ -57,3 +63,22 @@ export class ConfigGeneratorAddressInput extends React.Component<
         this.props.onChange(address, isValidAddress);
     };
 }
+
+const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => (
+    <input className={className} value={value} onChange={onChange} placeholder={placeholder} />
+);
+
+export const Input = styled(PlainInput)`
+    background-color: ${colors.white};
+    color: ${colors.textDarkSecondary};
+    font-size: 1rem;
+    width: 100%;
+    padding: 16px 20px 18px;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    outline: none;
+    &::placeholder {
+        color: #333333;
+        opacity: 0.5;
+    }
+`;
diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 7c67e6333..a63e1752e 100644
--- a/packages/website/ts/@next/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -2,15 +2,15 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { CodeDemo } from 'ts/@next/pages/instant/code_demo';
-import { ConfigGenerator } from 'ts/@next/pages/instant/config_generator';
+import { CodeDemo } from 'ts/pages/instant/code_demo';
+import { ConfigGenerator } from 'ts/pages/instant/config_generator';
 
-import { Link } from 'ts/@next/components/link';
-import { Column, FlexWrap } from 'ts/@next/components/newLayout';
-import { Heading } from 'ts/@next/components/text';
+import { Link } from 'ts/components/link';
+import { Column, FlexWrap } from 'ts/components/newLayout';
+import { Heading } from 'ts/components/text';
 import { WebsitePaths } from 'ts/types';
 
-import { ZeroExInstantBaseConfig } from '../../../../../instant/src/types';
+import { ZeroExInstantBaseConfig } from '../../../../instant/src/types';
 
 export interface ConfiguratorState {
     instantConfig: ZeroExInstantBaseConfig;
diff --git a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/pages/instant/fee_percentage_slider.tsx
index 5775d6dfb..c4d9f908f 100644
--- a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
+++ b/packages/website/ts/pages/instant/fee_percentage_slider.tsx
@@ -1,7 +1,7 @@
 import Slider from 'rc-slider';
 import * as React from 'react';
 import styled from 'styled-components';
-import 'ts/@next/pages/instant/rc-slider.css';
+import 'ts/pages/instant/rc-slider.css';
 
 import { colors } from 'ts/style/colors';
 
diff --git a/packages/website/ts/pages/instant/introducing_0x_instant.tsx b/packages/website/ts/pages/instant/introducing_0x_instant.tsx
deleted file mode 100644
index da3f09faa..000000000
--- a/packages/website/ts/pages/instant/introducing_0x_instant.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react';
-
-import { Button } from 'ts/components/ui/button';
-import { Container } from 'ts/components/ui/container';
-import { Text } from 'ts/components/ui/text';
-import { colors } from 'ts/style/colors';
-import { ScreenWidths } from 'ts/types';
-
-export interface Introducing0xInstantProps {
-    screenWidth: ScreenWidths;
-    onCTAClick: () => void;
-}
-
-export const Introducing0xInstant = (props: Introducing0xInstantProps) => {
-    const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
-    const zero = (
-        <Text fontColor={colors.white} fontSize="42px" fontWeight="600" fontFamily="Roboto Mono" Tag="span">
-            0
-        </Text>
-    );
-    const title = isSmallScreen ? (
-        <div>
-            Introducing<br />
-            {zero}x Instant
-        </div>
-    ) : (
-        <div>Introducing {zero}x Instant</div>
-    );
-    return (
-        <div className="clearfix center lg-pt4 md-pt4" style={{ backgroundColor: colors.instantPrimaryBackground }}>
-            <div className="mx-auto inline-block align-middle py4" style={{ lineHeight: '44px', textAlign: 'center' }}>
-                <Container className="sm-center sm-pt3">
-                    <Text fontColor={colors.white} fontSize="42px" lineHeight="52px" fontWeight="600">
-                        {title}
-                    </Text>
-                </Container>
-                <Container className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 sm-center" maxWidth="600px">
-                    <Text fontColor={colors.grey500} fontSize="20px" lineHeight="32px" fontFamily="Roboto Mono">
-                        A free and flexible way to offer simple crypto
-                        <br /> purchasing in any app or website.
-                    </Text>
-                </Container>
-                <div className="py3">
-                    <Button
-                        type="button"
-                        backgroundColor={colors.mediumBlue}
-                        fontColor={colors.white}
-                        fontSize="18px"
-                        onClick={props.onCTAClick}
-                    >
-                        Get Started
-                    </Button>
-                </div>
-            </div>
-        </div>
-    );
-};
diff --git a/packages/website/ts/pages/instant/need_more.tsx b/packages/website/ts/pages/instant/need_more.tsx
deleted file mode 100644
index 70aea7363..000000000
--- a/packages/website/ts/pages/instant/need_more.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from 'react';
-
-import { Button } from 'ts/components/ui/button';
-import { Container } from 'ts/components/ui/container';
-import { Text } from 'ts/components/ui/text';
-import { colors } from 'ts/style/colors';
-import { ScreenWidths, WebsitePaths } from 'ts/types';
-import { constants } from 'ts/utils/constants';
-import { utils } from 'ts/utils/utils';
-
-export interface NeedMoreProps {
-    screenWidth: ScreenWidths;
-}
-export const NeedMore = (props: NeedMoreProps) => {
-    const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
-    const backgroundColor = isSmallScreen ? colors.instantTertiaryBackground : colors.instantSecondaryBackground;
-    const className = isSmallScreen ? 'flex flex-column items-center' : 'flex';
-    const marginRight = isSmallScreen ? undefined : '200px';
-    return (
-        <Container className="flex flex-column items-center py4 px3" backgroundColor={backgroundColor}>
-            <Container className={className}>
-                <Container className="sm-center" marginRight={marginRight}>
-                    <Text fontColor={colors.white} fontSize="32px" lineHeight="45px">
-                        Need more flexibility?
-                    </Text>
-                    <Text fontColor={colors.grey500} fontSize="18px" lineHeight="27px">
-                        View our full documentation or reach out if you have any questions.
-                    </Text>
-                </Container>
-                <Container className="py3 flex">
-                    <Container marginRight="20px">
-                        <Button
-                            type="button"
-                            backgroundColor={colors.white}
-                            fontColor={backgroundColor}
-                            fontSize="18px"
-                            onClick={onGetInTouchClick}
-                        >
-                            Get in Touch
-                        </Button>
-                    </Container>
-                    <Button
-                        type="button"
-                        backgroundColor={colors.mediumBlue}
-                        fontColor={colors.white}
-                        fontSize="18px"
-                        onClick={onDocsClick}
-                    >
-                        Explore the Docs
-                    </Button>
-                </Container>
-            </Container>
-        </Container>
-    );
-};
-
-const onGetInTouchClick = () => {
-    utils.openUrl(constants.URL_ZEROEX_CHAT);
-};
-const onDocsClick = () => {
-    utils.openUrl(`${WebsitePaths.Wiki}#Get-Started-With-Instant`);
-};
diff --git a/packages/website/ts/@next/pages/instant/rc-slider.css b/packages/website/ts/pages/instant/rc-slider.css
index 63038324e..63038324e 100644
--- a/packages/website/ts/@next/pages/instant/rc-slider.css
+++ b/packages/website/ts/pages/instant/rc-slider.css
diff --git a/packages/website/ts/pages/instant/screenshots.tsx b/packages/website/ts/pages/instant/screenshots.tsx
deleted file mode 100644
index 7dcf17fd1..000000000
--- a/packages/website/ts/pages/instant/screenshots.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Container } from 'ts/components/ui/container';
-import { colors } from 'ts/style/colors';
-import { ScreenWidths } from 'ts/types';
-
-export interface ScreenshotsProps {
-    screenWidth: ScreenWidths;
-}
-
-export const Screenshots = (props: ScreenshotsProps) => {
-    const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
-    const images = isSmallScreen
-        ? [
-              'images/instant/rep_screenshot.png',
-              'images/instant/dai_screenshot.png',
-              'images/instant/gods_screenshot.png',
-          ]
-        : [
-              'images/instant/nmr_screenshot.png',
-              'images/instant/kitty_screenshot.png',
-              'images/instant/rep_screenshot.png',
-              'images/instant/dai_screenshot.png',
-              'images/instant/gods_screenshot.png',
-              'images/instant/gnt_screenshot.png',
-          ];
-    return (
-        <Container backgroundColor={colors.instantPrimaryBackground} className="py3 flex justify-center">
-            {_.map(images, image => {
-                return <img className="px1 flex-none" width="300px" height="420px" src={image} key={image} />;
-            })}
-        </Container>
-    );
-};
diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/pages/instant/select.tsx
index d4146cfb0..d4146cfb0 100644
--- a/packages/website/ts/@next/pages/instant/select.tsx
+++ b/packages/website/ts/pages/instant/select.tsx
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx
deleted file mode 100644
index 563b72e63..000000000
--- a/packages/website/ts/pages/jobs/benefits.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Circle } from 'ts/components/ui/circle';
-import { Container } from 'ts/components/ui/container';
-import { Image } from 'ts/components/ui/image';
-import { Text } from 'ts/components/ui/text';
-import { colors } from 'ts/style/colors';
-import { styled } from 'ts/style/theme';
-import { ScreenWidths } from 'ts/types';
-import { constants } from 'ts/utils/constants';
-
-const BENEFITS = [
-    'Comprehensive insurance (medical, dental, and vision)',
-    'Unlimited vacation (three weeks per year minimum)',
-    'Meals and snacks provided in-office daily',
-    'Flexible hours and liberal work-from-home-policy',
-    'Supportive remote working environment',
-    'Transportation, phone, and wellness expense',
-    'Relocation assistance',
-    'Optional team excursions (fully paid, often international)',
-    'Competitive salary and cryptocurrency-based compensation',
-];
-
-interface Value {
-    iconSrc: string;
-    text: string;
-}
-const VALUES: Value[] = [
-    {
-        iconSrc: 'images/jobs/heart-icon.svg',
-        text: 'Do the right thing',
-    },
-    {
-        iconSrc: 'images/jobs/ship-icon.svg',
-        text: 'Consistently ship',
-    },
-    {
-        iconSrc: 'images/jobs/calendar-icon.svg',
-        text: 'Focus on long term impact',
-    },
-];
-
-export interface BenefitsProps {
-    screenWidth: ScreenWidths;
-}
-
-export const Benefits = (props: BenefitsProps) => {
-    const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
-    return (
-        <Container className="flex flex-column items-center py4 px3" backgroundColor={colors.white}>
-            {!isSmallScreen ? (
-                <Container className="flex" maxWidth="1200px">
-                    <BenefitsList />
-                    <Container marginLeft="120px">
-                        <ValuesList />
-                    </Container>
-                </Container>
-            ) : (
-                <Container className="flex-column">
-                    <BenefitsList />
-                    <Container marginTop="50px">
-                        <ValuesList />
-                    </Container>
-                </Container>
-            )}
-        </Container>
-    );
-};
-
-const Header: React.StatelessComponent = ({ children }) => (
-    <Container marginBottom="30px">
-        <Text fontFamily="Roboto Mono" fontSize="24px" fontColor={colors.black}>
-            {children}
-        </Text>
-    </Container>
-);
-
-interface BenefitsListProps {
-    className?: string;
-}
-const PlainBenefitsList: React.StatelessComponent<BenefitsListProps> = ({ className }) => {
-    return (
-        <Container className={className}>
-            <Header>Benefits</Header>
-            {_.map(BENEFITS, benefit => <BenefitItem key={benefit} description={benefit} />)}
-        </Container>
-    );
-};
-const BenefitsList = styled(PlainBenefitsList)`
-    transform: translateY(30px);
-`;
-
-interface BenefitItemProps {
-    description: string;
-}
-
-const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ description }) => (
-    <Container marginBottom="15px">
-        <div className="flex">
-            <Circle className="flex-none pr2 pt1" diameter={8} fillColor={colors.black} />
-            <div className="flex-auto">
-                <Text fontSize="14px" lineHeight="24px">
-                    {description}
-                </Text>
-            </div>
-        </div>
-    </Container>
-);
-
-interface ValuesListProps {
-    className?: string;
-}
-const PlainValuesList: React.StatelessComponent<ValuesListProps> = ({ className }) => {
-    return (
-        <Container className={className} maxWidth="270px">
-            <Header>Our Values</Header>
-            {_.map(VALUES, value => <ValueItem key={value.text} {...value} />)}
-            <Text fontSize="14px" lineHeight="26px">
-                We care deeply about our culture and values, and encourage you to{' '}
-                <a
-                    style={{ color: colors.mediumBlue, textDecoration: 'none' }}
-                    target="_blank"
-                    href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
-                >
-                    read more on our blog
-                </a>.
-            </Text>
-        </Container>
-    );
-};
-
-const ValuesList = styled(PlainValuesList)`
-    border-color: ${colors.beigeWhite};
-    border-radius: 7px;
-    border-width: 1px;
-    border-style: solid;
-    padding-left: 38px;
-    padding-right: 38px;
-    padding-top: 28px;
-    padding-bottom: 28px;
-`;
-
-type ValueItemProps = Value;
-const ValueItem: React.StatelessComponent<ValueItemProps> = ({ iconSrc, text }) => {
-    return (
-        <Container marginBottom="25px">
-            <div className="flex items-center">
-                <Image className="flex-none pr2" width="20px" src={iconSrc} />
-                <div className="flex-auto">
-                    <Text fontSize="14px" lineHeight="24px" fontWeight="bold">
-                        {text}
-                    </Text>
-                </div>
-            </div>
-        </Container>
-    );
-};
diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
deleted file mode 100644
index 728e17f9e..000000000
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { colors, utils as sharedUtils } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-import * as DocumentTitle from 'react-document-title';
-
-import { Footer } from 'ts/components/footer';
-import { MetaTags } from 'ts/components/meta_tags';
-import { TopBar } from 'ts/components/top_bar/top_bar';
-import { Container } from 'ts/components/ui/container';
-import { Benefits } from 'ts/pages/jobs/benefits';
-import { Join0x } from 'ts/pages/jobs/join_0x';
-import { Mission } from 'ts/pages/jobs/mission';
-import { OpenPositions } from 'ts/pages/jobs/open_positions';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { ScreenWidths } from 'ts/types';
-import { Translate } from 'ts/utils/translate';
-import { utils } from 'ts/utils/utils';
-
-const OPEN_POSITIONS_HASH = 'positions';
-const THROTTLE_TIMEOUT = 100;
-const DOCUMENT_TITLE = 'Careers at 0x';
-const DOCUMENT_DESCRIPTION = 'Join 0x in creating a tokenized world where all value can flow freely';
-
-export interface JobsProps {
-    location: Location;
-    translate: Translate;
-    dispatcher: Dispatcher;
-    screenWidth: ScreenWidths;
-}
-
-export interface JobsState {}
-
-export class Jobs extends React.Component<JobsProps, JobsState> {
-    // TODO: consolidate this small screen scaffolding into one place (its being used in portal and docs as well)
-    private readonly _throttledScreenWidthUpdate: () => void;
-    public constructor(props: JobsProps) {
-        super(props);
-        this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
-    }
-    public componentDidMount(): void {
-        window.addEventListener('resize', this._throttledScreenWidthUpdate);
-        window.scrollTo(0, 0);
-    }
-    public render(): React.ReactNode {
-        return (
-            <Container overflowX="hidden">
-                <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} />
-                <DocumentTitle title={DOCUMENT_TITLE} />
-                <TopBar
-                    blockchainIsLoaded={false}
-                    location={this.props.location}
-                    style={{ backgroundColor: colors.white, position: 'relative' }}
-                    translate={this.props.translate}
-                />
-                <Join0x onCallToActionClick={this._onJoin0xCallToActionClick.bind(this)} />
-                <Mission screenWidth={this.props.screenWidth} />
-                <Benefits screenWidth={this.props.screenWidth} />
-                <OpenPositions hash={OPEN_POSITIONS_HASH} screenWidth={this.props.screenWidth} />
-                <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
-            </Container>
-        );
-    }
-    private _onJoin0xCallToActionClick(): void {
-        sharedUtils.setUrlHash(OPEN_POSITIONS_HASH);
-        sharedUtils.scrollToHash(OPEN_POSITIONS_HASH, '');
-    }
-    private _updateScreenWidth(): void {
-        const newScreenWidth = utils.getScreenWidth();
-        this.props.dispatcher.updateScreenWidth(newScreenWidth);
-    }
-}
diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx
deleted file mode 100644
index e869cd455..000000000
--- a/packages/website/ts/pages/jobs/join_0x.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { colors } from '@0x/react-shared';
-
-import * as React from 'react';
-
-import { Button } from 'ts/components/ui/button';
-import { Container } from 'ts/components/ui/container';
-import { Image } from 'ts/components/ui/image';
-import { Text } from 'ts/components/ui/text';
-import { constants } from 'ts/utils/constants';
-
-const BUTTON_TEXT = 'View open positions';
-
-export interface Join0xProps {
-    onCallToActionClick: () => void;
-}
-
-export const Join0x = (props: Join0xProps) => (
-    <div className="clearfix center lg-py4 md-py4" style={{ backgroundColor: colors.white, color: colors.black }}>
-        <div
-            className="mx-auto inline-block align-middle py4"
-            style={{ lineHeight: '44px', textAlign: 'center', position: 'relative' }}
-        >
-            <Container className="sm-hide xs-hide" position="absolute" left="100%" marginLeft="80px">
-                <Image src="images/jobs/hero-dots-right.svg" width="400px" />
-            </Container>
-            <Container className="sm-hide xs-hide" position="absolute" right="100%" marginRight="80px">
-                <Image src="images/jobs/hero-dots-left.svg" width="400px" />
-            </Container>
-            <div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}>
-                Join Us in Our Mission
-            </div>
-            <Container className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 sm-center" maxWidth="537px">
-                <Text fontSize="14px" lineHeight="30px">
-                    At 0x, our mission is to create a tokenized world where all value can flow freely.
-                    <br />
-                    <br />We are powering a growing ecosystem of decentralized applications and solving novel challenges
-                    to make our technology intuitive, flexible, and accessible to all.{' '}
-                    <a
-                        style={{ color: colors.mediumBlue, textDecoration: 'none' }}
-                        target="_blank"
-                        href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
-                    >
-                        Read more
-                    </a>{' '}
-                    about our mission, and join us in building financial infrastructure upon which the exchange of
-                    anything of value will take place.
-                </Text>
-            </Container>
-            <div className="py3">
-                <Button
-                    type="button"
-                    backgroundColor={colors.black}
-                    width="290px"
-                    fontColor={colors.white}
-                    fontSize="18px"
-                    fontFamily="Roboto Mono"
-                    onClick={props.onCallToActionClick}
-                >
-                    {BUTTON_TEXT}
-                </Button>
-            </div>
-        </div>
-    </div>
-);
diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx
deleted file mode 100644
index 28546f985..000000000
--- a/packages/website/ts/pages/jobs/mission.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react';
-
-import { Container } from 'ts/components/ui/container';
-import { Image } from 'ts/components/ui/image';
-import { Text } from 'ts/components/ui/text';
-import { colors } from 'ts/style/colors';
-import { ScreenWidths } from 'ts/types';
-
-export interface MissionProps {
-    screenWidth: ScreenWidths;
-}
-export const Mission = (props: MissionProps) => {
-    const shouldShowImage = props.screenWidth === ScreenWidths.Lg;
-    const image = <Image src="/images/jobs/world-map.svg" maxWidth="500px" maxHeight="280px" />;
-    const missionStatementClassName = !shouldShowImage ? 'center' : undefined;
-    const missionStatement = (
-        <Container className={missionStatementClassName} maxWidth="388px">
-            <Text fontFamily="Roboto Mono" fontSize="22px" lineHeight="31px">
-                Powered by a Diverse<br />Worldwide Community
-            </Text>
-            <Container marginTop="32px">
-                <Text fontSize="14px" lineHeight="2em">
-                    We're a highly technical team with varied backgrounds in engineering, science, business, finance,
-                    and research. While the core team is headquartered in San Francisco, there are 30+ teams building on
-                    0x and hundreds of thousands of participants behind our efforts globally. We're passionate about
-                    open-source software and decentralized technology's potential to act as an equalizing force in the
-                    world.
-                </Text>
-            </Container>
-        </Container>
-    );
-    return (
-        <div
-            className="flex flex-column items-center py4 px3"
-            style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }}
-        >
-            {shouldShowImage ? (
-                <Container className="flex items-center" maxWidth="1200px">
-                    {image}
-                    <Container marginLeft="115px">{missionStatement}</Container>
-                </Container>
-            ) : (
-                <Container className="flex flex-column items-center">{missionStatement}</Container>
-            )}
-        </div>
-    );
-};
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
deleted file mode 100644
index b8442a9c4..000000000
--- a/packages/website/ts/pages/jobs/open_positions.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import * as _ from 'lodash';
-import CircularProgress from 'material-ui/CircularProgress';
-import * as React from 'react';
-
-import { Container } from 'ts/components/ui/container';
-import { Retry } from 'ts/components/ui/retry';
-import { Text } from 'ts/components/ui/text';
-import { colors } from 'ts/style/colors';
-import { styled } from 'ts/style/theme';
-import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types';
-import { backendClient } from 'ts/utils/backend_client';
-import { constants } from 'ts/utils/constants';
-import { utils } from 'ts/utils/utils';
-
-const TABLE_ROW_MIN_HEIGHT = 100;
-
-export interface OpenPositionsProps {
-    hash: string;
-    screenWidth: ScreenWidths;
-}
-export interface OpenPositionsState {
-    jobInfos?: WebsiteBackendJobInfo[];
-    error?: Error;
-}
-
-export class OpenPositions extends React.Component<OpenPositionsProps, OpenPositionsState> {
-    private _isUnmounted: boolean;
-    constructor(props: OpenPositionsProps) {
-        super(props);
-        this._isUnmounted = false;
-        this.state = {
-            jobInfos: undefined,
-            error: undefined,
-        };
-    }
-    public componentWillMount(): void {
-        // tslint:disable-next-line:no-floating-promises
-        this._fetchJobInfosAsync();
-    }
-    public componentWillUnmount(): void {
-        this._isUnmounted = true;
-    }
-    public render(): React.ReactNode {
-        const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.jobInfos);
-        const isSmallScreen = utils.isMobileWidth(this.props.screenWidth);
-        return (
-            <Container id={this.props.hash} className="mx-auto pb4 px3 max-width-4">
-                {!isSmallScreen && (
-                    <hr style={{ border: 0, borderTop: 1, borderStyle: 'solid', borderColor: colors.beigeWhite }} />
-                )}
-                <Container marginTop="64px" marginBottom="50px">
-                    <Text fontFamily="Roboto Mono" fontSize="24px" fontColor={colors.black}>
-                        Open Positions
-                    </Text>
-                </Container>
-                {isReadyToRender ? this._renderTable() : this._renderLoading()}
-            </Container>
-        );
-    }
-    private _renderLoading(): React.ReactNode {
-        return (
-            // TODO: consolidate this loading component with the one in portal and RelayerIndex
-            // TODO: possibly refactor into a generic loading container with spinner and retry UI
-            <div className="center">
-                {_.isUndefined(this.state.error) ? (
-                    <CircularProgress size={40} thickness={5} />
-                ) : (
-                    <Retry onRetry={this._fetchJobInfosAsync.bind(this)} />
-                )}
-            </div>
-        );
-    }
-    private _renderTable(): React.ReactNode {
-        return (
-            <Container width="100%">
-                <div>
-                    {_.map(this.state.jobInfos, jobInfo => {
-                        return (
-                            <JobInfoTableRow
-                                key={jobInfo.id}
-                                screenWidth={this.props.screenWidth}
-                                jobInfo={jobInfo}
-                                onClick={this._openJobInfoUrl.bind(this, jobInfo)}
-                            />
-                        );
-                    })}
-                </div>
-                <Container className="center" marginTop="70px">
-                    <Text fontStyle="italic" fontSize="14px">
-                        Interested in telling us why you'd be a valuable addition to the team outside of the positions
-                        listed above?{' '}
-                        <a
-                            style={{ color: colors.mediumBlue, textDecoration: 'none' }}
-                            href={`mailto:${constants.EMAIL_JOBS}`}
-                        >
-                            Email us!
-                        </a>
-                    </Text>
-                </Container>
-            </Container>
-        );
-    }
-    private async _fetchJobInfosAsync(): Promise<void> {
-        try {
-            if (!this._isUnmounted) {
-                this.setState({
-                    jobInfos: undefined,
-                    error: undefined,
-                });
-            }
-            const jobInfos = await backendClient.getJobInfosAsync();
-            if (!this._isUnmounted) {
-                this.setState({
-                    jobInfos,
-                });
-            }
-        } catch (error) {
-            if (!this._isUnmounted) {
-                this.setState({
-                    error,
-                });
-            }
-        }
-    }
-    private _openJobInfoUrl(jobInfo: WebsiteBackendJobInfo): void {
-        const url = jobInfo.url;
-        utils.openUrl(url);
-    }
-}
-
-export interface JobInfoTableRowProps {
-    className?: string;
-    screenWidth: ScreenWidths;
-    jobInfo: WebsiteBackendJobInfo;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-}
-
-const PlainJobInfoTableRow: React.StatelessComponent<JobInfoTableRowProps> = ({
-    className,
-    screenWidth,
-    jobInfo,
-    onClick,
-}) => {
-    const isSmallScreen = screenWidth === ScreenWidths.Sm;
-    const titleClassName = isSmallScreen ? 'col col-12 center' : 'col col-5';
-    const paddingLeft = isSmallScreen ? undefined : '30px';
-    return (
-        <Container className={className} onClick={onClick} marginBottom="30px" paddingLeft={paddingLeft}>
-            <Container className="flex items-center" minHeight={TABLE_ROW_MIN_HEIGHT} width="100%">
-                <Container className="clearfix container" width="100%">
-                    <Container className={titleClassName}>
-                        <Text fontSize="16px" fontWeight="bold" fontColor={colors.mediumBlue}>
-                            {jobInfo.title}
-                        </Text>
-                    </Container>
-                    {!isSmallScreen && (
-                        <Container className="col col-3">
-                            <Text fontSize="16px">{jobInfo.department}</Text>
-                        </Container>
-                    )}
-                    {!isSmallScreen && (
-                        <Container className="col col-4 center">
-                            <Text fontSize="16px">{jobInfo.office}</Text>
-                        </Container>
-                    )}
-                </Container>
-            </Container>
-        </Container>
-    );
-};
-
-export const JobInfoTableRow = styled(PlainJobInfoTableRow)`
-    cursor: pointer;
-    background-color: ${colors.grey100};
-    border-radius: 7px;
-    &:hover {
-        opacity: 0.5;
-    }
-`;
diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx
deleted file mode 100644
index acc9dcb91..000000000
--- a/packages/website/ts/pages/jobs/photo_rail.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { FilledImage } from 'ts/components/ui/filled_image';
-
-export interface PhotoRailProps {
-    images: string[];
-}
-
-export const PhotoRail = (props: PhotoRailProps) => {
-    return (
-        <div className="clearfix" style={{ height: 490 }}>
-            {_.map(props.images, (image: string) => {
-                return (
-                    <div key={image} className="col lg-col-4 md-col-4 col-12 center" style={{ height: '100%' }}>
-                        <FilledImage src={image} />
-                    </div>
-                );
-            })}
-        </div>
-    );
-};
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/pages/landing.tsx
index 4d47fefd9..b47d34dce 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/pages/landing.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import DocumentTitle from 'react-document-title';
 
-import { SectionLandingAbout } from 'ts/@next/components/sections/landing/about';
-import { SectionLandingClients } from 'ts/@next/components/sections/landing/clients';
-import { SectionLandingCta } from 'ts/@next/components/sections/landing/cta';
-import { SectionLandingHero } from 'ts/@next/components/sections/landing/hero';
-import { SiteWrap } from 'ts/@next/components/siteWrap';
+import { SectionLandingAbout } from 'ts/components/sections/landing/about';
+import { SectionLandingClients } from 'ts/components/sections/landing/clients';
+import { SectionLandingCta } from 'ts/components/sections/landing/cta';
+import { SectionLandingHero } from 'ts/components/sections/landing/hero';
+import { SiteWrap } from 'ts/components/siteWrap';
 
-import { ModalContact } from 'ts/@next/components/modals/modal_contact';
+import { ModalContact } from 'ts/components/modals/modal_contact';
 
 interface Props {
     theme: {
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
deleted file mode 100644
index b75b55edb..000000000
--- a/packages/website/ts/pages/landing/landing.tsx
+++ /dev/null
@@ -1,620 +0,0 @@
-import { colors, Link } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-import DocumentTitle from 'react-document-title';
-import { Footer } from 'ts/components/footer';
-import { SubscribeForm } from 'ts/components/forms/subscribe_form';
-import { TopBar } from 'ts/components/top_bar/top_bar';
-import { CallToAction } from 'ts/components/ui/button';
-import { Container } from 'ts/components/ui/container';
-import { Image } from 'ts/components/ui/image';
-import { Text } from 'ts/components/ui/text';
-import { TypedText } from 'ts/components/ui/typed_text';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types';
-import { constants } from 'ts/utils/constants';
-import { Translate } from 'ts/utils/translate';
-import { utils } from 'ts/utils/utils';
-
-interface BoxContent {
-    title: string;
-    description: string;
-    imageUrl: string;
-    classNames: string;
-    maxWidth: number;
-}
-interface UseCase {
-    imageUrl: string;
-    type: string;
-    description: string;
-    classNames: string;
-    style?: React.CSSProperties;
-}
-interface Project {
-    logoFileName: string;
-    projectUrl: string;
-}
-
-const THROTTLE_TIMEOUT = 100;
-const WHATS_NEW_TITLE = 'Introducing 0x Instant';
-const WHATS_NEW_URL = WebsitePaths.Instant;
-const TITLE_STYLE: React.CSSProperties = {
-    fontFamily: 'Roboto Mono',
-    color: colors.grey,
-    fontWeight: 300,
-    letterSpacing: 3,
-};
-const ROTATING_LIST = [
-    'tokens',
-    'game items',
-    'digital art',
-    'futures',
-    'stocks',
-    'derivatives',
-    'loans',
-    'cats',
-    'everything',
-];
-
-const relayerProjects: Project[] = [
-    {
-        logoFileName: 'ethfinex.png',
-        projectUrl: constants.PROJECT_URL_ETHFINEX,
-    },
-    {
-        logoFileName: 'radar_relay.png',
-        projectUrl: constants.PROJECT_URL_RADAR_RELAY,
-    },
-    {
-        logoFileName: 'paradex.png',
-        projectUrl: constants.PROJECT_URL_PARADEX,
-    },
-    {
-        logoFileName: 'the_ocean.png',
-        projectUrl: constants.PROJECT_URL_0CEAN,
-    },
-    {
-        logoFileName: 'amadeus.png',
-        projectUrl: constants.PROJECT_URL_AMADEUS,
-    },
-    {
-        logoFileName: 'ddex.png',
-        projectUrl: constants.PROJECT_URL_DDEX,
-    },
-    {
-        logoFileName: 'decent_ex.png',
-        projectUrl: constants.PROJECT_URL_DECENT_EX,
-    },
-    {
-        logoFileName: 'dextroid.png',
-        projectUrl: constants.PROJECT_URL_DEXTROID,
-    },
-    {
-        logoFileName: 'ercdex.png',
-        projectUrl: constants.PROJECT_URL_ERC_DEX,
-    },
-    {
-        logoFileName: 'open_relay.png',
-        projectUrl: constants.PROJECT_URL_OPEN_RELAY,
-    },
-    {
-        logoFileName: 'idt.png',
-        projectUrl: constants.PROJECT_URL_IDT,
-    },
-    {
-        logoFileName: 'imtoken.png',
-        projectUrl: constants.PROJECT_URL_IMTOKEN,
-    },
-];
-
-export interface LandingProps {
-    location: Location;
-    translate: Translate;
-    dispatcher: Dispatcher;
-}
-
-interface LandingState {
-    screenWidth: ScreenWidths;
-}
-
-export class Landing extends React.Component<LandingProps, LandingState> {
-    private readonly _throttledScreenWidthUpdate: () => void;
-    constructor(props: LandingProps) {
-        super(props);
-        this.state = {
-            screenWidth: utils.getScreenWidth(),
-        };
-        this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
-    }
-    public componentDidMount(): void {
-        window.addEventListener('resize', this._throttledScreenWidthUpdate);
-        window.scrollTo(0, 0);
-    }
-    public componentWillUnmount(): void {
-        window.removeEventListener('resize', this._throttledScreenWidthUpdate);
-    }
-    public render(): React.ReactNode {
-        return (
-            <div id="landing" className="clearfix" style={{ color: colors.grey500 }}>
-                <DocumentTitle title="0x Protocol" />
-                <TopBar
-                    blockchainIsLoaded={false}
-                    location={this.props.location}
-                    isNightVersion={true}
-                    style={{ backgroundColor: colors.heroGrey, position: 'relative' }}
-                    translate={this.props.translate}
-                />
-                {this._renderHero()}
-                {this._renderProjects(
-                    relayerProjects,
-                    this.props.translate.get(Key.RelayersHeader, Deco.Upper),
-                    colors.projectsGrey,
-                    true,
-                )}
-                {this._renderInfoBoxes()}
-                {this._renderTokenizationSection()}
-                {this._renderUseCases()}
-                {this._renderCallToAction()}
-                <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
-            </div>
-        );
-    }
-    private _renderHero(): React.ReactNode {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
-        const left = 'col lg-col-6 md-col-6 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center';
-        const flexClassName = isSmallScreen
-            ? 'flex items-center flex-column justify-center'
-            : 'flex items-center justify-center';
-        return (
-            <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}>
-                <div className="mx-auto max-width-4 clearfix">
-                    {this._renderWhatsNew()}
-                    <div className={`${flexClassName} lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-mt4 md-mt4 sm-mt2 sm-mb4`}>
-                        <Container marginTop="30px" marginBottom="30px" marginLeft="15px" marginRight="15px">
-                            <Image src="/images/landing/0x_homepage.svg" maxWidth="100%" height="auto" />
-                        </Container>
-                        <div className={left} style={{ color: colors.white, height: 390, lineHeight: '390px' }}>
-                            <div
-                                className="inline-block lg-align-middle md-align-middle sm-align-top"
-                                style={{
-                                    paddingLeft: isSmallScreen ? 0 : 12,
-                                    lineHeight: '36px',
-                                }}
-                            >
-                                <Text
-                                    className="sm-pb2"
-                                    fontFamily="Roboto"
-                                    display="inline-block"
-                                    fontColor={colors.grey300}
-                                    fontWeight={500}
-                                    lineHeight="1.3em"
-                                    fontSize={isSmallScreen ? '28px' : '36px'}
-                                >
-                                    {this.props.translate.get(Key.TopHeader, Deco.Cap)}
-                                    {this.props.translate.getLanguage() === Language.English && (
-                                        <React.Fragment>
-                                            {' '}
-                                            for{' '}
-                                            <TypedText
-                                                fontFamily="Roboto"
-                                                display="inline-block"
-                                                fontColor={colors.white}
-                                                fontWeight={700}
-                                                lineHeight="1.3em"
-                                                fontSize={isSmallScreen ? '28px' : '36px'}
-                                                textList={ROTATING_LIST}
-                                                shouldRepeat={true}
-                                            />
-                                        </React.Fragment>
-                                    )}
-                                </Text>
-                                <Container
-                                    className={`pt3 flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`}
-                                >
-                                    <Container paddingRight="20px">
-                                        <Link to={WebsitePaths.Docs}>
-                                            <CallToAction type="light">
-                                                {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
-                                            </CallToAction>
-                                        </Link>
-                                    </Container>
-                                    <div>
-                                        <Link to={WebsitePaths.Portal}>
-                                            <CallToAction>
-                                                {this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
-                                            </CallToAction>
-                                        </Link>
-                                    </div>
-                                </Container>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                {this.props.translate.getLanguage() === Language.English && <SubscribeForm />}
-            </div>
-        );
-    }
-    private _renderWhatsNew(): React.ReactNode {
-        return (
-            <div className="sm-center sm-px1">
-                <a href={WHATS_NEW_URL} className="inline-block text-decoration-none">
-                    <div className="flex items-center sm-pl0 md-pl2 lg-pl0">
-                        <Container
-                            paddingTop="3px"
-                            paddingLeft="8px"
-                            paddingBottom="3px"
-                            paddingRight="8px"
-                            backgroundColor={colors.white}
-                            borderRadius={6}
-                        >
-                            <Text fontSize="14px" fontWeight={500} fontColor={colors.heroGrey}>
-                                New
-                            </Text>
-                        </Container>
-                        <Container marginLeft="12px">
-                            <Text fontSize="16px" fontWeight={500} fontColor={colors.grey300}>
-                                {WHATS_NEW_TITLE}
-                            </Text>
-                        </Container>
-                    </div>
-                </a>
-            </div>
-        );
-    }
-    private _renderProjects(
-        projects: Project[],
-        title: string,
-        backgroundColor: string,
-        isTitleCenter: boolean,
-    ): React.ReactNode {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
-        const projectList = _.map(projects, (project: Project, i: number) => {
-            const isRelayersOnly = projects.length === 12;
-            let colWidth: number;
-            switch (this.state.screenWidth) {
-                case ScreenWidths.Sm:
-                    colWidth = 4;
-                    break;
-
-                case ScreenWidths.Md:
-                    colWidth = 3;
-                    break;
-
-                case ScreenWidths.Lg:
-                    colWidth = isRelayersOnly ? 2 : 2 - i % 2;
-                    break;
-
-                default:
-                    throw new Error(`Encountered unknown ScreenWidths value: ${this.state.screenWidth}`);
-            }
-            return (
-                <div key={`project-${project.logoFileName}`} className={`col col-${colWidth} center`}>
-                    <div>
-                        <a href={project.projectUrl} target="_blank" className="text-decoration-none">
-                            <img
-                                src={`/images/landing/project_logos/${project.logoFileName}`}
-                                height={isSmallScreen ? 60 : 92}
-                            />
-                        </a>
-                    </div>
-                </div>
-            );
-        });
-        return (
-            <div className={`clearfix py4 ${isTitleCenter && 'center'}`} style={{ backgroundColor }}>
-                <div className="mx-auto max-width-4 clearfix sm-px3">
-                    <div className="h4 pb3 lg-pl0 md-pl3 sm-pl2" style={TITLE_STYLE}>
-                        {title}
-                    </div>
-                    <div className="clearfix">{projectList}</div>
-                    <div
-                        className="pt3 mx-auto center"
-                        style={{
-                            color: colors.landingLinkGrey,
-                            fontFamily: 'Roboto Mono',
-                            maxWidth: 300,
-                            fontSize: 14,
-                        }}
-                    >
-                        {this.props.translate.get(Key.FullListPrompt)}{' '}
-                        <Link to={WebsitePaths.Portal} textDecoration="underline" fontColor={colors.landingLinkGrey}>
-                            {this.props.translate.get(Key.FullListLink)}
-                        </Link>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-    private _renderTokenizationSection(): React.ReactNode {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
-        return (
-            <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.grey100 }}>
-                <div className="mx-auto max-width-4 py4 clearfix">
-                    {isSmallScreen && this._renderTokenCloud()}
-                    <div
-                        className="col lg-col-6 md-col-6 col-12 center"
-                        style={{ color: colors.darkestGrey, height: 364, lineHeight: '364px' }}
-                    >
-                        <div
-                            className="mx-auto inline-block lg-align-middle md-align-middle sm-align-top"
-                            style={{ maxWidth: 385, lineHeight: '44px', textAlign: 'left' }}
-                        >
-                            <div className="lg-h1 md-h1 sm-h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}>
-                                {this.props.translate.get(Key.TokenizedSectionHeader, Deco.Cap)}
-                            </div>
-                            <div
-                                className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 h5 sm-center"
-                                style={{ fontFamily: 'Roboto Mono', lineHeight: 1.7, maxWidth: 370 }}
-                            >
-                                {this.props.translate.get(Key.TokenizedSectionDescription, Deco.Cap)}
-                            </div>
-                            <div className="flex pt1 sm-px3">{this._renderMissionAndValuesButton()}</div>
-                        </div>
-                    </div>
-                    {!isSmallScreen && this._renderTokenCloud()}
-                </div>
-            </div>
-        );
-    }
-    private _renderTokenCloud(): React.ReactNode {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
-        return (
-            <div className="col lg-col-6 md-col-6 col-12 center">
-                <img src="/images/landing/tokenized_world.png" height={isSmallScreen ? 280 : 364.5} />
-            </div>
-        );
-    }
-    private _renderMissionAndValuesButton(): React.ReactNode {
-        return (
-            <a
-                href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
-                target="_blank"
-                className="inline-block text-decoration-none"
-            >
-                <CallToAction>{this.props.translate.get(Key.OurMissionAndValues, Deco.CapWords)}</CallToAction>
-            </a>
-        );
-    }
-    private _renderInfoBoxes(): React.ReactNode {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
-        const boxStyle: React.CSSProperties = {
-            maxWidth: 253,
-            height: 402,
-            backgroundColor: colors.grey50,
-            borderRadius: 5,
-            padding: '10px 24px 24px',
-        };
-        const boxContents: BoxContent[] = [
-            {
-                title: this.props.translate.get(Key.BenefitOneTitle, Deco.Cap),
-                description: this.props.translate.get(Key.BenefitOneDescription, Deco.Cap),
-                imageUrl: '/images/landing/distributed_network.png',
-                classNames: '',
-                maxWidth: 160,
-            },
-            {
-                title: this.props.translate.get(Key.BenefitTwoTitle, Deco.Cap),
-                description: this.props.translate.get(Key.BenefitTwoDescription, Deco.Cap),
-                imageUrl: '/images/landing/liquidity.png',
-                classNames: 'mx-auto',
-                maxWidth: 160,
-            },
-            {
-                title: this.props.translate.get(Key.BenefitThreeTitle, Deco.Cap),
-                description: this.props.translate.get(Key.BenefitThreeDescription, Deco.Cap),
-                imageUrl: '/images/landing/exchange_everywhere.png',
-                classNames: 'right',
-                maxWidth: 130,
-            },
-        ];
-        const boxes = _.map(boxContents, (boxContent: BoxContent) => {
-            return (
-                <div key={`box-${boxContent.title}`} className="col lg-col-4 md-col-4 col-12 sm-pb4">
-                    <div className={`center sm-mx-auto ${!isSmallScreen && boxContent.classNames}`} style={boxStyle}>
-                        <Container className="flex items-center" height="210px">
-                            <img
-                                className="mx-auto"
-                                src={boxContent.imageUrl}
-                                style={{ height: 'auto', maxWidth: boxContent.maxWidth }}
-                            />
-                        </Container>
-                        <div className="h3" style={{ color: 'black', fontFamily: 'Roboto Mono' }}>
-                            {boxContent.title}
-                        </div>
-                        <div className="pt2 pb2" style={{ fontFamily: 'Roboto Mono', fontSize: 14 }}>
-                            {boxContent.description}
-                        </div>
-                    </div>
-                </div>
-            );
-        });
-        return (
-            <div className="clearfix" style={{ backgroundColor: colors.heroGrey }}>
-                <div className="center pb3 pt4" style={TITLE_STYLE}>
-                    {this.props.translate.get(Key.BenefitsHeader, Deco.Upper)}
-                </div>
-                <div className="mx-auto pb4 sm-mt2 clearfix" style={{ maxWidth: '60em' }}>
-                    {boxes}
-                </div>
-            </div>
-        );
-    }
-    private _getUseCases(): UseCase[] {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
-        const isEnglish = this.props.translate.getLanguage() === Language.English;
-        if (isEnglish) {
-            return [
-                {
-                    imageUrl: '/images/landing/governance_icon.png',
-                    type: this.props.translate.get(Key.GamingAndCollectables, Deco.Upper),
-                    description: this.props.translate.get(Key.GamingAndCollectablesDescription, Deco.Cap),
-                    classNames: 'lg-px2 md-px2',
-                },
-                {
-                    imageUrl: '/images/landing/prediction_market_icon.png',
-                    type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper),
-                    description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap),
-                    classNames: 'lg-px2 md-px2',
-                },
-                {
-                    imageUrl: '/images/landing/fund_management_icon.png',
-                    type: this.props.translate.get(Key.OrderBooks, Deco.Upper),
-                    description: this.props.translate.get(Key.OrderBooksDescription, Deco.Cap),
-                    classNames: 'lg-px2 md-px2',
-                },
-                {
-                    imageUrl: '/images/landing/loans_icon.png',
-                    type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper),
-                    description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap),
-                    classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6',
-                    style: {
-                        width: 291,
-                        float: 'right',
-                        marginTop: !isSmallScreen ? 38 : 0,
-                    },
-                },
-                {
-                    imageUrl: '/images/landing/stable_tokens_icon.png',
-                    type: this.props.translate.get(Key.StableTokens, Deco.Upper),
-                    description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap),
-                    classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6',
-                    style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 },
-                },
-            ];
-        } else {
-            return [
-                {
-                    imageUrl: '/images/landing/governance_icon.png',
-                    type: this.props.translate.get(Key.DecentralizedGovernance, Deco.Upper),
-                    description: this.props.translate.get(Key.DecentralizedGovernanceDescription, Deco.Cap),
-                    classNames: 'lg-px2 md-px2',
-                },
-                {
-                    imageUrl: '/images/landing/prediction_market_icon.png',
-                    type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper),
-                    description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap),
-                    classNames: 'lg-px2 md-px2',
-                },
-                {
-                    imageUrl: '/images/landing/stable_tokens_icon.png',
-                    type: this.props.translate.get(Key.StableTokens, Deco.Upper),
-                    description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap),
-                    classNames: 'lg-px2 md-px2',
-                },
-                {
-                    imageUrl: '/images/landing/loans_icon.png',
-                    type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper),
-                    description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap),
-                    classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6',
-                    style: {
-                        width: 291,
-                        float: 'right',
-                        marginTop: !isSmallScreen ? 38 : 0,
-                    },
-                },
-                {
-                    imageUrl: '/images/landing/fund_management_icon.png',
-                    type: this.props.translate.get(Key.FundManagement, Deco.Upper),
-                    description: this.props.translate.get(Key.FundManagementDescription, Deco.Cap),
-                    classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6',
-                    style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 },
-                },
-            ];
-        }
-    }
-    private _renderUseCases(): React.ReactNode {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
-        const useCases = this._getUseCases();
-        const cases = _.map(useCases, (useCase: UseCase) => {
-            const style = _.isUndefined(useCase.style) || isSmallScreen ? {} : useCase.style;
-            const useCaseBoxStyle = {
-                color: colors.grey,
-                border: `1px solid ${colors.grey750}`,
-                borderRadius: 4,
-                maxWidth: isSmallScreen ? 375 : 'none',
-                ...style,
-            };
-            const typeStyle: React.CSSProperties = {
-                color: colors.lightGrey,
-                fontSize: 13,
-                textTransform: 'uppercase',
-                fontFamily: 'Roboto Mono',
-                fontWeight: 300,
-            };
-            return (
-                <div
-                    key={`useCase-${useCase.type}`}
-                    className={`col lg-col-4 md-col-4 col-12 sm-pt3 sm-px3 sm-pb3 ${useCase.classNames}`}
-                >
-                    <div className="relative p2 pb2 sm-mx-auto" style={useCaseBoxStyle}>
-                        <div className="absolute center" style={{ top: -35, width: 'calc(100% - 32px)' }}>
-                            <img src={useCase.imageUrl} style={{ height: 50 }} />
-                        </div>
-                        <div className="pt2 center" style={typeStyle}>
-                            {useCase.type}
-                        </div>
-                        <div
-                            className="pt2"
-                            style={{
-                                lineHeight: 1.5,
-                                fontSize: 14,
-                                overflow: 'hidden',
-                                height: 124,
-                            }}
-                        >
-                            {useCase.description}
-                        </div>
-                    </div>
-                </div>
-            );
-        });
-        return (
-            <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}>
-                <div className="center h4 pb3 lg-pl0 md-pl3 sm-pl2" style={TITLE_STYLE}>
-                    {this.props.translate.get(Key.UseCasesHeader, Deco.Upper)}
-                </div>
-                <div className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" style={{ maxWidth: '67em' }}>
-                    {cases}
-                </div>
-            </div>
-        );
-    }
-    private _renderCallToAction(): React.ReactNode {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
-        const callToActionClassNames =
-            'lg-pr3 md-pr3 lg-right-align md-right-align sm-center sm-px3 h4 lg-table-cell md-table-cell';
-        return (
-            <div className="clearfix pb4" style={{ backgroundColor: colors.heroGrey }}>
-                <div className="mx-auto max-width-4 pb4 mb3 clearfix center">
-                    <div className="center inline-block" style={{ textAlign: 'left' }}>
-                        <div
-                            className={callToActionClassNames}
-                            style={{
-                                fontFamily: 'Roboto Mono',
-                                color: colors.white,
-                                lineHeight: isSmallScreen ? 1.7 : 3,
-                            }}
-                        >
-                            {this.props.translate.get(Key.FinalCallToAction, Deco.Cap)}
-                        </div>
-                        <div className="sm-center sm-pt2 lg-table-cell md-table-cell">
-                            <Link to={WebsitePaths.Docs}>
-                                <CallToAction fontSize="15px">
-                                    {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
-                                </CallToAction>
-                            </Link>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-    private _updateScreenWidth(): void {
-        const newScreenWidth = utils.getScreenWidth();
-        if (newScreenWidth !== this.state.screenWidth) {
-            this.setState({
-                screenWidth: newScreenWidth,
-            });
-        }
-    }
-} // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/@next/pages/launch_kit.tsx b/packages/website/ts/pages/launch_kit.tsx
index 605bce91c..dd4de4d99 100644
--- a/packages/website/ts/@next/pages/launch_kit.tsx
+++ b/packages/website/ts/pages/launch_kit.tsx
@@ -2,15 +2,15 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import DocumentTitle from 'react-document-title';
 
-import { Hero } from 'ts/@next/components/hero';
+import { Hero } from 'ts/components/hero';
 
-import { Banner } from 'ts/@next/components/banner';
-import { Button } from 'ts/@next/components/button';
-import { Definition } from 'ts/@next/components/definition';
-import { Icon } from 'ts/@next/components/icon';
-import { SiteWrap } from 'ts/@next/components/siteWrap';
+import { Banner } from 'ts/components/banner';
+import { Button } from 'ts/components/button';
+import { Definition } from 'ts/components/definition';
+import { Icon } from 'ts/components/icon';
+import { SiteWrap } from 'ts/components/siteWrap';
 
-import { Section } from 'ts/@next/components/newLayout';
+import { Section } from 'ts/components/newLayout';
 import { constants } from 'ts/utils/constants';
 
 import { ModalContact } from '../components/modals/modal_contact';
diff --git a/packages/website/ts/pages/launch_kit/launch_kit.tsx b/packages/website/ts/pages/launch_kit/launch_kit.tsx
deleted file mode 100644
index 4ea56dbd4..000000000
--- a/packages/website/ts/pages/launch_kit/launch_kit.tsx
+++ /dev/null
@@ -1,335 +0,0 @@
-import { colors, Link } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-import DocumentTitle from 'react-document-title';
-import { Footer } from 'ts/components/footer';
-import { TopBar } from 'ts/components/top_bar/top_bar';
-import { Button } from 'ts/components/ui/button';
-import { Container } from 'ts/components/ui/container';
-import { Image } from 'ts/components/ui/image';
-import { Text } from 'ts/components/ui/text';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, ScreenWidths } from 'ts/types';
-import { constants } from 'ts/utils/constants';
-import { Translate } from 'ts/utils/translate';
-import { utils } from 'ts/utils/utils';
-
-export interface LaunchKitProps {
-    location: Location;
-    translate: Translate;
-    dispatcher: Dispatcher;
-}
-
-interface LaunchKitState {
-    screenWidth: ScreenWidths;
-}
-
-const THROTTLE_TIMEOUT = 100;
-const lighterBackgroundColor = '#222222';
-const darkerBackgroundColor = '#1B1B1B';
-const grayText = '#999999';
-
-interface Benefit {
-    icon: string;
-    description: string;
-}
-
-export class LaunchKit extends React.Component<LaunchKitProps, LaunchKitState> {
-    private readonly _throttledScreenWidthUpdate: () => void;
-    constructor(props: LaunchKitProps) {
-        super(props);
-        this.state = {
-            screenWidth: utils.getScreenWidth(),
-        };
-        this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
-    }
-    public componentDidMount(): void {
-        window.addEventListener('resize', this._throttledScreenWidthUpdate);
-        window.scrollTo(0, 0);
-    }
-    public componentWillUnmount(): void {
-        window.removeEventListener('resize', this._throttledScreenWidthUpdate);
-    }
-    public render(): React.ReactNode {
-        return (
-            <div id="launchKit" className="clearfix" style={{ color: colors.grey500 }}>
-                <DocumentTitle title="0x Launch Kit" />
-                <TopBar
-                    blockchainIsLoaded={false}
-                    location={this.props.location}
-                    isNightVersion={true}
-                    style={{ backgroundColor: lighterBackgroundColor, position: 'relative' }}
-                    translate={this.props.translate}
-                />
-                {this._renderHero()}
-                {this._renderSection()}
-                {this._renderCallToAction()}
-                {this._renderDisclaimer()}
-                <Footer
-                    backgroundColor={darkerBackgroundColor}
-                    translate={this.props.translate}
-                    dispatcher={this.props.dispatcher}
-                />
-            </div>
-        );
-    }
-    private _renderHero(): React.ReactNode {
-        const BENEFITS_1: Benefit[] = [
-            {
-                icon: '/images/launch_kit/shared_liquidity.svg',
-                description: this.props.translate.get(Key.TapIntoAndShare, Deco.Cap),
-            },
-            {
-                icon: '/images/launch_kit/fork.svg',
-                description: this.props.translate.get(Key.ForkAndExtend, Deco.Cap),
-            },
-            {
-                icon: '/images/launch_kit/enable_trading.svg',
-                description: this.props.translate.get(Key.EnableTrading, Deco.Cap),
-            },
-        ];
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
-        const smallButtonPadding = '12px 30px 12px 30px';
-        const largeButtonPadding = '14px 60px 14px 60px';
-        const left = 'col lg-col-6 md-col-6 col-12 lg-pl2 md-pl2 sm-pl0 sm-px3 sm-center';
-        const flexClassName = isSmallScreen
-            ? 'flex items-center flex-column justify-center'
-            : 'flex items-center justify-center';
-        return (
-            <div className="clearfix pt4" style={{ backgroundColor: lighterBackgroundColor }}>
-                <div className="mx-auto max-width-4 clearfix">
-                    <div className={`${flexClassName} lg-pb4 md-pb4 sm-mb4`}>
-                        <div className={left} style={{ color: colors.white }}>
-                            <div
-                                className="inline-block lg-align-middle md-align-middle sm-align-top"
-                                style={{
-                                    paddingLeft: isSmallScreen ? 0 : 12,
-                                    lineHeight: '36px',
-                                }}
-                            >
-                                <Text
-                                    className="sm-pb2"
-                                    fontFamily="Roboto"
-                                    display="inline-block"
-                                    fontColor={colors.white}
-                                    fontWeight="bold"
-                                    lineHeight="1.3em"
-                                    letterSpacing="1px"
-                                    fontSize={isSmallScreen ? '38px' : '46px'}
-                                >
-                                    {this.props.translate.get(Key.LaunchKit, Deco.CapWords)}
-                                </Text>
-                                <Container paddingTop="18px">
-                                    <Text fontColor={colors.linkSectionGrey} fontSize="18px">
-                                        {this.props.translate.get(Key.LaunchKitPitch, Deco.Cap)}
-                                    </Text>
-                                </Container>
-                                <Container
-                                    paddingTop="54px"
-                                    className={`flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`}
-                                >
-                                    <Container paddingRight="20px">
-                                        <Link to={constants.URL_LAUNCH_KIT} shouldOpenInNewTab={true}>
-                                            <Button
-                                                padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
-                                                borderRadius="4px"
-                                                borderColor={colors.white}
-                                            >
-                                                <Text fontSize="16px" fontWeight="bold">
-                                                    {this.props.translate.get(Key.GetStarted, Deco.Cap)}
-                                                </Text>
-                                            </Button>
-                                        </Link>
-                                    </Container>
-                                    <div>
-                                        <Link to={constants.URL_LAUNCH_KIT_BLOG_POST} shouldOpenInNewTab={true}>
-                                            <Button
-                                                backgroundColor={lighterBackgroundColor}
-                                                borderColor={colors.white}
-                                                fontColor={colors.white}
-                                                padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
-                                                borderRadius="4px"
-                                            >
-                                                <Text fontSize="16px" fontWeight="bold" fontColor={colors.white}>
-                                                    {this.props.translate.get(Key.LearnMore, Deco.Cap)}
-                                                </Text>
-                                            </Button>
-                                        </Link>
-                                    </div>
-                                </Container>
-                            </div>
-                        </div>
-                        <Container
-                            marginTop={isSmallScreen ? '60px' : '30px'}
-                            marginBottom="30px"
-                            marginLeft="15px"
-                            marginRight="15px"
-                        >
-                            <Image
-                                src="/images/launch_kit/0x_cupboard.svg"
-                                maxWidth={isSmallScreen ? '75%' : '100%'}
-                                height="auto"
-                            />
-                        </Container>
-                    </div>
-                </div>
-                {this._renderBenefits(BENEFITS_1)}
-            </div>
-        );
-    }
-    private _renderSection(): React.ReactNode {
-        const BENEFITS_2: Benefit[] = [
-            {
-                icon: '/images/launch_kit/secondary_market.svg',
-                description: this.props.translate.get(Key.QuicklyLaunch, Deco.Cap),
-            },
-            {
-                icon: '/images/launch_kit/in_game_marketplace.svg',
-                description: this.props.translate.get(Key.SeemlesslyCreate, Deco.Cap),
-            },
-            {
-                icon: '/images/launch_kit/local_market.svg',
-                description: this.props.translate.get(Key.LocalMarket, Deco.Cap),
-            },
-        ];
-        return (
-            <div className="clearfix pb4" style={{ backgroundColor: darkerBackgroundColor }}>
-                <Container
-                    className="mx-auto"
-                    textAlign="center"
-                    paddingTop="89px"
-                    paddingBottom="89px"
-                    maxWidth="421px"
-                    paddingLeft="10px"
-                    paddingRight="10px"
-                >
-                    <Text fontSize="26px" lineHeight="37px" fontWeight="medium" fontColor={colors.white}>
-                        {this.props.translate.get(Key.PerfectForDevelopers, Deco.Cap)}
-                    </Text>
-                </Container>
-                {this._renderBenefits(BENEFITS_2)}
-            </div>
-        );
-    }
-    private _renderCallToAction(): React.ReactNode {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
-        const smallButtonPadding = '8px 14px 8px 14px';
-        const largeButtonPadding = '8px 14px 8px 14px';
-        return (
-            <Container
-                className="clearfix"
-                backgroundColor={lighterBackgroundColor}
-                paddingTop="90px"
-                paddingBottom="90px"
-            >
-                <Container className="clearfix mx-auto" maxWidth="850px">
-                    <Container className="lg-left md-left sm-mx-auto sm-pb3" width="348px">
-                        <Text fontColor={colors.white} fontSize="18px">
-                            View our comprehensive documentation to start building today.
-                        </Text>
-                    </Container>
-                    <Container
-                        className={`lg-right md-right flex clearfix sm-mx-auto ${
-                            isSmallScreen ? 'justify-center' : ''
-                        }`}
-                        paddingTop="5px"
-                    >
-                        <Container paddingRight="20px">
-                            <Link to={`${constants.URL_LAUNCH_KIT}/#table-of-contents`} shouldOpenInNewTab={true}>
-                                <Button
-                                    padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
-                                    borderRadius="4px"
-                                    backgroundColor={lighterBackgroundColor}
-                                    borderColor={colors.white}
-                                >
-                                    <Text fontSize="16px" fontWeight="bold" fontColor={colors.white}>
-                                        {this.props.translate.get(Key.ExploreTheDocs, Deco.Cap)}
-                                    </Text>
-                                </Button>
-                            </Link>
-                        </Container>
-                        <div>
-                            <Link to={constants.URL_ZEROEX_CHAT} shouldOpenInNewTab={true}>
-                                <Button
-                                    padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
-                                    borderRadius="4px"
-                                >
-                                    <Text fontSize="16px" fontWeight="bold">
-                                        {this.props.translate.get(Key.GetInTouch, Deco.Cap)}
-                                    </Text>
-                                </Button>
-                            </Link>
-                        </div>
-                    </Container>
-                </Container>
-            </Container>
-        );
-    }
-    private _renderBenefits(benefits: Benefit[]): React.ReactNode {
-        return (
-            <Container className="lg-flex md-flex justify-between mx-auto pb4" maxWidth="890px">
-                {_.map(benefits, benefit => {
-                    return (
-                        <Container className="mx-auto sm-pb4" width="240px">
-                            <Container textAlign="center">
-                                <img src={benefit.icon} />
-                            </Container>
-                            <Container paddingTop="26px">
-                                <Text
-                                    fontSize="18px"
-                                    lineHeight="28px"
-                                    textAlign="center"
-                                    fontColor={colors.linkSectionGrey}
-                                >
-                                    {benefit.description}
-                                </Text>
-                            </Container>
-                        </Container>
-                    );
-                })}
-            </Container>
-        );
-    }
-    private _renderDisclaimer(): React.ReactNode {
-        return (
-            <Container
-                className="clearfix"
-                backgroundColor={darkerBackgroundColor}
-                paddingTop="70px"
-                paddingBottom="70px"
-            >
-                <Container className="mx-auto" maxWidth="850px" paddingLeft="20px" paddingRight="20px">
-                    <Text fontColor={grayText} fontSize="10px">
-                        <b>Disclaimer:</b> The laws and regulations applicable to the use and exchange of digital assets
-                        and blockchain-native tokens, including through any software developed using the licensed work
-                        created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License,
-                        Version 2.0 applicable to the Work, developers are “solely responsible for determining the
-                        appropriateness of using or redistributing the Work,” which includes responsibility for ensuring
-                        compliance with any such applicable laws and regulations.
-                    </Text>
-                    <Container paddingTop="15px">
-                        <Text fontColor={grayText} fontSize="10px">
-                            See the{' '}
-                            <Link
-                                to={constants.URL_APACHE_LICENSE}
-                                shouldOpenInNewTab={true}
-                                textDecoration="underline"
-                            >
-                                Apache License, Version 2.0
-                            </Link>{' '}
-                            for the specific language governing all applicable permissions and limitations.
-                        </Text>
-                    </Container>
-                </Container>
-            </Container>
-        );
-    }
-    private _updateScreenWidth(): void {
-        const newScreenWidth = utils.getScreenWidth();
-        if (newScreenWidth !== this.state.screenWidth) {
-            this.setState({
-                screenWidth: newScreenWidth,
-            });
-        }
-    }
-}
diff --git a/packages/website/ts/@next/pages/market_maker.tsx b/packages/website/ts/pages/market_maker.tsx
index e2d3c75c4..55566c798 100644
--- a/packages/website/ts/@next/pages/market_maker.tsx
+++ b/packages/website/ts/pages/market_maker.tsx
@@ -1,13 +1,13 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { Banner } from 'ts/@next/components/banner';
-import { Button } from 'ts/@next/components/button';
-import { Definition } from 'ts/@next/components/definition';
-import { Hero } from 'ts/@next/components/hero';
-import { ModalContact } from 'ts/@next/components/modals/modal_contact';
-import { Section } from 'ts/@next/components/newLayout';
-import { SiteWrap } from 'ts/@next/components/siteWrap';
+import { Banner } from 'ts/components/banner';
+import { Button } from 'ts/components/button';
+import { Definition } from 'ts/components/definition';
+import { Hero } from 'ts/components/hero';
+import { ModalContact } from 'ts/components/modals/modal_contact';
+import { Section } from 'ts/components/newLayout';
+import { SiteWrap } from 'ts/components/siteWrap';
 
 const offersData = [
     {
diff --git a/packages/website/ts/pages/not_found.tsx b/packages/website/ts/pages/not_found.tsx
index a7992a8fa..6abd8fc80 100644
--- a/packages/website/ts/pages/not_found.tsx
+++ b/packages/website/ts/pages/not_found.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Footer } from 'ts/components/footer';
+import { Footer } from 'ts/components/old_footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { FullscreenMessage } from 'ts/pages/fullscreen_message';
 import { Dispatcher } from 'ts/redux/dispatcher';
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/pages/why.tsx
index cdf7960c2..197ce5fc9 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/pages/why.tsx
@@ -4,14 +4,14 @@ import DocumentTitle from 'react-document-title';
 import ScrollableAnchor, { configureAnchors } from 'react-scrollable-anchor';
 import styled from 'styled-components';
 
-import { Banner } from 'ts/@next/components/banner';
-import { Button } from 'ts/@next/components/button';
-import { Definition } from 'ts/@next/components/definition';
-import { Hero } from 'ts/@next/components/hero';
-import { Column, Section, WrapSticky } from 'ts/@next/components/newLayout';
-import { SiteWrap } from 'ts/@next/components/siteWrap';
-import { Slide, Slider } from 'ts/@next/components/slider/slider';
-import { Heading } from 'ts/@next/components/text';
+import { Banner } from 'ts/components/banner';
+import { Button } from 'ts/components/button';
+import { Definition } from 'ts/components/definition';
+import { Hero } from 'ts/components/hero';
+import { Column, Section, WrapSticky } from 'ts/components/newLayout';
+import { SiteWrap } from 'ts/components/siteWrap';
+import { Slide, Slider } from 'ts/components/slider/slider';
+import { Heading } from 'ts/components/text';
 
 import { ModalContact } from '../components/modals/modal_contact';
 
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index 663f90249..fab382b07 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -39,8 +39,8 @@ export const configs = {
     ] as OutdatedWrappedEtherByNetworkId[],
     // The order matters. We first try first node and only then fall back to others.
     PUBLIC_NODE_URLS_BY_NETWORK_ID: {
-        [1]: [`https://mainnet.infura.io/${INFURA_API_KEY}`, 'https://mainnet.0x.org'],
-        [42]: [`https://kovan.infura.io/${INFURA_API_KEY}`, 'https://kovan.0x.org'],
+        [1]: [`https://mainnet.infura.io/${INFURA_API_KEY}`, 'https://mainnet.0xproject.com'],
+        [42]: [`https://kovan.infura.io/${INFURA_API_KEY}`, 'https://kovan.0xproject.com'],
         [3]: [`https://ropsten.infura.io/${INFURA_API_KEY}`],
         [4]: [`https://rinkeby.infura.io/${INFURA_API_KEY}`],
     } as PublicNodeUrlsByNetworkId,