diff --git a/public/images/screenshots/figma.png b/public/images/screenshots/figma.png
new file mode 100644
index 00000000..42b3c6b3
Binary files /dev/null and b/public/images/screenshots/figma.png differ
diff --git a/public/images/screenshots/framer.png b/public/images/screenshots/framer.png
new file mode 100644
index 00000000..74d0f0c2
Binary files /dev/null and b/public/images/screenshots/framer.png differ
diff --git a/public/images/screenshots/invision.png b/public/images/screenshots/invision.png
new file mode 100644
index 00000000..ba5f852e
Binary files /dev/null and b/public/images/screenshots/invision.png differ
diff --git a/public/images/screenshots/marvel.png b/public/images/screenshots/marvel.png
new file mode 100644
index 00000000..940715f7
Binary files /dev/null and b/public/images/screenshots/marvel.png differ
diff --git a/server/pages/Api.js b/server/pages/Api.js
index f62da61f..c3043009 100644
--- a/server/pages/Api.js
+++ b/server/pages/Api.js
@@ -58,11 +58,11 @@ export default function Pricing() {
   return (
     <Grid>
       <Helmet>
-        <title>API Documentation - Outline</title>
+        <title>Developers - Outline</title>
       </Helmet>
       <Header background="#AA34F0">
-        <h1>Documentation</h1>
-        <p>The API is the heart and soul of Outline.</p>
+        <h1>Developers</h1>
+        <p>Outline is built on an open, best-in-class, API</p>
       </Header>
       <Container>
         <p>
@@ -166,6 +166,11 @@ export default function Pricing() {
             <Arguments />
           </Method>
 
+          <Method method="users.list" label="List team's users">
+            <Description>List all of the users in the team.</Description>
+            <Arguments pagination />
+          </Method>
+
           <Method method="users.info" label="Get current user">
             <Description>
               This method returns the profile info for the user identified by
@@ -630,14 +635,6 @@ export default function Pricing() {
             </Arguments>
           </Method>
 
-          <Method method="team.users" label="List team's users">
-            <Description>
-              List team`s users. This endpoint is only available for admin
-              users.
-            </Description>
-            <Arguments pagination />
-          </Method>
-
           <Method method="shares.list" label="List shared document links">
             <Description>
               List all your currently shared document links.
diff --git a/server/pages/Changelog.js b/server/pages/Changelog.js
index d0c4106f..6dcfdacb 100644
--- a/server/pages/Changelog.js
+++ b/server/pages/Changelog.js
@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import { groupBy, map } from 'lodash';
 import format from 'date-fns/format';
 import styled from 'styled-components';
 import Grid from 'styled-components-grid';
@@ -15,7 +16,13 @@ type Release = {
   created_at: string,
 };
 
-function Changelog({ releases }: { releases: Release[] }) {
+type Props = { releases: Release[] };
+
+function Changelog({ releases }: Props) {
+  const categories = groupBy(releases, i =>
+    format(new Date(i.created_at), 'MMMM, YYYY')
+  );
+
   return (
     <Grid>
       <Helmet>
@@ -28,26 +35,67 @@ function Changelog({ releases }: { releases: Release[] }) {
         </p>
       </Header>
       <Content>
-        {releases.map(release => (
-          <Article key={release.id}>
-            <Heading id={release.name}>
-              <a href={`#${release.name}`}>{release.name}</a>
-            </Heading>
-            <Time dateTime={release.created_at}>
-              {format(new Date(release.created_at), 'MMMM Do, YYYY')}
-            </Time>
-            <Markdown source={release.body} />
-          </Article>
-        ))}
+        <Grid>
+          <Grid.Unit
+            size={{ tablet: 1 / 4 }}
+            visible={{ mobile: false, tablet: true }}
+          >
+            <nav>
+              {map(categories, (releases, category) => (
+                <React.Fragment key={category}>
+                  <h3>{category.split(',')[0]}</h3>
+                  <List>
+                    {releases.map(release => (
+                      <li key={release.id}>
+                        <MenuItem href={`#${release.name}`}>
+                          {release.name}
+                        </MenuItem>
+                      </li>
+                    ))}
+                  </List>
+                </React.Fragment>
+              ))}
+            </nav>
+          </Grid.Unit>
+          <Grid.Unit size={{ tablet: 3 / 4 }}>
+            {releases.map(release => (
+              <Article key={release.id}>
+                <Heading id={release.name}>
+                  <a href={`#${release.name}`}>{release.name}</a>
+                </Heading>
+                <Time dateTime={release.created_at}>
+                  {format(new Date(release.created_at), 'MMMM Do, YYYY')}
+                </Time>
+                <Markdown source={release.body} />
+              </Article>
+            ))}
+          </Grid.Unit>
+        </Grid>
       </Content>
     </Grid>
   );
 }
 
