diff --git a/app/scenes/Document/components/Branding.js b/app/scenes/Document/components/Branding.js
index 47c7eefc..40e52299 100644
--- a/app/scenes/Document/components/Branding.js
+++ b/app/scenes/Document/components/Branding.js
@@ -6,7 +6,7 @@ import OutlineLogo from 'shared/components/OutlineLogo';
 function Branding() {
   return (
     <Link href={process.env.URL}>
-      <OutlineLogo />&nbsp;Outline
+      <OutlineLogo size={16} fill="#000" />&nbsp;Outline
     </Link>
   );
 }
diff --git a/public/images/figma.png b/public/images/figma.png
index 15ce6993..23ba64a6 100755
Binary files a/public/images/figma.png and b/public/images/figma.png differ
diff --git a/server/api/middlewares/errorHandling.js b/server/api/middlewares/errorHandling.js
index 5acd500a..9c5100b5 100644
--- a/server/api/middlewares/errorHandling.js
+++ b/server/api/middlewares/errorHandling.js
@@ -23,7 +23,12 @@ export default function errorHandling() {
         }
       }
 
-      if (message.match('Authorization error')) {
+      if (message.match(/Not found/i)) {
+        ctx.status = 404;
+        error = 'not_found';
+      }
+
+      if (message.match(/Authorization error/i)) {
         ctx.status = 403;
         error = 'authorization_error';
       }
diff --git a/server/pages/Changelog.js b/server/pages/Changelog.js
index 3bc6f645..d0c4106f 100644
--- a/server/pages/Changelog.js
+++ b/server/pages/Changelog.js
@@ -3,8 +3,8 @@ import * as React from 'react';
 import format from 'date-fns/format';
 import styled from 'styled-components';
 import Grid from 'styled-components-grid';
-import ReactMarkdown from 'react-markdown';
 import { Helmet } from 'react-helmet';
+import Markdown from './components/Markdown';
 import Header from './components/Header';
 import Content from './components/Content';
 
@@ -36,7 +36,7 @@ function Changelog({ releases }: { releases: Release[] }) {
             <Time dateTime={release.created_at}>
               {format(new Date(release.created_at), 'MMMM Do, YYYY')}
             </Time>
-            <ReactMarkdown source={release.body} />
+            <Markdown source={release.body} />
           </Article>
         ))}
       </Content>
diff --git a/server/pages/Integration.js b/server/pages/Integration.js
deleted file mode 100644
index 97e6c99a..00000000
--- a/server/pages/Integration.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// @flow
-import * as React from 'react';
-import { find } from 'lodash';
-import Grid from 'styled-components-grid';
-import { Helmet } from 'react-helmet';
-import Header from './components/Header';
-import Content from './components/Content';
-import IntegrationMenu from './components/IntegrationMenu';
-import integrations from '../config/integrations';
-
-export default function Integration({ slug }: { slug: string }) {
-  const integation = find(integrations, i => i.slug === slug);
-
-  return (
-    <Grid>
-      <Helmet>
-        <title>{integation.name} Integration</title>
-      </Helmet>
-      <Header>
-        <h1>{integation.name} Integration</h1>
-        <p>{integation.description}</p>
-      </Header>
-      <Content>
-        <IntegrationMenu integrations={integrations} />
-        <div />
-      </Content>
-    </Grid>
-  );
-}
diff --git a/server/pages/components/IntegrationMenu.js b/server/pages/components/IntegrationMenu.js
deleted file mode 100644
index ac018898..00000000
--- a/server/pages/components/IntegrationMenu.js
+++ /dev/null
@@ -1,24 +0,0 @@
-// @flow
-import { map, groupBy } from 'lodash';
-import * as React from 'react';
-
-export default function IntegrationMenu({ integrations }) {
-  const categories = groupBy(integrations, i => i.category);
-
-  return (
-    <nav>
-      {map(categories, (integrations, category) => (
-        <React.Fragment>
-          <h3>{category}</h3>
-          <ul>
-            {integrations.map(i => (
-              <li>
-                <a href={`/integrations/${i.slug}`}>{i.name}</a>
-              </li>
-            ))}
-          </ul>
-        </React.Fragment>
-      ))}
-    </nav>
-  );
-}
diff --git a/server/pages/components/Markdown.js b/server/pages/components/Markdown.js
new file mode 100644
index 00000000..3af38cd1
--- /dev/null
+++ b/server/pages/components/Markdown.js
@@ -0,0 +1,18 @@
+// @flow
+import ReactMarkdown from 'react-markdown';
+import styled from 'styled-components';
+
+export default styled(ReactMarkdown)`
+  blockquote {
+    margin-left: 0;
+    background-color: ${props => props.theme.smoke};
+    border-left: 6px solid ${props => props.theme.smokeDark};
+    padding: 15px 30px 15px 15px;
+    font-style: italic;
+    font-size: 16px;
+
+    p {
+      margin: 0;
+    }
+  }
+`;
diff --git a/server/pages/components/Navigation.js b/server/pages/components/Navigation.js
index 20bd4713..d63c8133 100644
--- a/server/pages/components/Navigation.js
+++ b/server/pages/components/Navigation.js
@@ -4,6 +4,7 @@ import { sortBy } from 'lodash';
 import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import Centered from './Centered';
