diff --git a/packages/website/ts/components/docs/community_link.tsx b/packages/website/ts/components/docs/community_link.tsx
index 7c4a5ef8ea..f367bb7e59 100644
--- a/packages/website/ts/components/docs/community_link.tsx
+++ b/packages/website/ts/components/docs/community_link.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { Link } from '@0x/react-shared';
+
 import { Icon } from 'ts/components/icon';
 import { Heading, Paragraph } from 'ts/components/text';
 
@@ -14,7 +16,7 @@ export interface ICommunityLinkProps {
 }
 
 export const CommunityLink: React.FC<ICommunityLinkProps> = props => (
-    <CommunityLinkWrapper href={props.url}>
+    <CommunityLinkWrapper to={props.url}>
         <CommunityIcon color={colors.brandLight} name={props.icon} margin={[0, 0, 24, 0]} />
         <Heading size="small" marginBottom="8px">
             {props.heading}
@@ -25,7 +27,7 @@ export const CommunityLink: React.FC<ICommunityLinkProps> = props => (
     </CommunityLinkWrapper>
 );
 
-const CommunityLinkWrapper = styled.a`
+const CommunityLinkWrapper = styled(Link)`
     background-color: ${colors.backgroundLight};
     border: 1px solid #dbdfdd;
     padding: 50px;
diff --git a/packages/website/ts/components/docs/get_started_link.tsx b/packages/website/ts/components/docs/get_started_link.tsx
index 7d10aa611a..6e24c9779e 100644
--- a/packages/website/ts/components/docs/get_started_link.tsx
+++ b/packages/website/ts/components/docs/get_started_link.tsx
@@ -14,7 +14,7 @@ export interface IGetStartedLinkProps {
 
 export const GetStartedLink: React.FC<IGetStartedLinkProps> = props => (
     <>
-        <GetStartedButton color={colors.brandDark} href={props.url} isWithArrow={true}>
+        <GetStartedButton color={colors.brandDark} to={props.url} isWithArrow={true}>
             {props.heading}
         </GetStartedButton>
         <GetStartedParagraph color={colors.textDarkPrimary} isMuted={1}>
diff --git a/packages/website/ts/components/docs/note.tsx b/packages/website/ts/components/docs/note.tsx
index 6b85365851..21f37bb1af 100644
--- a/packages/website/ts/components/docs/note.tsx
+++ b/packages/website/ts/components/docs/note.tsx
@@ -11,8 +11,10 @@ export interface INoteProps {
 
 export const Note: React.FC<INoteProps> = props => (
     <NoteWrapper>
-        <NoteHeading marginBottom="6px">{props.heading}</NoteHeading>
-        <NoteDescription>{props.description}</NoteDescription>
+        <Heading asElement="h4" color={colors.brandDark} size={17} marginBottom="6px">
+            {props.heading}
+        </Heading>
+        <Description>{props.description}</Description>
     </NoteWrapper>
 );
 
@@ -26,13 +28,8 @@ const NoteWrapper = styled.div`
     margin-bottom: 30px;
 `;
 
-const NoteHeading = styled(Heading).attrs({ color: colors.brandDark, asElement: 'h4' })`
-    font-size: 0.944444444rem !important;
-    margin-bottom: 6px;
-`;
-
-const NoteDescription = styled(Paragraph)`
-    font-size: 0.888888889rem;
+const Description = styled(Paragraph)`
+    font-size: 0.88rem;
     margin-bottom: 0;
     line-height: 1.4;
     opacity: 1;
diff --git a/packages/website/ts/components/docs/resource/resource.tsx b/packages/website/ts/components/docs/resource/resource.tsx
index b13c3932d3..ab40d9ae9f 100644
--- a/packages/website/ts/components/docs/resource/resource.tsx
+++ b/packages/website/ts/components/docs/resource/resource.tsx
@@ -19,7 +19,7 @@ export interface IResourceProps {
 
 export const Resource: React.FC<IResourceProps> = ({ heading, description, isCommunity, url, tags }) => {
     return (
-        <Wrapper>
+        <ResourceWrapper>
             <Heading color={colors.brandDark} size="small" marginBottom="8px">
                 <Link to={url}>{heading}</Link>
             </Heading>
@@ -35,11 +35,11 @@ export const Resource: React.FC<IResourceProps> = ({ heading, description, isCom
                 </Tags>
                 <Level difficulty={Difficulty.Beginner} />
             </Meta>
-        </Wrapper>
+        </ResourceWrapper>
     );
 };
 
-const Wrapper = styled.div`
+const ResourceWrapper = styled.div`
     border: 1px solid #d7e3db;
     padding: 25px 30px 5px;
     margin-bottom: 1.1rem;
diff --git a/packages/website/ts/components/docs/resource/tag.tsx b/packages/website/ts/components/docs/resource/tag.tsx
index 32a03b3327..676adf99c0 100644
--- a/packages/website/ts/components/docs/resource/tag.tsx
+++ b/packages/website/ts/components/docs/resource/tag.tsx
@@ -16,7 +16,7 @@ export const Tag: React.FC<ITagProps> = ({ children, isInverted }) => {
         <TagText isInverted={isInverted}>
             {isInverted && (
                 <svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M1 4.5L3.5 7L9 1" stroke="white" stroke-width="1.5" />
+                    <path d="M1 4.5L3.5 7L9 1" stroke="white" strokeWidth="1.5" />
                 </svg>
             )}
             {children}
diff --git a/packages/website/ts/components/docs/shortcut_link.tsx b/packages/website/ts/components/docs/shortcut_link.tsx
index ccef70e9ce..bf1fcdc95a 100644
--- a/packages/website/ts/components/docs/shortcut_link.tsx
+++ b/packages/website/ts/components/docs/shortcut_link.tsx
@@ -4,18 +4,18 @@ import styled from 'styled-components';
 import { Icon } from 'ts/components/icon';
 import { Heading, Paragraph } from 'ts/components/text';
 
+import { Link } from '@0x/react-shared';
+
 import { colors } from 'ts/style/colors';
 export interface IShortcutLinkProps {
     heading: string;
     icon: string;
     description?: string;
     url: string;
-    shouldOpenInNewTab?: boolean;
-    isHome?: boolean;
 }
 
 export const ShortcutLink: React.FC<IShortcutLinkProps> = props => (
-    <ShortcutLinkWrapper isHome={props.isHome} href={props.url}>
+    <ShortcutLinkWrapper to={props.url}>
         <ShortcutIcon color={colors.brandLight} name={props.icon} />
         <div>
             <Heading size="small" marginBottom="8px">
@@ -28,10 +28,6 @@ export const ShortcutLink: React.FC<IShortcutLinkProps> = props => (
     </ShortcutLinkWrapper>
 );
 
-ShortcutLink.defaultProps = {
-    isHome: false,
-};
-
 const ShortcutIcon = styled(Icon)`
     margin-bottom: 1rem;
 
@@ -41,7 +37,7 @@ const ShortcutIcon = styled(Icon)`
     }
 `;
 
-const ShortcutLinkWrapper = styled.a<{ isHome: boolean }>`
+const ShortcutLinkWrapper = styled(Link)`
     background-color: ${colors.backgroundLight};
     border: 1px solid #dbdfdd;
     padding: 50px;
diff --git a/packages/website/ts/components/docs/step_link.tsx b/packages/website/ts/components/docs/step_link.tsx
index f24380a876..f1a295d0d4 100644
--- a/packages/website/ts/components/docs/step_link.tsx
+++ b/packages/website/ts/components/docs/step_link.tsx
@@ -1,16 +1,17 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { Link } from '@0x/react-shared';
+
 import { colors } from 'ts/style/colors';
 
 export interface IStepLinkConfig {
     title: string;
     url: string;
-    shouldOpenInNewTab?: boolean;
 }
 
 export const StepLink: React.FC<IStepLinkConfig> = props => (
-    <StepLinkWrapper href={props.url}>
+    <StepLinkWrapper to={props.url}>
         <StepLinkText>{props.title}</StepLinkText>
         <svg height="14px" width="14px" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
@@ -23,7 +24,7 @@ export const StepLink: React.FC<IStepLinkConfig> = props => (
     </StepLinkWrapper>
 );
 
-const StepLinkWrapper = styled.a`
+const StepLinkWrapper = styled(Link)`
     color: ${colors.brandDark};
     padding: 21px 25px 19px;
     display: flex;
diff --git a/packages/website/ts/pages/docs/page_template.tsx b/packages/website/ts/pages/docs/page_template.tsx
index eba50f1f79..ff9f59be09 100644
--- a/packages/website/ts/pages/docs/page_template.tsx
+++ b/packages/website/ts/pages/docs/page_template.tsx
@@ -12,6 +12,7 @@ import { Note } from 'ts/components/docs/note';
 import { Notification } from 'ts/components/docs/notification';
 import { OrderedList } from 'ts/components/docs/ordered_list';
 import { Resource } from 'ts/components/docs/resource/resource';
+import { Separator } from 'ts/components/docs/separator';
 import { FilterGroup, Filters } from 'ts/components/docs/sidebar/filters';
 import { SiteWrap } from 'ts/components/docs/siteWrap';
 import { IStepLinkConfig } from 'ts/components/docs/step_link';
@@ -29,10 +30,11 @@ export const DocsPageTemplate: React.FC = () => {
         <SiteWrap theme="light">
             <DocumentTitle {...documentConstants.DOCS} />
             <Hero title={`Page Template`} description="This a subheader for the page" />
-            <Section maxWidth="1030px" isPadded={false}>
+            <Section maxWidth="1150px" isPadded={false} overflow="visible">
                 <Columns>
                     <Filters groups={filterGroups} />
-                    <article>
+                    <Separator />
+                    <ContentWrapper>
                         <LargeHeading>Large Heading</LargeHeading>
                         <LargeIntro>Larger introduction text</LargeIntro>
                         <Heading asElement="h2" size="default">
@@ -209,23 +211,23 @@ export const DocsPageTemplate: React.FC = () => {
                                 heading="RadarRelay SDK"
                                 description="A description could possibly go here but could be tight."
                                 icon="flexibleIntegration"
-                                url="#"
+                                url="/"
                             />
                             <FeatureLink
                                 heading="RadarRelay SDK"
                                 description="A description could possibly go here but could be tight."
                                 icon="flexibleIntegration"
-                                url="#"
+                                url="/"
                             />
                             <FeatureLink
                                 heading="RadarRelay SDK"
                                 description="A description could possibly go here but could be tight."
                                 icon="flexibleIntegration"
-                                url="#"
+                                url="/"
                             />
                         </div>
                         <NewsletterWidget />
-                    </article>
+                    </ContentWrapper>
                 </Columns>
             </Section>
         </SiteWrap>
@@ -234,9 +236,16 @@ export const DocsPageTemplate: React.FC = () => {
 
 const Columns = styled.div`
     display: grid;
-    grid-template-columns: 230px 1fr;
+    grid-template-columns: 65px 0 1fr;
     grid-column-gap: 118px;
-    grid-row-gap: 30px;
+
+    @media (max-width: 900px) {
+        grid-template-columns: 1fr;
+    }
+`;
+
+const ContentWrapper = styled.article`
+    min-width: 0;
 `;
 
 const LargeHeading = styled(Heading).attrs({