+const MenuItem = styled.a`
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: ${props => props.theme.text};
+`;
+
+const List = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+
 const Heading = styled.h1`
+  margin-top: 0.5em;
+
   a {
     color: ${props => props.theme.text};
   }
+
   a:hover {
     text-decoration: underline;
   }
@@ -66,13 +114,6 @@ const Article = styled.div`
   &:last-child {
     border-bottom: 0;
   }
-
-  img {
-    max-width: 100%;
-    zoom: 50%;
-    box-shadow: 0 10px 80px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-  }
 `;
 
 export default Changelog;
diff --git a/server/pages/components/Header.js b/server/pages/components/Header.js
index 49747413..c17908cf 100644
--- a/server/pages/components/Header.js
+++ b/server/pages/components/Header.js
@@ -20,6 +20,7 @@ const Header = ({ children, background }: Props) => {
 const Wrapper = styled.div`
   width: 100%;
   padding: 8em 0 3em;
+  position: relative;
 
   margin-top: -70px;
   margin-bottom: 2em;
@@ -27,6 +28,17 @@ const Wrapper = styled.div`
   background: ${props => props.background || 'transparent'};
   z-index: -1;
 
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -10%;
+    width: 120%;
+    height: 100%;
+    background: ${props => props.background || 'transparent'};
+    z-index: -10;
+  }
+
   p {
     font-size: 22px;
     font-weight: 500;
diff --git a/server/pages/components/Layout.js b/server/pages/components/Layout.js
index 9040b83b..3e5514cf 100644
--- a/server/pages/components/Layout.js
+++ b/server/pages/components/Layout.js
@@ -78,7 +78,7 @@ function Layout({ children, loggedIn, sessions }: Props) {
 const Body = styled.body`
   padding: 0 30px;
 
-  ${breakpoint('tablet')`
+  ${breakpoint('desktop')`
     padding: 0;
   `};
 `;
diff --git a/server/pages/components/Markdown.js b/server/pages/components/Markdown.js
index 3af38cd1..0210dc4d 100644
--- a/server/pages/components/Markdown.js
+++ b/server/pages/components/Markdown.js
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 export default styled(ReactMarkdown)`
   blockquote {
     margin-left: 0;
+    margin-right: 0;
     background-color: ${props => props.theme.smoke};
     border-left: 6px solid ${props => props.theme.smokeDark};
     padding: 15px 30px 15px 15px;
@@ -15,4 +16,11 @@ export default styled(ReactMarkdown)`
       margin: 0;
     }
   }
+
+  img {
+    max-width: 100%;
+    zoom: 50%;
+    box-shadow: 0 10px 80px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+  }
 `;
diff --git a/server/pages/integrations/Integration.js b/server/pages/integrations/Integration.js
index bc935b5e..bc261980 100644
--- a/server/pages/integrations/Integration.js
+++ b/server/pages/integrations/Integration.js
@@ -32,10 +32,13 @@ export default function Integration({ integration, content }: Props) {
       </Header>
       <Content>
         <Grid>
-          <Grid.Unit size={{ desktop: 1 / 4 }}>
-            <Menu integrations={integrations} />
+          <Grid.Unit
+            size={{ tablet: 1 / 4 }}
+            visible={{ mobile: false, tablet: true }}
+          >
+            <Menu integrations={integrations} active={integration.slug} />
           </Grid.Unit>
-          <Grid.Unit size={{ desktop: 3 / 4 }}>
+          <Grid.Unit size={{ tablet: 3 / 4 }}>
             <Markdown source={content} />
           </Grid.Unit>
         </Grid>
diff --git a/server/pages/integrations/Menu.js b/server/pages/integrations/Menu.js
index 186d4cfd..87428cc7 100644
--- a/server/pages/integrations/Menu.js
+++ b/server/pages/integrations/Menu.js
@@ -3,7 +3,12 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { map, groupBy } from 'lodash';
 
-export default function IntegrationMenu({ integrations }: { integrations: * }) {
+type Props = {
+  integrations: *,
+  active: string,
+};
+
+export default function IntegrationMenu({ integrations, active }: Props) {
   const categories = groupBy(integrations, i => i.category);
 
   return (
@@ -14,7 +19,10 @@ export default function IntegrationMenu({ integrations }: { integrations: * }) {
           <List>
             {integrations.map(i => (
               <li key={i.slug}>
-                <MenuItem href={`/integrations/${i.slug}`}>
+                <MenuItem
+                  href={`/integrations/${i.slug}`}
+                  active={i.slug === active}
+                >
                   <Logo src={`/images/${i.slug}.png`} alt={i.name} />
                   <span>{i.name}</span>
                 </MenuItem>
@@ -31,6 +39,7 @@ const MenuItem = styled.a`
   display: flex;
   align-items: center;
   font-size: 16px;