+import OutlineLogo from '../../../shared/components/OutlineLogo';
 import TeamLogo from '../../../shared/components/TeamLogo';
 import { fadeAndScaleIn } from '../../../shared/styles/animations';
 import {
@@ -37,7 +38,9 @@ function TopNavigation({ sessions, loggedIn }: Props) {
 
   return (
     <Nav>
-      <Brand href={process.env.URL}>Outline</Brand>
+      <Brand href={process.env.URL}>
+        <OutlineLogo size={18} fill="#000" />&nbsp;Outline
+      </Brand>
       <Menu>
         <MenuItemDesktop>
           <a href={features()}>Features</a>
@@ -247,6 +250,8 @@ const BottomNav = styled.nav`
 `;
 
 const Brand = styled.a`
+  display: flex;
+  align-items: center;
   font-weight: 600;
   font-size: 20px;
   text-decoration: none;
diff --git a/server/pages/integrations/Integration.js b/server/pages/integrations/Integration.js
new file mode 100644
index 00000000..bc935b5e
--- /dev/null
+++ b/server/pages/integrations/Integration.js
@@ -0,0 +1,45 @@
+// @flow
+import * as React from 'react';
+import Grid from 'styled-components-grid';
+import { Helmet } from 'react-helmet';
+import Markdown from '../components/Markdown';
+import Header from '../components/Header';
+import Content from '../components/Content';
+import Menu from './Menu';
+import integrations from './content';
+
+type TIntegration = {
+  slug: string,
+  name: string,
+  url: string,
+  description: string,
+};
+
+type Props = {
+  integration: TIntegration,
+  content: string,
+};
+
+export default function Integration({ integration, content }: Props) {
+  return (
+    <Grid>
+      <Helmet>
+        <title>{integration.name} Integration</title>
+      </Helmet>
+      <Header background="#F4F7FA">
+        <h1>{integration.name} Integration</h1>
+        <p>{integration.description}</p>
+      </Header>
+      <Content>
+        <Grid>
+          <Grid.Unit size={{ desktop: 1 / 4 }}>
+            <Menu integrations={integrations} />
+          </Grid.Unit>
+          <Grid.Unit size={{ desktop: 3 / 4 }}>
+            <Markdown source={content} />
+          </Grid.Unit>
+        </Grid>
+      </Content>
+    </Grid>
+  );
+}
diff --git a/server/pages/integrations/Menu.js b/server/pages/integrations/Menu.js
new file mode 100644
index 00000000..186d4cfd
--- /dev/null
+++ b/server/pages/integrations/Menu.js
@@ -0,0 +1,48 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import { map, groupBy } from 'lodash';
+
+export default function IntegrationMenu({ integrations }: { integrations: * }) {
+  const categories = groupBy(integrations, i => i.category);
+
+  return (
+    <nav>
+      {map(categories, (integrations, category) => (
+        <React.Fragment key={category}>
+          <h3>{category}</h3>
+          <List>
+            {integrations.map(i => (
+              <li key={i.slug}>
+                <MenuItem href={`/integrations/${i.slug}`}>
+                  <Logo src={`/images/${i.slug}.png`} alt={i.name} />
+                  <span>{i.name}</span>
+                </MenuItem>
+              </li>
+            ))}
+          </List>
+        </React.Fragment>
+      ))}
+    </nav>
+  );
+}
+
+const MenuItem = styled.a`
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: ${props => props.theme.text};
+`;
+
+const Logo = styled.img`
+  user-select: none;
+  height: 18px;
+  border-radius: 2px;
+  margin-right: 8px;
+`;
+
+const List = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
diff --git a/server/config/integrations.json b/server/pages/integrations/content.json
similarity index 100%
rename from server/config/integrations.json
rename to server/pages/integrations/content.json
index 23e5fbf0..f8b95fd4 100644
--- a/server/config/integrations.json
+++ b/server/pages/integrations/content.json
@@ -95,14 +95,6 @@
     "description": "Sharable code snippets, hosted by GitHub",
     "content": ""
   },
-  {
-    "slug": "numeracy",
-    "name": "Numeracy",
-    "url": "https://numeracy.io",
-    "category": "Developers",
-    "description": "A SQL pad for writing, iterating, and exploring data",
-    "content": ""
-  },
   {
     "slug": "mode-analytics",
     "name": "Mode Analytics",
@@ -111,6 +103,14 @@
     "description": "Connect and analyze data from anywhere",
     "content": ""
   },
+  {
+    "slug": "numeracy",
+    "name": "Numeracy",
+    "url": "https://numeracy.io",
+    "category": "Developers",
+    "description": "A SQL pad for writing, iterating, and exploring data",
+    "content": ""
+  },
   {
     "slug": "loom",
     "name": "Loom",
diff --git a/server/pages/integrations/figma.md b/server/pages/integrations/figma.md
new file mode 100644
index 00000000..34c2280e
--- /dev/null
+++ b/server/pages/integrations/figma.md
@@ -0,0 +1,5 @@
+In an Outline document, paste a link to a [Figma](https://figma.com) design and we will instantly convert it to an interactive, live preview.
+
+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.
+
+> This integration works without any additional settings or authentication.
\ No newline at end of file
diff --git a/server/pages/Integrations.js b/server/pages/integrations/index.js
similarity index 92%
rename from server/pages/Integrations.js
rename to server/pages/integrations/index.js
index 7b972379..698de413 100644
--- a/server/pages/Integrations.js
+++ b/server/pages/integrations/index.js
@@ -4,9 +4,9 @@ import { map, groupBy } from 'lodash';
 import styled from 'styled-components';
 import Grid from 'styled-components-grid';
 import { Helmet } from 'react-helmet';
-import Header from './components/Header';
-import Content from './components/Content';
-import integrations from '../config/integrations';
+import Header from '../components/Header';
+import Content from '../components/Content';
+import integrations from './content';
 
 const categories = groupBy(integrations, i => i.category);
 
diff --git a/server/routes.js b/server/routes.js
index 50ef5cb6..bdf136b0 100644
--- a/server/routes.js
+++ b/server/routes.js
@@ -1,5 +1,7 @@
 // @flow
 import * as React from 'react';
+import fs from 'fs-extra';
+import { find } from 'lodash';
 import path from 'path';
 import Koa from 'koa';
 import Router from 'koa-router';
@@ -18,8 +20,9 @@ import About from './pages/About';
 import Changelog from './pages/Changelog';
 import Privacy from './pages/Privacy';
 import Pricing from './pages/Pricing';
-import Integrations from './pages/Integrations';
-import Integration from './pages/Integration';
+import Integrations from './pages/integrations';
+import integrations from './pages/integrations/content';
+import Integration from './pages/integrations/Integration';
 import Api from './pages/Api';
 import SubdomainSignin from './pages/SubdomainSignin';
 
@@ -36,7 +39,11 @@ const renderapp = async ctx => {
 };
 
 // serve static assets
-koa.use(serve(path.resolve(__dirname, '../public')));
+koa.use(
+  serve(path.resolve(__dirname, '../public'), {
+    maxage: 60 * 60 * 24 * 30 * 1000,
+  })
+);
 
 router.get('/_health', ctx => (ctx.body = 'OK'));
 
@@ -58,9 +65,20 @@ router.get('/about', ctx => renderpage(ctx, <About />));
 router.get('/pricing', ctx => renderpage(ctx, <Pricing />));
 router.get('/developers', ctx => renderpage(ctx, <Api />));
 router.get('/privacy', ctx => renderpage(ctx, <Privacy />));
-router.get('/integrations/:slug', ctx =>
-  renderpage(ctx, <Integration slug={ctx.params.slug} />)
-);
+router.get('/integrations/:slug', async ctx => {
+  const slug = ctx.params.slug;
+  const integration = find(integrations, i => i.slug === slug);
+  if (!integration) throw new Error('Not found');
+
+  const content = await fs.readFile(
+    path.resolve(__dirname, `pages/integrations/${slug}.md`)
+  );
+
+  return renderpage(
+    ctx,
+    <Integration integration={integration} content={content} />
+  );
+});
 router.get('/integrations', ctx => renderpage(ctx, <Integrations />));
 router.get('/changelog', async ctx => {
   const data = await fetch(
diff --git a/shared/components/OutlineLogo.js b/shared/components/OutlineLogo.js
new file mode 100644
index 00000000..c35510f1
--- /dev/null
+++ b/shared/components/OutlineLogo.js
@@ -0,0 +1,25 @@
+// @flow
+import * as React from 'react';
+
+type Props = {
+  size?: number,
+  fill?: string,
+  className?: string,
+};
+
+function OutlineLogo({ size = 32, fill = '#333', className }: Props) {
+  return (
+    <svg
+      fill={fill}
+      width={size}
+      height={size}
+      viewBox="0 0 64 64"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M32,57.6 L32,59.1606101 C32,61.3697491 30.209139,63.1606101 28,63.1606101 C27.3130526,63.1606101 26.6376816,62.9836959 26.038955,62.6469122 L2.03895504,49.1469122 C0.779447116,48.438439 -4.3614532e-15,47.1057033 -7.10542736e-15,45.6606101 L-7.10542736e-15,18.3393899 C-7.28240024e-15,16.8942967 0.779447116,15.561561 2.03895504,14.8530878 L26.038955,1.35308779 C27.9643866,0.270032565 30.4032469,0.952913469 31.4863021,2.87834498 C31.8230858,3.47707155 32,4.15244252 32,4.83938994 L32,6.4 L34.8506085,5.54481746 C36.9665799,4.91002604 39.1965137,6.11075966 39.8313051,8.22673106 C39.9431692,8.59961116 40,8.98682435 40,9.3761226 L40,11 L43.5038611,10.5620174 C45.6959408,10.2880074 47.6951015,11.8429102 47.9691115,14.0349899 C47.9896839,14.1995692 48,14.3652688 48,14.5311289 L48,49.4688711 C48,51.6780101 46.209139,53.4688711 44,53.4688711 C43.8341399,53.4688711 43.6684404,53.458555 43.5038611,53.4379826 L40,53 L40,54.6238774 C40,56.8330164 38.209139,58.6238774 36,58.6238774 C35.6107017,58.6238774 35.2234886,58.5670466 34.8506085,58.4551825 L32,57.6 Z M32,53.4238774 L36,54.6238774 L36,9.3761226 L32,10.5761226 L32,53.4238774 Z M40,15.0311289 L40,48.9688711 L44,49.4688711 L44,14.5311289 L40,15.0311289 Z M5.32907052e-15,44.4688711 L5.32907052e-15,19.5311289 L3.55271368e-15,44.4688711 Z M4,18.3393899 L4,45.6606101 L28,59.1606101 L28,4.83938994 L4,18.3393899 Z M8,21 L12,19 L12,45 L8,43 L8,21 Z" />
+    </svg>
+  );
+}
+
+export default OutlineLogo;
diff --git a/shared/components/OutlineLogo/index.js b/shared/components/OutlineLogo/index.js
deleted file mode 100644
index 8bbc2f85..00000000
--- a/shared/components/OutlineLogo/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// @flow
-import * as React from 'react';
-import logo from './logo.png';
-
-function OutlineLogo() {
-  return <img src={logo} width={16} height={16} alt="Outline Logo" />;
-}
-
-export default OutlineLogo;
diff --git a/shared/components/OutlineLogo/logo.png b/shared/components/OutlineLogo/logo.png
deleted file mode 100644
index 59fc4a62..00000000
Binary files a/shared/components/OutlineLogo/logo.png and /dev/null differ
diff --git a/shared/styles/base.js b/shared/styles/base.js
index c6d722ee..d0780639 100644
--- a/shared/styles/base.js
+++ b/shared/styles/base.js
@@ -77,8 +77,8 @@ export default `
 
   hr {
     border: 0;
-  height: 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border - bottom: 1px solid rgba(255, 255, 255, 0.3);
-}
+    height: 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+  }
 `;