+  font-weight: ${props => (props.active ? '600' : 'inherit')};
   color: ${props => props.theme.text};
 `;
 
diff --git a/server/pages/integrations/content.json b/server/pages/integrations/content.json
index f8b95fd4..9ff91adb 100644
--- a/server/pages/integrations/content.json
+++ b/server/pages/integrations/content.json
@@ -4,32 +4,28 @@
     "name": "Figma",
     "url": "https://figma.com",
     "category": "Design",
-    "description": "Figma is a collaborative interface design tool",
-    "content": "Embed interactive Figma designs into your Outline docs. Paste a link to a Figma public share link to instantly convert into a rich preview."
+    "description": "Figma is a collaborative interface design tool"
   },
   {
     "slug": "framer",
     "name": "Framer",
     "url": "https://framer.com",
     "category": "Design",
-    "description": "Framer is an interactive design and prototyping tool",
-    "content": "Embed interactive Framer prototypes into your Outline docs. Paste a link to a Framer cloud link to instantly convert into an interactive embed."
+    "description": "Framer is an interactive design and prototyping tool"
   },
   {
     "slug": "invision",
     "name": "InVision",
     "url": "https://invision.com",
     "category": "Design",
-    "description": "InVision is an online design and prototyping tool",
-    "content": "Embed interactive InVision prototypes into your Outline docs. Paste an InVision share link to instantly convert into an interactive prototype."
+    "description": "InVision is an online design and prototyping tool"
   },
   {
     "slug": "marvel",
     "name": "Marvel",
     "url": "https://marvelapp.com",
     "category": "Design",
-    "description": "The all-in-one platform powering design",
-    "content": "Marvel prototypes inside your Outline docs. Paste a Marvel link to instantly convert into an interactive prototype."
+    "description": "The all-in-one platform powering design"
   },
   {
     "slug": "airtable",
diff --git a/server/pages/integrations/figma.md b/server/pages/integrations/figma.md
index 34c2280e..407a3168 100644
--- a/server/pages/integrations/figma.md
+++ b/server/pages/integrations/figma.md
@@ -2,4 +2,6 @@ In an Outline document, paste a link to a [Figma](https://figma.com) design and
 
 Because Figma is an online design tool you can see design work happening in realtime, right within Outline. Embed design specs, product designs, or marketing materials easily.
 
+![Figma Outline Integration](/images/screenshots/figma.png)
+
 > This integration works without any additional settings or authentication.
\ No newline at end of file
diff --git a/server/pages/integrations/framer.md b/server/pages/integrations/framer.md
new file mode 100644
index 00000000..1d9ea984
--- /dev/null
+++ b/server/pages/integrations/framer.md
@@ -0,0 +1,7 @@
+In an Outline document, paste a link to a [Framer](https://framer.com) design or prototype hosted on Framer Cloud and it will be instantly turned into an interactive, live preview.
+
+Host your prototypes, designs, and mocks inside Outline to document your product or design system. [Learn more about sharing links](https://blog.framer.com/framer-cloud-access-d6bdb192510d) with Framer cloud.
+
+![Framer Outline Integration](/images/screenshots/framer.png)
+
+> This integration works without any additional settings or authentication.
diff --git a/server/pages/integrations/invision.md b/server/pages/integrations/invision.md
new file mode 100644
index 00000000..a05b9826
--- /dev/null
+++ b/server/pages/integrations/invision.md
@@ -0,0 +1,7 @@
+In an Outline document, paste a share link to an [InVision](https://invision.com) prototype and it will be immediately converted into an interactive, live embed.
+
+Embedding prototypes in your knowledge base is a great way to create product specs or document user feedback. [Learn more about sharing links](https://support.invisionapp.com/hc/en-us/sections/200697249-Sharing-Prototypes) from InVision.
+
+![InVision Outline Integration](/images/screenshots/invision.png)
+
+> This integration works without any additional settings or authentication.
diff --git a/server/pages/integrations/marvel.md b/server/pages/integrations/marvel.md
new file mode 100644
index 00000000..04e70916
--- /dev/null
+++ b/server/pages/integrations/marvel.md
@@ -0,0 +1,7 @@
+In an Outline document, paste a share link to a [Marvel](https://marvelapp.com) prototype and it will be immediately converted into an interactive, live embed.
+
+Embedding prototypes in your knowledge base is a great way to create product specs with engineers or document user feedback.
+
+![Marvel Outline Integration](/images/screenshots/marvel.png)
+
+> This integration works without any additional settings or authentication.